2017-03-17 1 views
0

時間の経過とともに位置と長さが変更される破線が作成されました。その位置を更新するには、そのジオメトリオブジェクトの頂点を調整しています。線が長くなるか短くなる場合を除いて、線の長さに関係なく、絶対単位で定義されているにもかかわらず、ダッシュも長くか短くなります。私はすでに初期化にgeometry.computeLineDistances()を呼び出していますLineDashedMaterial - 線の長さを変更するときに同じ長さにします。

は(私はすべての仕事に威勢を得るためにこれをしなければならない)、と私は、ループをレンダリング私は単純にすべての中でこれを呼び出した場合、彼らは右のスケールに保つだろうと予想、それ動作しません。

行の長さが変わるので、ダッシュを固定長に保つためにできることはありますか? https://jsfiddle.net/fyr519L8/

var camera, scene, renderer, geometry, material, mesh; 

init(); 
animate(); 

function init() { 
    scene = new THREE.Scene(); 

    camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 1, 10000); 
    camera.position.set(0, 30, 0); 
    camera.lookAt(scene.position); 
    scene.add(camera); 

    geometry = new THREE.Geometry(); 
    geometry.vertices.push(
     new THREE.Vector3(0, 0, 0), 
     new THREE.Vector3(0, 0, 15)); 
    geometry.computeLineDistances(); 

    material = new THREE.LineDashedMaterial({ 
     color: 0x000000, 
     dashSize: 1, 
     gapSize: 1, 
     linewidth: 1 
    }); 

    mesh = new THREE.Line(geometry, material); 
    scene.add(mesh); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 

    document.body.appendChild(renderer.domElement); 
} 

function animate() { 
    requestAnimationFrame(animate); 
    render(); 
} 

function render() { 
    geometry.vertices[0].z = Math.sin(Date.now()/1000) * 10; 
    geometry.verticesNeedUpdate = true; 

    renderer.render(scene, camera); 
} 

答えて

1

私は右のあなたを得た場合、あなたはこれを行うことができます:

function render() { 
    geometry.vertices[0].z = Math.sin(Date.now()/1000) * 10; 
    geometry.verticesNeedUpdate = true; 

    geometry.computeLineDistances(); // re-calculate line distances 
    geometry.lineDistancesNeedUpdate = true; 

    renderer.render(scene, camera); 
} 
+0

パーフェクト、おかげでここ

は、問題を示してjsfiddle(以下コード)です!フィドルが更新されました:https://jsfiddle.net/fyr519L8/1/ – user3432422

+0

ようこそ) – prisoner849

関連する問題