試圖集成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，但幾何沒有得到呈現

回答

相關問題