Three.CurvePath和自定義標記

我正在使用Three.JS創建遊戲，我已經建模併成功導入了在Sketchup中創建的城市。我現在需要動態添加一些「跟隨我」箭頭（按照下面模型中的黃色箭頭）。我相信我可能需要使用Three.CurvePath來實現這一點，但我不確定這是否是最好的方法 - 是否需要手動建模路徑並計算每個箭頭對象的切線，以便它們自然地指向角點（如每個模型左轉）？Three.CurvePath和自定義標記

enter image description here

希望這是有道理的！

來源

2013-04-02 Sidebp

相關：http://stackoverflow.com/questions基於形狀例如JS/11179327/orient-objects-rotation-to-a-spline-point-tangent-in-three-js/11181366＃11181366 – WestLangley

我可能有一個解決方案。有一段時間沒有使用three.js，所以不確定這是否是最優雅的解決方案。我開始與Shapes Example，因爲它顯示：

如何在程序建立一個路徑（使用也處理曲線命令）
如何從這樣的路徑

所以我提取點VE分裂問題分成：

生成路徑
遍歷路徑，我nterpolation（位置和旋轉）

生成路徑 我已經重複使用圓角矩形定義，類似於你的屏幕截圖的一部分。

var roundedRectShape = new THREE.Shape(); 

       (function roundedRect(ctx, x, y, width, height, radius){ 

        ctx.moveTo(x, y + radius); 
        ctx.lineTo(x, y + height - radius); 
        ctx.quadraticCurveTo(x, y + height, x + radius, y + height); 
        ctx.lineTo(x + width - radius, y + height) ; 
        ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); 
        ctx.lineTo(x + width, y + radius); 
        ctx.quadraticCurveTo(x + width, y, x + width - radius, y); 
        ctx.lineTo(x + radius, y); 
        ctx.quadraticCurveTo(x, y, x, y + radius); 

       })(roundedRectShape, 0, 0, 200, 200, 20);

你的路可能不是一個圓角矩形，但可用的類型的曲線功能（到quadraticCurveTo，bezierCurveTo，splineThru）是非常有用的。

想到的另一個想法是使用Ruby腳本將路徑座標從Sketchup導出到three.js。無論是從頭開始編寫還是使用現有的腳本。這裏的one 很容易在谷歌上找到。

遍歷路徑

幸運three.js所已經通過路徑的getPoint(t)其中t是一個數從0.0到1.0表示的路徑上遍歷實現此。因此，獲取位置與獲取路徑上的下一個插值位置並不重要。然後，它只是一個使用Math.atan2()得到旋轉事情：

t = (t + s)%1.0;//increment t while maintaining it between 0.0 and 1.0 
       var p = path.getPoint(t);//point at t 
       var pn = path.getPoint((t+s)%1.0);//point at next t iteration 

       if(p != null && pn != null){ 
        //move to current position 
        arrow.position.x = p.x; 
        arrow.position.y = p.y; 
        //get orientation based on next position 
        arrow.rotation.z = Math.atan2(pn.y-p.y,pn.x-p.x); 

       }

