三个 js - 在导入的搅拌机场景中引用单个网格答案

【问题标题】：Three js - Referencing individual meshes in imported blender scene三个 js - 在导入的搅拌机场景中引用单个网格
【发布时间】：2014-03-22 04:46:34
【问题描述】：

我是 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>

【问题讨论】：

标签： three.js blender

【解决方案1】：

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

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

【讨论】：