【发布时间】：2017-10-28 10:23:34
【问题描述】：
我想将我的基本脚本（它运行良好）移动到 AngularJs 这是我的控制器和基本的 html。当我执行这个时，它不显示任何错误，只是得到空白页。 在内部，元素得到了信息，但我什么都看不到。 我觉得我错过了一些东西，但我看不到它。
1- 启动 Angular 项目时，我执行 iniciar() ($scope.iniciar())
2- 我尝试区分 ThreeJs 的基本对象
3- 当一切正常时，我渲染所有但不显示对象（香蕉）
谢谢！
/*********** 控制器 *************/
'use strict';
/**
* @ngdoc function
* @name myApp.controller:CanvasCtrl
* @description
* # CanvasCtrl
* Controller of the myApp
*/
angular.module('myApp')
.controller('CanvasCtrl', function ($rootScope,$scope,config) {
$scope.renderer = null;
$scope.canvas = null;
$scope.camera = null;
$scope.scene = null;
$scope.directionalLight = null;
$scope.objeto = null;
$scope.manager = null;
$scope.loader = null;
$scope.iniciar = function() {
/* SCENE */
$scope.scene = new THREE.Scene();
/* CANVAS */
$scope.renderer = new THREE.WebGLRenderer({ alpha: true });
$scope.canvas = angular.element('#myCanvas');
$scope.renderer.setSize($scope.canvas.width(), 700);
/* CAMARA */
$scope.camera = new THREE.PerspectiveCamera(50, $scope.canvas.width() / 700, 0.1, 10000);
$scope.camera.position.set(0, 0, 500);
$scope.scene.add($scope.camera);
/* DIRECTIONAL LIGHT */
$scope.directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
$scope.directionalLight.position.set(0, 0, 350);
$scope.directionalLight.lookAt(new THREE.Vector3(0, 0, 0));
$scope.scene.add($scope.directionalLight);
/* Load OBJ */
$scope.loadOBJ();
};
$scope.loadOBJ = function() {
/* LOADING MANAGER */
$scope.manager = new THREE.LoadingManager();
$scope.loader = new THREE.OBJLoader($scope.manager);
/* LOAD OBJ */
$scope.loader.load('http://mamboleoo.be/learnThree/demos/banana.obj', function(object) {
$scope.objeto = object;
$scope.objeto.rotation.x = Math.PI / 2;
$scope.objeto.position.y = -200;
$scope.objeto.position.z = 50;
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.color = new THREE.Color(0X00FF00);
child.geometry.computeVertexNormals();
}
});
/* Add object to Scene */
$scope.scene.add($scope.objeto);
$scope.render();
});
};
$scope.render = function() {
requestAnimationFrame($scope.render);
$scope.objeto.rotation.z += 0.01;
$scope.renderer.render($scope.scene, $scope.camera);
};
});
/***********HTML******************/
<!doctype html>
<html>
<head>
<some angular's js>
<some css's>
</head>
<body ng-app="myApp" ng-controller="CanvasCtrl" data-spy="scroll" data-target=".navbar" data-offset="60">
<div ng-init="iniciar()">
<canvas class="col-md-12" id="myCanvas"></canvas>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js"></script>
<script src="http://mamboleoo.be/learnThree/demos/OBJLoader.js"></script>
<script src="scripts/controllers/canvasCtrl.js"></script>
</body>
</html>
【问题讨论】：
-
魔术解决方案带有... 在视图中：
<div ng-init="iniciar()"> <canvas class="col-md-12" id="myCanvas"></canvas> <div class="col-md-12" id="myCanvasRender"></div> </div>在控制器中：{...}$scope.loadOBJ(); document.getElementById("myCanvasRender").appendChild( $scope.renderer.domElement );
标签： javascript angularjs html canvas three.js