Я хочу переместить мой основной скрипт (он работал нормально) в AngularJs Это мой контроллер и базовый HTML. Когда я выполняю это, это не показывает никакой ошибки, просто получить пустую страницу. Внутренне, элементы получили информацию, но я ничего не вижу. Я что-то упустил, но не вижу.

1- Когда я запускаю угловой проект, я выполняю iniciar () ($ scope.iniciar ())

2- Я пытаюсь дифференцировать основные объекты Three Js

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>
1
Luciano 27 Май 2017 в 20:48

2 ответа

Лучший ответ

Волшебное решение поставляется с ...

Ввиду:

<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!
0
Luciano 16 Июл 2017 в 18:21

Этот код поможет вам.

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);
    };
});
0
Aji Aneesh 27 Май 2017 в 21:03