總之波紋管是一個基本的例子（使用一個立方體，而不是一個箭頭形狀）來說明產生和三個穿越的路徑。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>path interpolation</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> 
     <style> 
      body { 
       font-family: Monospace; 
       background-color: #f0f0f0; 
       margin: 0px; 
       overflow: hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <canvas id="debug" style="position:absolute; left:100px"></canvas> 

     <script src="../build/three.min.js"></script> 

     <script src="js/libs/stats.min.js"></script> 


     <script> 

      var container, stats; 

      var camera, scene, renderer; 

      var text, plane; 

      var targetRotation = 0; 
      var targetRotationOnMouseDown = 0; 

      var mouseX = 0; 
      var mouseXOnMouseDown = 0; 

      var windowHalfX = window.innerWidth/2; 
      var windowHalfY = window.innerHeight/2; 

      init(); 
      animate(); 

      var t = 0.0;//traversal on path 
      var s = 0.001;//speed of traversal 
      var arrow;//mesh to move/rotate on path 
      var path;//Path object to traverse 

      function init() { 

       container = document.createElement('div'); 
       document.body.appendChild(container); 

       camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000); 
       camera.position.set(0, 150, 500); 

       scene = new THREE.Scene(); 

       parent = new THREE.Object3D(); 
       parent.position.y = 50; 
       scene.add(parent); 

       arrow = new THREE.Mesh(new THREE.CubeGeometry(20,10,10),new THREE.MeshBasicMaterial({color: 0x009900})); 
       parent.add(arrow); 
       //this is helpful as a visual aid but not crucial 
       function addShape(shape, extrudeSettings, color, x, y, z, rx, ry, rz, s) { 

        var points = shape.createPointsGeometry(); 
        var spacedPoints = shape.createSpacedPointsGeometry(50); 

        // transparent line from equidistance sampled points 

        var line = new THREE.Line(spacedPoints, new THREE.LineBasicMaterial({ color: color, opacity: 0.2 })); 
        line.rotation.set(rx, ry, rz); 
        parent.add(line); 

        // equidistance sampled points 

        var pgeo = spacedPoints.clone(); 
        var particles2 = new THREE.ParticleSystem(pgeo, new THREE.ParticleBasicMaterial({ color: color, size: 2, opacity: 0.5 })); 
        particles2.rotation.set(rx, ry, rz); 
        parent.add(particles2); 

       } 


       // Rounded rectangle 
       //generating the path and populating it is crucial tough 
       var roundedRectShape = new THREE.Shape(); 

       (function roundedRect(ctx, x, y, width, height, radius){ 

        ctx.moveTo(x, y + radius); 
        ctx.lineTo(x, y + height - radius); 
        ctx.quadraticCurveTo(x, y + height, x + radius, y + height); 
        ctx.lineTo(x + width - radius, y + height) ; 
        ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); 
        ctx.lineTo(x + width, y + radius); 
        ctx.quadraticCurveTo(x + width, y, x + width - radius, y); 
        ctx.lineTo(x + radius, y); 
        ctx.quadraticCurveTo(x, y, x, y + radius); 

       })(roundedRectShape, 0, 0, 200, 200, 20); 
       path = roundedRectShape; 

       var extrudeSettings = { amount: 20 }; // bevelSegments: 2, steps: 2 , bevelSegments: 5, bevelSize: 8, bevelThickness:5 
       extrudeSettings.bevelEnabled = true; 
       extrudeSettings.bevelSegments = 2; 
       extrudeSettings.steps = 2; 

       addShape(roundedRectShape, extrudeSettings, 0x000000, -150, 150, 0, 0, 0, 0, 1); 

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

       container.appendChild(renderer.domElement); 

       stats = new Stats(); 
       stats.domElement.style.position = 'absolute'; 
       stats.domElement.style.top = '0px'; 
       container.appendChild(stats.domElement); 

       document.addEventListener('mousedown', onDocumentMouseDown, false); 
       document.addEventListener('touchstart', onDocumentTouchStart, false); 
       document.addEventListener('touchmove', onDocumentTouchMove, false); 

       // 

       window.addEventListener('resize', onWindowResize, false); 

      } 

      function onWindowResize() { 

       windowHalfX = window.innerWidth/2; 
       windowHalfY = window.innerHeight/2; 

       camera.aspect = window.innerWidth/window.innerHeight; 
       camera.updateProjectionMatrix(); 

       renderer.setSize(window.innerWidth, window.innerHeight); 

      } 

      // 

      function onDocumentMouseDown(event) { 

       event.preventDefault(); 

       document.addEventListener('mousemove', onDocumentMouseMove, false); 
       document.addEventListener('mouseup', onDocumentMouseUp, false); 
       document.addEventListener('mouseout', onDocumentMouseOut, false); 

       mouseXOnMouseDown = event.clientX - windowHalfX; 
       targetRotationOnMouseDown = targetRotation; 

      } 

      function onDocumentMouseMove(event) { 

       mouseX = event.clientX - windowHalfX; 

       targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02; 

      } 

      function onDocumentMouseUp(event) { 

       document.removeEventListener('mousemove', onDocumentMouseMove, false); 
       document.removeEventListener('mouseup', onDocumentMouseUp, false); 
       document.removeEventListener('mouseout', onDocumentMouseOut, false); 

      } 

      function onDocumentMouseOut(event) { 

       document.removeEventListener('mousemove', onDocumentMouseMove, false); 
       document.removeEventListener('mouseup', onDocumentMouseUp, false); 
       document.removeEventListener('mouseout', onDocumentMouseOut, false); 

      } 

      function onDocumentTouchStart(event) { 

       if (event.touches.length == 1) { 

        event.preventDefault(); 

        mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX; 
        targetRotationOnMouseDown = targetRotation; 

       } 

      } 

      function onDocumentTouchMove(event) { 

       if (event.touches.length == 1) { 

        event.preventDefault(); 

        mouseX = event.touches[ 0 ].pageX - windowHalfX; 
        targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05; 

       } 

      } 

      // 

      function animate() { 

       requestAnimationFrame(animate); 

       render(); 
       stats.update(); 

      } 

      function render() { 
       t = (t + s)%1.0;//increment t while maintaining it between 0.0 and 1.0 
       var p = path.getPoint(t);//point at t 
       var pn = path.getPoint((t+s)%1.0);//point at next t iteration 

       if(p != null && pn != null){ 
        //move to current position 
        arrow.position.x = p.x; 
        arrow.position.y = p.y; 
        //get orientation based on next position 
        arrow.rotation.z = Math.atan2(pn.y-p.y,pn.x-p.x); 

       } 

       parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05; 
       renderer.render(scene, camera); 

      } 

     </script> 

    </body> 
