試圖在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中爲可移動立方體創建邊界

回答

相關問題