Question

我想将我的基本脚本（它工作正常）移动到AngularJs 这是我的控制器和基本的HTML。当我执行此操作时，它不会显示任何错误，只需获取空白页。 Internaly，元素获得了信息，但我什么都看不到。我错过了一些东西，但我无法看到它。

1-启动角度项目时我执行iniciar（）（$ scope.iniciar（））

2-我尝试区分ThreeJs的基本对象

<3>当一切正常时，我渲染所有但不显示对象（香蕉）

谢谢！

/ *********** CONTROLLER ************* /

'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>

Answer 1

此代码将为您提供帮助。

angular.module('myApp', [])
.controller('CanvasCtrl', function($rootScope, $scope) {
    $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 = document.getElementById('myCanvas');
        $scope.renderer.setSize($scope.canvas.width, 700);

        document.body.appendChild($scope.renderer.domElement);
        /* 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);
    };
});

Answer 2

Magic Solution附带......

在视图中：

<div ng-init="iniciar()">
    <canvas class="col-md-12" id="myCanvas"></canvas>
    <div class="col-md-12" id="myCanvasRender"></div> <!-- This is new! -->
</div>

在控制器中：

$scope.loadOBJ();
document.getElementById("myCanvasRender").appendChild( $scope.renderer.domElement ); //This is new!

ThreeJs + AngularJs + OBJLoader不会渲染任何内容并且不会显示错误

2 个答案: