Question

我是three.js的新手，我有一个基本的搅拌器场景，有2个不同的网格，我也有名字。我设法将网格导入三个但我想知道如何引用和操作每个网格？如果2个网格在同一个文件中，或者我应该加载mesh1.js，mesh2.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>

Answer 1

您声明的网格变量是一个Object3D，可以使用文档中所示的所有方法和属性进行操作：http://threejs.org/docs/#Reference/Core/Object3D

看起来对JSONLoader.load的调用通过回调返回单个几何和材质，因此似乎不支持在单个调用中加载多个文件或在单个文件中加载多个几何。您可能希望为此目的查看其他一些加载器。我已经成功使用了ColladaLoader（不在文档中）。 Blender也出口到Collada。代码位于存储库的examples / js / loaders中。

三个js - 在导入的混合器场景中引用单个网格

1 个答案: