试图在three.js中为可移动立方体创建边界

我正在尝试创建一个简单的应用程序，可以将立方体向左或向右移动。我已经弄清楚了这一部分。现在我正在努力使立方体不能离开飞机。最简单的方法是什么？试图在three.js中为可移动立方体创建边界

下面是我目前的代码。

<html> 
    <head> 
     <title>Time Car</title> 
     <style> 
      body { 
       width: 100%; 
       height: 100%; 
       margin: 0; 
       padding 0; 
      } 
     </style> 
    </head> 

    <body> 
     <script src="js/three.min.js"></script> 
     <script src="js/Detector.js"></script> 
     <script> 
      var scene, camera, renderer, object, raycaster, board1, board2, board3, board4; 
      var vy = 0, 
       vx = 0, 
       direction = "", 
       gravity = 0.3; 


      function init() { 

       if (!Detector.webgl) Detector.addGetWebGLMessage(); 

       scene = new THREE.Scene(); 

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

       renderer = new THREE.WebGLRenderer({ 
        antialias: true 
       }); 
       renderer.setSize(window.innerWidth, window.innerHeight); 
       renderer.setClearColor(0xCCFFFF); 

       document.body.appendChild(renderer.domElement); 

       var light = new THREE.DirectionalLight(0xffffff, 2); 
       light.position.set(1, 1, 1).normalize(); 
       scene.add(light); 

       var light = new THREE.DirectionalLight(0xffffff); 
       light.position.set(-1, -1, -1).normalize(); 
       scene.add(light); 

       var geometry = new THREE.BoxGeometry(20, 10, 10); 
       object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ 
        color: 0x3333FF 
       })); 
       scene.add(object); 

       var geometry = new THREE.BoxGeometry(80, 160, 10); 
       board1 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ 
        color: 0xCC0000 

       })); 
       board1.position.set(0, 0, -200); 
       scene.add(board1); 

       var geometry = new THREE.BoxGeometry(80, 160, 10); 
       board2 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ 
        color: 0xCC0000 

       })); 
       board2.position.set(400, 0, -200); 
       scene.add(board2); 

       var geometry = new THREE.BoxGeometry(80, 160, 10); 
       board3 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ 
        color: 0xCC0000 

       })); 
       board3.position.set(800, 0, -200); 
       scene.add(board3); 

       var geometry = new THREE.BoxGeometry(80, 160, 10); 
       board4 = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ 
        color: 0xCC0000 

       })); 
       board4.position.set(1200, 0, -200); 
       scene.add(board4); 

       geometry = new THREE.PlaneGeometry(5000, 800, 800); 
       var plane = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ 
        color: 0x99FF66 
       })); 
       plane.rotation.x = -Math.PI/2; 
       plane.position.set(0, -20, 0); 
       scene.add(plane); 

       camera.position.set(0, 100, 100); 

       raycaster = new THREE.Raycaster(); 
       raycaster.ray.direction.set(0, -1, 0); 

       render(); 
      } 

      function render() { 

       requestAnimationFrame(render); 

       if (direction == "left") { 
        vx = -2; 
       } 
       if (direction == "right") { 
        vx = 2; 
       } 
       object.position.x += vx; 
       vx = vx * 0.95; 

       camera.lookAt(object.position); 
       camera.position.x += (((object.position.x - 20) - camera.position.x)) * 0.03; 

       camera.position.y += (((object.position.y + 50) - camera.position.y)); 

       renderer.render(scene, camera); 
      } 

      window.addEventListener('keydown', function (e) { 
       switch (e.keyCode) { 
       case 65: //left 
        direction = "left"; 
        break; 

        break; 
       case 68: //right 
        direction = "right"; 
        break; 
       }; 
      }, false); 
      window.addEventListener('keyup', function (e) { 
       switch (e.keyCode) { 
       case 65: //left 
        direction = ""; 
        break; 
       case 68: //right 
        direction = ""; 
        break; 
       }; 
      }, false); 

      init(); 
     </script> 
    </body> 
</html>

来源

2016-11-06 Sulfater

我试图重新创建，但不能运行代码没有你的Detector.js文件。 –

如果我说得对。您设置为

geometry = new THREE.PlaneGeometry(5000, 800, 800); 
... 
plane.position.set(0, -20, 0);

在这里，你可以计算它的边框

plane.geometry.computeBoundingBox();

其沿x轴的大小为5000，你不就沿着这条轴平移，所以plane.geometry.boundingBox.min.x是飞机-2500 ，plane.geometry.boundingBox.max.x是2500.然后在你的动画循环中，你可以检查object的位置。这样的事情

object.position.x += vx; 
var objHalfWidth = object.geometry.parameters.width/2; 
if (object.position.x + objHalfWidth >= plane.geometry.boundingBox.max.x){ 
    object.position.x = plane.geometry.boundingBox.max.x - objHalfWidth; 
} 
if (object.position.x - objHalfWidth <= plane.geometry.boundingBox.min.x){ 
    object.position.x = plane.geometry.boundingBox.min.x + objHalfWidth; 
}

来源

2016-11-07 07:36:52 prisoner849

你能为此添加一个jsfiddle吗？ –

试图在three.js中为可移动立方体创建边界

回答

相关问题