试图集成AngularJS和three.js，但几何没有得到呈现

（这是我在网上找到的一个例子，但它仍然无法正常工作）。我正在尝试集成AngularJS以获取three.js文件的MVC体系结构。尽管在调试时我没有发现任何错误，但我无法看到任何几何体（立方体）被渲染。我的JS文件.....试图集成AngularJS和three.js，但几何没有得到呈现

var newApp = angular.module('new', ['ngRoute','newServices']); 

newApp.config(['$routeProvider', '$locationProvider', function ($routeProvider,  $locationProvider) { 
$routeProvider. 
    when('/', {templateUrl:"views/main.html", controller:'mainCtrl'}); 
$locationProvider.html5Mode(false); 
}]); 


newApp.controller('mainCtrl', ['$scope', 'renderFactory', function ($scope, renderFactory) { 
$scope.text = 'Hello'; 

init(); 
function init() { 
    renderFactory.createCamera(); 
    renderFactory.createCube(); 
    renderFactory.setup(); 
    renderFactory.paint(); 

} 

} ]);

我厂文件...

var xrotation; 
var yrotation; 
var zrotation; 
var WIDTH = 800; 
var HEIGHT = 600; 
var ASPECT = WIDTH/HEIGHT; 
var renderer = new THREE.WebGLRenderer(); 
var scene = new THREE.Scene(); 
var camera; 
var cube; 

var newServices = angular.module('newServices', []); 
newServices.factory('renderFactory', function() { 
return { 


    createCube: function() { 
     // set up the cube vars 
     var length = 50; 
     var segments = 16; 

     // create the cube's material 
     var sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xFF0000 }); 

     // create a new mesh with cube geometry - 
     cube = new THREE.Mesh(new THREE.CubeGeometry(15, 15, 15), sphereMaterial); 

     //Set Cube Rotation 
     //cube.rotation.x += 0.2; 
     //cube.rotation.y += 0.3; 
     //cube.rotation.z += 0.1; 

     scene.add(cube); 

    }, 

    createCamera: function() { 
     // set some camera attributes 
     var VIEW_ANGLE = 40; 
     var NEAR = 0.1; 
     var FAR = 10000; 

     // create a WebGL camera 
     camera = new THREE.PerspectiveCamera(VIEW_ANGLE, 
       ASPECT, 
       NEAR, 
       FAR); 

     // the camera starts at 0,0,0 so pull it back 
     //camera.position.z = 250; 

     // and the camera 
     scene.add(camera); 

    }, 

    paint: function() { 
     // draw! 
     renderer.render(scene, camera); 
    }, 



    setup: function() { 
     // start the renderer 
     renderer.setSize(WIDTH, HEIGHT); 
     document.getElementById('container1').appendChild(renderer.domElement); 

    } 

}; 
});

哪里我做错???还是我错过了什么？

来源

2014-02-17 Dil

你在哪里创建场景？ – BuildingJarl

对不起，我现在加了整个工厂。 – Dil

我对Angular的了解远比我对Angular的了解要多，但我不认为工厂应该包含在服务中。作为一家工厂，如果没有这项服务，经过一个简单的改变，它就可以正常工作：你在“camera.position.z = 250;”的正确轨道上。但将它评论出来，它将相机放在与立方体相同的位置，因此坐在立方体中间的相机不会看到任何东西，只能看到立方体内部的透明。

我把工厂退出了服务并取消了相机位置的注释。我也拿出路由器，因为这个问题关于Angular/Three而不是路由器。

这里的应用部分：

var newApp = angular.module('new', []); 

newApp.controller('mainCtrl', ['$scope', 'renderFactory', function ($scope, renderFactory) { 
    init(); 

    function init() { 
     renderFactory.createCamera(); 
     renderFactory.createCube(); 
     renderFactory.setup(); 
     renderFactory.paint(); 
    } 

}]);

在你的工厂，我从服务包装中取出，并注释去掉，你的相机位置：

