如何在 three.js 中绘制两个朝我移动的矩形？

Question

我正在使用 three.js 绘制几个 3D 对象。

目前我画了一个从左边向我移动的矩形：

body { margin: 0; }
   canvas { width: 100%; height: 100% }

  <title> </title>
 <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>
  <script src="js/three.min.js"></script>
  <script>
            function five(x){
                x_rounded = 5 * Math.round(x/5);
                return(x_rounded);
            }
            var transparency = {0: "00", 5: "0D", 10: "1A", 15: "26", 20: "33", 25: "40", 30: "4D", 35: "59", 40: "66", 45: "73", 50: "80", 55: "8C", 60: "99", 65: "A6", 70: "B3", 75: "BF", 80: "CC", 85: "D9", 90: "E6", 95: "F2", 100: "FF"};
   var scene = new THREE.Scene();
            // var scene2 = new THREE.Scene();
   var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

   var renderer = new THREE.WebGLRenderer();
            var raycaster = new THREE.Raycaster();
            var mouse = new THREE.Vector2();
            mouse.x = 0;
            mouse.y = 0;
            var speed = 0.1;
   renderer.setSize( window.innerWidth, window.innerHeight );
   document.body.appendChild( renderer.domElement );

   var shapes = [];
            camera.position.x = 4;
            shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
            camera.position.x = 6;
            shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
      camera.position.z = 25;
            trans = transparency[five(camera.position.z)];
   var material = new THREE.MeshBasicMaterial( { color: '#'+trans+'#F5F5F5' } );
   var cubes = [];
            for(var i = 0;i<shapes.length;i++){
                cube = new THREE.Mesh( shapes[i], material )
                cubes.push(cube);
      }
            
            scene.add(cubes[0]);
            scene.add(cubes[1]);

                camera.position.x = 4;
   var render = function () {
    requestAnimationFrame( render );

                camera.position.z -= speed;
                trans = transparency[five(camera.position.z)];
                col = '#'+trans+'#F5F5F5';
                material = new THREE.MeshBasicMaterial( { color:  col} );
                scene = new THREE.Scene();
                scene.add(new THREE.Mesh(shapes[0], material));
                if(camera.position.z <= 0){
                    camera.position.z = 25;
                    // shapes.push(new THREE.BoxGeometry( 1, 3, 0.75 ));
                    // cubes.push(new THREE.Mesh(shapes[shapes.length-1], material));
                    // scene.add(cubes[cubes.length-1]);
                }
    // cube.rotation.x += 0.05;
    // cube.rotation.y += 0.05;
    //             cube.rotation.z += 0.05;

    renderer.render(scene, camera);
   };

   render();

function onMouseMove( event ) {

    // calculate mouse position in normalized device coordinates
 // (-1 to +1) for both components

 mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1
 mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1
}



window.addEventListener( 'mousemove', onMouseMove, false );

window.requestAnimationFrame(render);
  </script>
 </body>

但是，我现在想画另一个从右边向我移动的矩形（左边那个的镜像）。我尝试添加一个新矩形并更改 camera.position.y 和 .x，但没有任何效果。另外，每次矩形循环时，我都希望它从背景淡入前景。这在 three.js 中可能吗？

Answer 1

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometries = [];
geometries.push(new THREE.BoxGeometry(1, 3, 0.75));
geometries.push(new THREE.BoxGeometry(1, 3, 0.75));

var material = new THREE.MeshNormalMaterial({
  color: 0xff0000
});
var meshes = [];
meshes.push(new THREE.Mesh(geometries[0], material));
meshes.push(new THREE.Mesh(geometries[1], material));

meshes[0].position.set(2, 0, -10);
scene.add(meshes[0]);

meshes[1].position.set(-2, 0, -15);
scene.add(meshes[1]);

var time = new Date();
function render() {
  // delta in ms
  var newTime = new Date();
  var delta = newTime - time;
  time = newTime;

  // move the boxes
  var mult = 0.005;
  meshes[1].position.z += delta * mult;
  meshes[0].position.z += delta * mult;

  renderer.render(scene, camera);

  requestAnimationFrame(render);
};

requestAnimationFrame(render);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js"></script>

我强烈建议您先阅读文档，因为您的代码一点也不好，您首先需要了解一些小事实：

要渲染事物，您需要一个渲染器、一个相机和一些要渲染的对象
要渲染的对象必须存储在一个scene graph中，THREE.Scene将容纳所有要渲染的对象
with renderer.render(scene, camera) 三将映射我们的所有 3d 对象场景到 2d 平面（这是我们看到的 a.k.a 屏幕），在计算表示后用 THREE.WebGLRenderer

在上面的示例中，我没有移动相机，而是移动了对象（我假设这就是你想要的），首先要注意的是三使用右手法则，默认情况下创建的任何对象（以及camera) 位于原点，相机是一个特殊的对象，因为它还有一个向量指向相机正在看的方向（它最初看向 -z）

对于这个简单的例子，我们不需要移动相机，将物体从相机移开怎么样？我们可以通过设置要远离相机的对象的 z 坐标来做到这一点（这将是单位 -z 向量的任意倍数），同样因为你想要一个对象到右边和左边如何改变它的 x 坐标，左边的对象需要有单位 -x 向量的 x 坐标倍数，右边的对象是单位 -x 向量的倍数单位 x 向量。最后在游戏循环中，我们只需要将它们移向相机，即改变它的 z 坐标。

请确保阅读一些关于 3d 数学的内容，Udacity's course 是一个很好的起点 :)

如何在 three.js 中绘制两个朝我移动的矩形？

How do I draw two rectangles moving towards me in three.js?

html

javascript

css

jquery

three.js