2014-02-20 26 views
0

我是three.js的新手,我有一個基本的攪拌機場景,我也命名了兩個不同的網格。我已經設法將網格導入三個,但我想知道如何引用和操作每個網格?如果2個網格在同一個文件中,或者我應該加載mesh1.js,mesh2.js等,可能嗎?三個js - 在進口攪拌機場景中引用單個網格

這是代碼:

<!doctype html> 
<html lang="en"> 
<head> 

    <meta charset="utf-8"> 
</head> 
<body style="margin: 0;"> 



    <script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script> 
    <script src="js/OrbitControls.js"></script> 

    <script> 

    // Set up the scene, camera, and renderer as global variables. 
    var scene, camera, renderer; 

    init(); 
    animate(); 

    // Sets up the scene. 
    function init() { 

     // Create the scene and set the scene size. 
     scene = new THREE.Scene(); 
     var WIDTH = window.innerWidth, 
      HEIGHT = window.innerHeight; 

     // Create a renderer and add it to the DOM. 
     renderer = new THREE.WebGLRenderer({antialias:true}); 
     renderer.setSize(WIDTH, HEIGHT); 
     document.body.appendChild(renderer.domElement); 

     // Create a camera, zoom it out from the model a bit, and add it to the scene. 
     camera = new THREE.PerspectiveCamera(45, WIDTH/HEIGHT, 0.1, 20000); 
     camera.position.set(0,6,0); 
     scene.add(camera); 

     // Create an event listener that resizes the renderer with the browser window. 
     window.addEventListener('resize', function() { 
     var WIDTH = window.innerWidth, 
      HEIGHT = window.innerHeight; 
     renderer.setSize(WIDTH, HEIGHT); 
     camera.aspect = WIDTH/HEIGHT; 
     camera.updateProjectionMatrix(); 
     }); 

     // Set the background color of the scene. 
     renderer.setClearColorHex(0x333F47, 1); 

     // Create a light, set its position, and add it to the scene. 
     var light = new THREE.PointLight(0xffffff); 
     light.position.set(-100,-200,100); 
     scene.add(light); 

     var light2 = new THREE.PointLight(0xffffff); 
     light2.position.set(-100,200,100); 
     scene.add(light2); 

     // Load in the mesh and add it to the scene. 
     var loader = new THREE.JSONLoader(); 
     loader.load("tree-land.js", function(geometry, materials){ 
     var material = new THREE.MeshFaceMaterial(materials); 
     mesh = new THREE.Mesh(geometry, material); 
     scene.add(mesh); 

     }); 

     // Add OrbitControls so that we can pan around with the mouse. 
     controls = new THREE.OrbitControls(camera, renderer.domElement); 

    } 


    // Renders the scene and updates the render as needed. 
    function animate() { 


     requestAnimationFrame(animate); 

     // Render the scene. 
     renderer.render(scene, camera); 
     controls.update(); 

    } 

    </script> 

</body> 
</html> 

回答

0

你聲明的目變量是一個Object3D,可以使用所有的方法和屬性,如文檔中看到被操縱:http://threejs.org/docs/#Reference/Core/Object3D

它看起來像對JSONLoader.load的調用通過回調返回單個幾何圖形和材質,因此似乎不支持在單個調用中加載多個文件或在單個文件中加載多個幾何圖形。您可能想要查看其他一些裝載機。我已成功使用ColladaLoader(不在文檔中)。攪拌機也輸出到Collada。代碼位於存儲庫的examples/js/loaders中。