newApp.factory('renderFactory', function renderFactory() { 
    var xrotation; 
    var yrotation; 
    var zrotation; 
    var WIDTH = 800; 
    var HEIGHT = 600; 
    var ASPECT = WIDTH/HEIGHT; 
    var renderer = new THREE.WebGLRenderer(); 
    var scene = new THREE.Scene(); 
    var camera; 
    var cube; 

    return { 
     createCube: function() { 
     // set up the cube vars 
     var length = 50; 
     var segments = 16; 

     // create the cube's material 
     var sphereMaterial = new THREE.MeshLambertMaterial({ 
      color: 0xFF0000 
     }); 

     // create a new mesh with cube geometry - 
     cube = new THREE.Mesh(new THREE.BoxGeometry(15, 15, 15), sphereMaterial); 

     //Set Cube Rotation 
     cube.rotation.x += 0.2; 
     cube.rotation.y += 0.3; 
     cube.rotation.z += 0.1; 

     scene.add(new THREE.AmbientLight(0xFF0000)); 

     scene.add(cube); 

    }, 
    createCamera: function() { 
     // set some camera attributes 
     var VIEW_ANGLE = 40; 
     var NEAR = 0.1; 
     var FAR = 10000; 

     // create a WebGL camera 
     camera = new THREE.PerspectiveCamera(VIEW_ANGLE, 
     ASPECT, 
     NEAR, 
     FAR); 

     // the camera starts at 0,0,0 so pull it back 
     camera.position.z = 250; 

     // and the camera 
     scene.add(camera); 

    }, 
    paint: function() { 
     // draw! 
     renderer.render(scene, camera); 
    }, 
    setup: function() { 
     // start the renderer 
     renderer.setSize(WIDTH, HEIGHT); 
    document.getElementById('container1').appendChild(renderer.domElement); 
    } 
};

}）;

的HTML，只是任何人都好奇，很简单：

<body ng-app="new"> 
    <div id="container1" ng-controller="mainCtrl"></div> 
</body>

我也注释掉你的立方体旋转，使得它看起来不像一个红色方块。

这里有一个小提琴 - http://jsfiddle.net/kkelly/ccfyL82k/

来源

2015-02-20 06:17:27 kellycode

我创造它的工作我重视我的指令，但

在你的代码有

document.getElementById('container1').appendChild(renderer.domElement);

行一个指令，你应该尝试

container = angular.element('#container1');           
    container.append(renderer.domElement);

这对连接或角度不起作用警告ppendchild未定义

` elem[0].appendChild(renderer.domElement);

或在如下面

` (function() { 
    'use strict'; 
    angular 
    .module('vr-module') 
    .directive(
    "vr",vr); 

    /* @ngInject */ 
    function vr() { 
     return { 
      restrict: "E", 
      templateUrl:'app/vr-module/vr.html', 
      templateAs:'vr', 
      controller:'VrPageController', 
      link: function (scope, elem, attr) { 

       // declarando las variables que conteneran los objectos de mi juego 
        var scene, camara, fieldOfView, aspectratio, nearPlane , farPlane, 
         renderer, container, ALTURA, ANCHO,mouseX,mouseY , mar, Mar, nube, Nubes, Cielo; 

         var Colors = { 
         red:0xf25346, 
         white:0xd8d0d1, 
         brown:0x59332e, 
         pink:0xF5986E, 
         brownDark:0x23190f, 
         blue:0x68c3c0, 
         }; 

         function onDocumentMouseMove(event) { 

            mouseX = (event.clientX - windowHalfX)/2; 
            mouseY = (event.clientY - windowHalfY)/2; 

           } 

         function crearLaEscena() { 

           ALTURA = window.innerHeight; 
           ANCHO = window.innerWidth; 
           // crear la escena 
           scene = new THREE.Scene(); 

           // adicionar un efecto de niebla = Fog funcion 
           scene.niebla = new THREE.Fog(0xf7d9aa, 100, 950); 

           // crear la camara 

           aspectratio = ANCHO/ALTURA; 
           fieldOfView = 60; 
           nearPlane = 1; 
           farPlane =10000; 
           camara = new THREE.PerspectiveCamera(
             fieldOfView, 
             aspectratio, 
             nearPlane, 
             farPlane 
            ); 

           // posicionar la camara ne el espacio 3d x,y,z 
           camara.position.x = 0; 
           camara.position.z = 900; 
           camara.position.y = 100; 

           // ahora creare el dibujador de los graficos 
           renderer = new THREE.WebGLRenderer({ 

           // opcion de mostrar transparencia para que se vea 
           // el fondo degradado que se puso en el css 
           alpha : true, 
           antialias : true 
           }); 
           // le damos el alto y ancho de toda la pantalla 
           renderer.setSize(ANCHO, ALTURA); 

           // esto abilita la opcions de mostrar sombras 
           renderer.shadowMap.enabled = true; 

           // adicionar los elementos del dibujador renderer 
           // al contenedor creado en el html 
           // elem[0].appendChild(renderer.domElement); 
              container = angular.element('#mi-mundo'); 
              // container =elem; 


          container.append(renderer.domElement); 
           // evento que supervisa si el usuario cambia el tamano de 
           // la pantalla entonces tenemos que actualizar la camara 

           window.addEventListener('resize', handleWindowResize, false); 

           // end crear escena funcion 
          } 

         // esta es la funcion que se encarga de actualizar el cambio de 
         // tamano 
         function handleWindowResize() { 
         // a medida que va cambiando vamos actualizando 
         // el tamano del renderer y el aspectratio la camara 
         ALTURA = window.innerHeight; 
         ANCHO = window.innerWidth; 
         renderer.setSize(ALTURA, ANCHO); 
         camara.aspect =ANCHO/ALTURA; 
         camara.updateProjectionMatrix(); 
         } 

         // AHORA luces 
         // una de la spartes mas dificiles es la luz de una escena 
         var hemisphereLight, shadowlight; 

         function crearLasLuces() { 
           // hemisphereLight es la luz degradada clara 
           // su primer parametro es el color del nube 
           // el segundo es el color del piso 

           // y el tercero es la intensidad de la luz 
           hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9); 

           // luz direccional, es la que brilla desde una posicion especifica 
           // va ser como el sol, osea que toda la luz va ser paralela 

           shadowlight = new THREE.DirectionalLight(0xffffff, .9); 

           // ahora le damos una direcion a la luz vectorialmente (x,y,z) 
           shadowlight.position.set(150,350,350); 

           // activar la opcion castShadow para que ;a luz produzca sombras 
           shadowlight.castShadow = true; 

           // ahora definimos el area de las sombras projectadas 

           shadowlight.shadow.camera.left = -400 
           shadowlight.shadow.camera.right = 400 
           shadowlight.shadow.camera.top = 400; 
           shadowlight.shadow.camera.bottom = -400 
           shadowlight.shadow.camera.near = 1; 
           shadowlight.shadow.camera.far = 1000; 

           // ahora definimos la resolucion de las sombras entre mas alta 
           // mejor pero tambine requiere mas de la computadora 
           shadowlight.shadow.mapSize.width = 2048; 
           shadowlight.shadow.mapSize.height = 2048; 

           // ahora para activar nuestras luces solo 
           // las adicionamos al ecenario :) 

           scene.add(hemisphereLight); 
           scene.add(shadowlight); 

          } 

         Mar = function() { 

         var geom = new THREE.CylinderGeometry(600,600,800,40,10); 
         geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2)); 
         var mat = new THREE.MeshPhongMaterial({ 
          color:Colors.blue, 
          transparent:true, 
          opacity:.6, 
          shading:THREE.FlatShading, 
         }); 
         this.mesh = new THREE.Mesh(geom, mat); 
         this.mesh.receiveShadow = true; 


         } 

         function crearElMar() { 
         mar = new Mar(); 
         //empujemos el cilindor en la parte de abajo del escenario 
         mar.mesh.position.y = -600; 
         // y lo ponemos ne el scenario 
         scene.add(mar.mesh); 
         } 


         Nubes = function() { 
         // creamos el solido 
         this.mesh = new THREE.Object3D(); 

         // crearemos un cubo geomtrico y lo duplicaremos 
         // para crear las NUBES 
         // var geom = THREE.BoxGeometry(20,20,20); 
         var geom = new THREE.BoxGeometry(20,20,20); 
         var mat =new THREE.MeshPhongMaterial({ 
          color:Colors.white, 
         }); 

         // duplicamos las NUBES 
         var nBlocs = 3+Math.floor(Math.random()*3); 
         for (var i=0; i<nBlocs; i++){ 

          // create the mesh by cloning the geometry 
          var m = new THREE.Mesh(geom, mat); 

           // set the position and the rotation of each cube randomly 
          m.position.x = i*15; 
          m.position.y = Math.random()*10; 
          m.position.z = Math.random()*10; 
          m.rotation.z = Math.random()*Math.PI*2; 
          m.rotation.y = Math.random()*Math.PI*2; 

          // set the size of the cube randomly 
          var s = .1 + Math.random()*.9; 
          m.scale.set(s,s,s); 

          // allow each cube to cast and to receive shadows 
          m.castShadow = true; 
          m.receiveShadow = true; 

          // add the cube to the container we first created 
          this.mesh.add(m); 
         } 
         } 

         Cielo = function(){ 
          this.mesh = new THREE.Object3D(); 
          this.nCLouds = 20; 
          this.clouds = []; 
          var stepAngle = Math.PI*2/this.nCLouds; 
         // aqui crearemos las nubes 
         for (var i = 0; i < this.nCLouds; i++) { 
          var c = new Nubes(); 

          this.clouds.push(c); 
          // les ponemos rotacion y posicion de cada nube 
          // con trigonometria 

          //el angulo de la nube 
          var a = stepAngle*i; 
          // la distancia entre el centro de la x y 
          // la nube misma 
          var h = 750 + Math.random()*200; 

          //trigonometricamente convertimos las coordenadas 
          // en coordenadaspolares 

          c.mesh.position.y = Math.sin(a)*h; 
          c.mesh.position.x = Math.cos(a)*h; 

          //ahora rotemos 
          c.mesh.rotation.z = -400-Math.random()*400; 

          // y le hacesmo diferente tamano para cada nube 
          var s = 1+Math.random()*2; 
          c.mesh.scale.set(s,s,s); 

          // ahora l aponemos en el escenario 
          this.mesh.add(c.mesh); 
         } 

         } 
         var cielo; 
         function CrearElCielo() { 
         cielo = new Cielo(); 
         cielo.mesh.position.y = -600; 
          scene.add(cielo.mesh); 

         } 

         function crearElAeroPlano() { 

         } 

         function actualizarEscena(){ 
         // updatePlane(); 
         mar.mesh.rotation.z += .005; 
         cielo.mesh.rotation.z += .01; 
         renderer.render(scene, camara); 
         requestAnimationFrame(actualizarEscena); 
         } 



         function init() { 
         // creando el escenario, la camara, las luces y accion :)!!! 
         // setup scene, camera, render and lights 
         crearLaEscena(); 
         crearLasLuces(); 
         //insertando el avion (el objecto 3d), el mar, y el nube 
         // add moving objects 
         crearElAeroPlano(); 
         crearElMar(); 
         CrearElCielo(); 
         // finalmente se repite cada scena para actualizarla 
         // se repite para mantener la escena render 
         actualizarEscena(); 
         } 

          init(); 


        // window.addEventListener('load',init, false); 

      } 
     } 
    }

}（））我的指令码的林肯功能;

