2014-02-20 31 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中。