</html>

想我會添加一個可運行的代碼片斷直此頁上：

  var container; 
 

 
      var camera, scene, renderer; 
 

 
      var text, plane; 
 

 
      var targetRotation = 0; 
 
      var targetRotationOnMouseDown = 0; 
 

 
      var mouseX = 0; 
 
      var mouseXOnMouseDown = 0; 
 

 
      var windowHalfX = window.innerWidth/2; 
 
      var windowHalfY = window.innerHeight/2; 
 

 
      init(); 
 
      animate(); 
 

 
      var t = 0.0;//traversal on path 
 
      var s = 0.001;//speed of traversal 
 
      var arrows;//mesh to move/rotate on path 
 
      var path;//Path object to traverse 
 

 
      function init() { 
 

 
       container = document.createElement('div'); 
 
       document.body.appendChild(container); 
 

 
       camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 1000); 
 
       camera.position.set(0, 150, 500); 
 

 
       scene = new THREE.Scene(); 
 

 
       parent = new THREE.Object3D(); 
 
       parent.position.y = 50; 
 
       scene.add(parent); 
 
       
 
       arrows = []; 
 
       for(var i = 0 ; i < 50; i++){ 
 
       arrows[i] = new THREE.Mesh(new THREE.CubeGeometry(10,5,5),new THREE.MeshBasicMaterial({color: 0x009900})); 
 
       parent.add(arrows[i]); 
 
       } 
 
       //this is helpful as a visual aid but not crucial 
 
       function addShape(shape, extrudeSettings, color, x, y, z, rx, ry, rz, s) { 
 

 
        var points = shape.createPointsGeometry(); 
 
        var spacedPoints = shape.createSpacedPointsGeometry(50); 
 

 
        // transparent line from equidistance sampled points 
 

 
        var line = new THREE.Line(spacedPoints, new THREE.LineBasicMaterial({ color: color, opacity: 0.2 })); 
 
        line.rotation.set(rx, ry, rz); 
 
        parent.add(line); 
 

 
        // equidistance sampled points 
 

 
        var pgeo = spacedPoints.clone(); 
 
        var particles2 = new THREE.ParticleSystem(pgeo, new THREE.ParticleBasicMaterial({ color: color, size: 2, opacity: 0.5 })); 
 
        particles2.rotation.set(rx, ry, rz); 
 
        parent.add(particles2); 
 

 
       } 
 

 

 
       // Rounded rectangle 
 
       //generating the path and populating it is crucial tough 
 
       var roundedRectShape = new THREE.Shape(); 
 

 
       (function roundedRect(ctx, x, y, width, height, radius){ 
 

 
        ctx.moveTo(x, y + radius); 
 
        ctx.lineTo(x, y + height - radius); 
 
        ctx.quadraticCurveTo(x, y + height, x + radius, y + height); 
 
        ctx.lineTo(x + width - radius, y + height) ; 
 
        ctx.quadraticCurveTo(x + width, y + height, x + width, y + height - radius); 
 
        ctx.lineTo(x + width, y + radius); 
 
        ctx.quadraticCurveTo(x + width, y, x + width - radius, y); 
 
        ctx.lineTo(x + radius, y); 
 
        ctx.quadraticCurveTo(x, y, x, y + radius); 
 

 
       })(roundedRectShape, 0, 0, 200, 200, 20); 
 
       path = roundedRectShape; 
 

 
       var extrudeSettings = { amount: 20 }; // bevelSegments: 2, steps: 2 , bevelSegments: 5, bevelSize: 8, bevelThickness:5 
 
       extrudeSettings.bevelEnabled = true; 
 
       extrudeSettings.bevelSegments = 2; 
 
       extrudeSettings.steps = 2; 
 

 
       addShape(roundedRectShape, extrudeSettings, 0x000000, -150, 150, 0, 0, 0, 0, 1); 
 

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

 
       container.appendChild(renderer.domElement); 
 

 
       
 

 
       document.addEventListener('mousedown', onDocumentMouseDown, false); 
 
       document.addEventListener('touchstart', onDocumentTouchStart, false); 
 
       document.addEventListener('touchmove', onDocumentTouchMove, false); 
 

 
       // 
 

 
       window.addEventListener('resize', onWindowResize, false); 
 

 
      } 
 

 
      function onWindowResize() { 
 

 
       windowHalfX = window.innerWidth/2; 
 
       windowHalfY = window.innerHeight/2; 
 

 
       camera.aspect = window.innerWidth/window.innerHeight; 
 
       camera.updateProjectionMatrix(); 
 

 
       renderer.setSize(window.innerWidth, window.innerHeight); 
 

 
      } 
 

 
      // 
 

 
      function onDocumentMouseDown(event) { 
 

 
       event.preventDefault(); 
 

 
       document.addEventListener('mousemove', onDocumentMouseMove, false); 
 
       document.addEventListener('mouseup', onDocumentMouseUp, false); 
 
       document.addEventListener('mouseout', onDocumentMouseOut, false); 
 

 
       mouseXOnMouseDown = event.clientX - windowHalfX; 
 
       targetRotationOnMouseDown = targetRotation; 
 

 
      } 
 

 
      function onDocumentMouseMove(event) { 
 

 
       mouseX = event.clientX - windowHalfX; 
 

 
       targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.02; 
 

 
      } 
 

 
      function onDocumentMouseUp(event) { 
 

 
       document.removeEventListener('mousemove', onDocumentMouseMove, false); 
 
       document.removeEventListener('mouseup', onDocumentMouseUp, false); 
 
       document.removeEventListener('mouseout', onDocumentMouseOut, false); 
 

 
      } 
 

 
      function onDocumentMouseOut(event) { 
 

 
       document.removeEventListener('mousemove', onDocumentMouseMove, false); 
 
       document.removeEventListener('mouseup', onDocumentMouseUp, false); 
 
       document.removeEventListener('mouseout', onDocumentMouseOut, false); 
 

 
      } 
 

 
      function onDocumentTouchStart(event) { 
 

 
       if (event.touches.length == 1) { 
 

 
        event.preventDefault(); 
 

 
        mouseXOnMouseDown = event.touches[ 0 ].pageX - windowHalfX; 
 
        targetRotationOnMouseDown = targetRotation; 
 

 
       } 
 

 
      } 
 

 
      function onDocumentTouchMove(event) { 
 

 
       if (event.touches.length == 1) { 
 

 
        event.preventDefault(); 
 

 
        mouseX = event.touches[ 0 ].pageX - windowHalfX; 
 
        targetRotation = targetRotationOnMouseDown + (mouseX - mouseXOnMouseDown) * 0.05; 
 

 
       } 
 

 
      } 
 

 
      // 
 

 
      function animate() { 
 

 
       requestAnimationFrame(animate); 
 

 
       render(); 
 
    
 
      } 
 

 
      function render() { 
 
       t = (t + s)%1.0;//increment t while maintaining it between 0.0 and 1.0 - could map mouse x position/window width for fun :) 
 
\t \t \t \t for(var i = 0 ; i < 50; i++){//for each box 
 
\t \t \t \t \t var ti = ((i/50.0)+t)%1.0;//compute the traversval including each box's own offset on the path 
 
\t \t \t \t \t 
 
\t \t \t \t \t var p = path.getPoint(ti);//point at t 
 
\t \t \t \t \t var pn = path.getPoint((ti+s)%1.0);//point at next t iteration 
 
\t \t \t \t 
 
\t \t \t \t \t if(p != null && pn != null){ 
 
\t \t \t \t \t \t //move to current position 
 
\t \t \t \t \t \t arrows[i].position.x = p.x; 
 
\t \t \t \t \t \t arrows[i].position.y = p.y; 
 
\t \t \t \t \t \t //get orientation based on next position 
 
\t \t \t \t \t \t arrows[i].rotation.z = Math.atan2(pn.y-p.y,pn.x-p.x); 
 
\t \t \t \t \t 
 
\t \t \t \t \t } 
 
\t \t \t \t } 
 
       parent.rotation.y += (targetRotation - parent.rotation.y) * 0.05; 
 
       renderer.render(scene, camera); 
 

 
      }

  body { 
 
       font-family: Monospace; 
 
       background-color: #f0f0f0; 
 
       margin: 0px; 
 
       overflow: hidden; 
 
      }

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

來源

2013-04-07 15:23:58

很好的答案。我給你一個upvote，並把你的例子的版本放在jsfiddle中，這樣人們可以看到它運行。 http://jsfiddle.net/crossphire/DAktM/ –

非常透徹的答案 - 謝謝。我可能會忽略一些東西，但是當使用粒子系統時，有什麼辦法可以控制粒子的方向？我希望能夠渲染爲一系列沿着路徑追蹤的箭頭（很像在模型中由箭頭組成的路徑）。在這兩種情況下都接受這個答案，因爲這是一個出色的首發。 – Sidebp

@Sidebp未使用過多的ParticleSystem，但我認爲它可以是動態的（必須有一個樣本），以便更新位置。感謝Crossphire Development的jsfiddle，我創建了一個更新來說明如何在路徑上移動多個對象（無論是自定義網格/粒子/等）：看看[這裏]（http://jsfiddle.net/orgicus/XuUFs/4 /）。關於箭頭形狀，它們可以是'Shape'實例，粒子可以是bilboards/sprites，或者因爲所有東西都在一個平面上，所有東西都可以是2D紋理，可以在canvas元素中生成，也可以是spritesheet。 –

Three.CurvePath和自定義標記

回答

相關問題