(function() { 
 
    'use strict'; 
 
    angular 
 
    .module('vr-module') 
 
    .directive(
 
\t \t "vr",vr); 
 

 
\t \t /* @ngInject */ 
 
\t \t function vr() { 
 
\t \t \t return { 
 
\t \t \t \t restrict: "E", 
 
\t \t \t \t templateUrl:'app/vr-module/vr.html', 
 
\t \t \t \t templateAs:'vr', 
 
\t \t \t \t controller:'VrPageController', 
 
\t \t \t \t link: function (scope, elem, attr) { 
 

 
\t \t \t \t \t // declarando las variables que conteneran los objectos de mi juego 
 
\t \t \t \t \t var scene, camara, fieldOfView, aspectratio, nearPlane , farPlane, 
 
\t \t \t \t \t  renderer, container, ALTURA, ANCHO,mouseX,mouseY , mar, Mar, nube, Nubes, Cielo; 
 

 
\t \t \t \t \t  var Colors = { 
 
\t \t \t \t \t  \t red:0xf25346, 
 
\t \t \t \t \t  \t white:0xd8d0d1, 
 
\t \t \t \t \t  \t brown:0x59332e, 
 
\t \t \t \t \t  \t pink:0xF5986E, 
 
\t \t \t \t \t  \t brownDark:0x23190f, 
 
\t \t \t \t \t  \t blue:0x68c3c0, 
 
\t \t \t \t \t  }; 
 

 
\t \t \t \t \t  function onDocumentMouseMove(event) { 
 

 
\t \t \t \t \t      mouseX = (event.clientX - windowHalfX)/2; 
 
\t \t \t \t \t      mouseY = (event.clientY - windowHalfY)/2; 
 

 
\t \t \t \t \t     } 
 

 
\t \t \t \t \t  function crearLaEscena() { 
 

 
\t \t \t \t \t    ALTURA = window.innerHeight; 
 
\t \t \t \t \t    ANCHO = window.innerWidth; 
 
\t \t \t \t \t    // crear la escena 
 
\t \t \t \t \t    scene = new THREE.Scene(); 
 

 
\t \t \t \t \t    // adicionar un efecto de niebla = Fog funcion 
 
\t \t \t \t \t    scene.niebla = new THREE.Fog(0xf7d9aa, 100, 950); 
 

 
\t \t \t \t \t    // crear la camara 
 

 
\t \t \t \t \t    aspectratio = ANCHO/ALTURA; 
 
\t \t \t \t \t    fieldOfView = 60; 
 
\t \t \t \t \t    nearPlane = 1; 
 
\t \t \t \t \t    farPlane =10000; 
 
\t \t \t \t \t    camara = new THREE.PerspectiveCamera(
 
\t \t \t \t \t       fieldOfView, 
 
\t \t \t \t \t       aspectratio, 
 
\t \t \t \t \t       nearPlane, 
 
\t \t \t \t \t       farPlane 
 
\t \t \t \t \t      ); 
 

 
\t \t \t \t \t    // posicionar la camara ne el espacio 3d x,y,z 
 
\t \t \t \t \t    camara.position.x = 0; 
 
\t \t \t \t \t    camara.position.z = 900; 
 
\t \t \t \t \t    camara.position.y = 100; 
 

 
\t \t \t \t \t    // ahora creare el dibujador de los graficos 
 
\t \t \t \t \t    renderer = new THREE.WebGLRenderer({ 
 

 
\t \t \t \t \t     // opcion de mostrar transparencia para que se vea 
 
\t \t \t \t \t     // el fondo degradado que se puso en el css 
 
\t \t \t \t \t     alpha : true, 
 
\t \t \t \t \t     antialias : true 
 
\t \t \t \t \t    }); 
 
\t \t \t \t \t    // le damos el alto y ancho de toda la pantalla 
 
\t \t \t \t \t    renderer.setSize(ANCHO, ALTURA); 
 

 
\t \t \t \t \t    // esto abilita la opcions de mostrar sombras 
 
\t \t \t \t \t    renderer.shadowMap.enabled = true; 
 

 
\t \t \t \t \t    // adicionar los elementos del dibujador renderer 
 
\t \t \t \t \t    // al contenedor creado en el html 
 
\t \t \t \t \t    // elem[0].appendChild(renderer.domElement); 
 
\t \t \t \t \t \t \t \t \t \t \t \t container = angular.element('#mi-mundo'); 
 
\t \t \t \t \t \t \t \t \t \t \t \t // container =elem; 
 

 

 
\t \t \t \t     container.append(renderer.domElement); 
 
\t \t \t \t \t    // evento que supervisa si el usuario cambia el tamano de 
 
\t \t \t \t \t    // la pantalla entonces tenemos que actualizar la camara 
 

 
\t \t \t \t \t    window.addEventListener('resize', handleWindowResize, false); 
 

 
\t \t \t \t \t    // end crear escena funcion 
 
\t \t \t \t \t    } 
 

 
\t \t \t \t \t  // esta es la funcion que se encarga de actualizar el cambio de 
 
\t \t \t \t \t  // tamano 
 
\t \t \t \t \t  function handleWindowResize() { 
 
\t \t \t \t \t   // a medida que va cambiando vamos actualizando 
 
\t \t \t \t \t   // el tamano del renderer y el aspectratio la camara 
 
\t \t \t \t \t   ALTURA = window.innerHeight; 
 
\t \t \t \t \t   ANCHO = window.innerWidth; 
 
\t \t \t \t \t   renderer.setSize(ALTURA, ANCHO); 
 
\t \t \t \t \t   camara.aspect =ANCHO/ALTURA; 
 
\t \t \t \t \t   camara.updateProjectionMatrix(); 
 
\t \t \t \t \t  } 
 

 
\t \t \t \t \t  // AHORA luces 
 
\t \t \t \t \t  // una de la spartes mas dificiles es la luz de una escena 
 
\t \t \t \t \t  var hemisphereLight, shadowlight; 
 

 
\t \t \t \t \t  function crearLasLuces() { 
 
\t \t \t \t \t    // hemisphereLight es la luz degradada clara 
 
\t \t \t \t \t    // su primer parametro es el color del nube 
 
\t \t \t \t \t    // el segundo es el color del piso 
 

 
\t \t \t \t \t    // y el tercero es la intensidad de la luz 
 
\t \t \t \t \t    hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, .9); 
 

 
\t \t \t \t \t    // luz direccional, es la que brilla desde una posicion especifica 
 
\t \t \t \t \t    // va ser como el sol, osea que toda la luz va ser paralela 
 

 
\t \t \t \t \t    shadowlight = new THREE.DirectionalLight(0xffffff, .9); 
 

 
\t \t \t \t \t    // ahora le damos una direcion a la luz vectorialmente (x,y,z) 
 
\t \t \t \t \t    shadowlight.position.set(150,350,350); 
 

 
\t \t \t \t \t    // activar la opcion castShadow para que ;a luz produzca sombras 
 
\t \t \t \t \t    shadowlight.castShadow = true; 
 

 
\t \t \t \t \t    // ahora definimos el area de las sombras projectadas 
 

 
\t \t \t \t \t    shadowlight.shadow.camera.left = -400 
 
\t \t \t \t \t    shadowlight.shadow.camera.right = 400 
 
\t \t \t \t \t    shadowlight.shadow.camera.top = 400; 
 
\t \t \t \t \t    shadowlight.shadow.camera.bottom = -400 
 
\t \t \t \t \t    shadowlight.shadow.camera.near = 1; 
 
\t \t \t \t \t    shadowlight.shadow.camera.far = 1000; 
 

 
\t \t \t \t \t    // ahora definimos la resolucion de las sombras entre mas alta 
 
\t \t \t \t \t    // mejor pero tambine requiere mas de la computadora 
 
\t \t \t \t \t    shadowlight.shadow.mapSize.width = 2048; 
 
\t \t \t \t \t    shadowlight.shadow.mapSize.height = 2048; 
 

 
\t \t \t \t \t    // ahora para activar nuestras luces solo 
 
\t \t \t \t \t    // las adicionamos al ecenario :) 
 

 
\t \t \t \t \t    scene.add(hemisphereLight); 
 
\t \t \t \t \t    scene.add(shadowlight); 
 

 
\t \t \t \t \t    } 
 

 
\t \t \t \t \t  Mar = function() { 
 

 
\t \t \t \t \t   var geom = new THREE.CylinderGeometry(600,600,800,40,10); 
 
\t \t \t \t \t   geom.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI/2)); 
 
\t \t \t \t \t   var mat = new THREE.MeshPhongMaterial({ 
 
\t \t \t \t \t   color:Colors.blue, 
 
\t \t \t \t \t   transparent:true, 
 
\t \t \t \t \t   opacity:.6, 
 
\t \t \t \t \t   shading:THREE.FlatShading, 
 
\t \t \t \t \t   }); 
 
\t \t \t \t \t   this.mesh = new THREE.Mesh(geom, mat); 
 
\t \t \t \t \t   this.mesh.receiveShadow = true; 
 

 

 
\t \t \t \t \t  } 
 

 
\t \t \t \t \t  function crearElMar() { 
 
\t \t \t \t \t   mar = new Mar(); 
 
\t \t \t \t \t   //empujemos el cilindor en la parte de abajo del escenario 
 
\t \t \t \t \t   mar.mesh.position.y = -600; 
 
\t \t \t \t \t   // y lo ponemos ne el scenario 
 
\t \t \t \t \t   scene.add(mar.mesh); 
 
\t \t \t \t \t  } 
 

 

 
\t \t \t \t \t  Nubes = function() { 
 
\t \t \t \t \t   // creamos el solido 
 
\t \t \t \t \t   this.mesh = new THREE.Object3D(); 
 

 
\t \t \t \t \t   // crearemos un cubo geomtrico y lo duplicaremos 
 
\t \t \t \t \t   // para crear las NUBES 
 
\t \t \t \t \t   // var geom = THREE.BoxGeometry(20,20,20); 
 
\t \t \t \t \t   var geom = new THREE.BoxGeometry(20,20,20); 
 
\t \t \t \t \t   var mat =new THREE.MeshPhongMaterial({ 
 
\t \t \t \t \t   color:Colors.white, 
 
\t \t \t \t \t   }); 
 

 
\t \t \t \t \t   // duplicamos las NUBES 
 
\t \t \t \t \t   var nBlocs = 3+Math.floor(Math.random()*3); 
 
\t \t \t \t \t   for (var i=0; i<nBlocs; i++){ 
 

 
\t \t \t \t \t   // create the mesh by cloning the geometry 
 
\t \t \t \t \t \t  \t var m = new THREE.Mesh(geom, mat); 
 

 
\t \t \t \t \t \t \t  // set the position and the rotation of each cube randomly 
 
\t \t \t \t \t  \t \t m.position.x = i*15; 
 
\t \t \t \t \t  \t \t m.position.y = Math.random()*10; 
 
\t \t \t \t \t  \t \t m.position.z = Math.random()*10; 
 
\t \t \t \t \t  \t \t m.rotation.z = Math.random()*Math.PI*2; 
 
\t \t \t \t \t  \t \t m.rotation.y = Math.random()*Math.PI*2; 
 

 
\t \t \t \t \t  \t \t // set the size of the cube randomly 
 
\t \t \t \t \t  \t \t var s = .1 + Math.random()*.9; 
 
\t \t \t \t \t  \t \t m.scale.set(s,s,s); 
 

 
\t \t \t \t \t  \t \t // allow each cube to cast and to receive shadows 
 
\t \t \t \t \t  \t \t m.castShadow = true; 
 
\t \t \t \t \t  \t \t m.receiveShadow = true; 
 

 
\t \t \t \t \t  \t \t // add the cube to the container we first created 
 
\t \t \t \t \t  \t \t this.mesh.add(m); 
 
\t \t \t \t \t   } 
 
\t \t \t \t \t  } 
 

 
\t \t \t \t \t  Cielo = function(){ 
 
\t \t \t \t \t   this.mesh = new THREE.Object3D(); 
 
\t \t \t \t \t   this.nCLouds = 20; 
 
\t \t \t \t \t   this.clouds = []; 
 
\t \t \t \t \t   var stepAngle = Math.PI*2/this.nCLouds; 
 
\t \t \t \t \t   // aqui crearemos las nubes 
 
\t \t \t \t \t   for (var i = 0; i < this.nCLouds; i++) { 
 
\t \t \t \t \t    var c = new Nubes(); 
 

 
\t \t \t \t \t    this.clouds.push(c); 
 
\t \t \t \t \t    // les ponemos rotacion y posicion de cada nube 
 
\t \t \t \t \t    // con trigonometria 
 

 
\t \t \t \t \t    //el angulo de la nube 
 
\t \t \t \t \t    var a = stepAngle*i; 
 
\t \t \t \t \t    // la distancia entre el centro de la x y 
 
\t \t \t \t \t    // la nube misma 
 
\t \t \t \t \t    var h = 750 + Math.random()*200; 
 

 
\t \t \t \t \t    //trigonometricamente convertimos las coordenadas 
 
\t \t \t \t \t    // en coordenadaspolares 
 

 
\t \t \t \t \t    c.mesh.position.y = Math.sin(a)*h; 
 
\t \t \t \t \t    c.mesh.position.x = Math.cos(a)*h; 
 

 
\t \t \t \t \t    //ahora rotemos 
 
\t \t \t \t \t    c.mesh.rotation.z = -400-Math.random()*400; 
 

 
\t \t \t \t \t    // y le hacesmo diferente tamano para cada nube 
 
\t \t \t \t \t    var s = 1+Math.random()*2; 
 
\t \t \t \t \t    c.mesh.scale.set(s,s,s); 
 

 
\t \t \t \t \t    // ahora l aponemos en el escenario 
 
\t \t \t \t \t    this.mesh.add(c.mesh); 
 
\t \t \t \t \t   } 
 

 
\t \t \t \t \t  } 
 
\t \t \t \t \t   var cielo; 
 
\t \t \t \t \t  function CrearElCielo() { 
 
\t \t \t \t \t   cielo = new Cielo(); 
 
\t \t \t \t \t   cielo.mesh.position.y = -600; 
 
\t \t \t \t \t   scene.add(cielo.mesh); 
 

 
\t \t \t \t \t  } 
 

 
\t \t \t \t \t  function crearElAeroPlano() { 
 

 
\t \t \t \t \t  } 
 

 
\t \t \t \t \t  function actualizarEscena(){ 
 
\t \t \t \t \t   // updatePlane(); 
 
\t \t \t \t \t   mar.mesh.rotation.z += .005; 
 
\t \t \t \t \t   cielo.mesh.rotation.z += .01; 
 
\t \t \t \t \t   renderer.render(scene, camara); 
 
\t \t \t \t \t   requestAnimationFrame(actualizarEscena); 
 
\t \t \t \t \t  } 
 

 

 

 
\t \t \t \t \t  function init() { 
 
\t \t \t \t \t   // creando el escenario, la camara, las luces y accion :)!!! 
 
\t \t \t \t \t   // setup scene, camera, render and lights 
 
\t \t \t \t \t   crearLaEscena(); 
 
\t \t \t \t \t   crearLasLuces(); 
 
\t \t \t \t \t   //insertando el avion (el objecto 3d), el mar, y el nube 
 
\t \t \t \t \t   // add moving objects 
 
\t \t \t \t \t   crearElAeroPlano(); 
 
\t \t \t \t \t   crearElMar(); 
 
\t \t \t \t \t   CrearElCielo(); 
 
\t \t \t \t \t   // finalmente se repite cada scena para actualizarla 
 
\t \t \t \t \t   // se repite para mantener la escena render 
 
\t \t \t \t \t   actualizarEscena(); 
 
\t \t \t \t \t  } 
 

 
\t \t \t \t \t \t \t \t init(); 
 

 

 
\t \t \t \t \t // window.addEventListener('load',init, false); 
 

 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t } 
 
}());

来源

2016-09-09 20:22:09 Xvegas

试图集成AngularJS和three.js，但几何没有得到呈现

回答

相关问题