首页 > 解决方案 > 三.js TubeBufferGeometry 相机动画位置变化

问题描述

我正在尝试更改将用于相机动画的 TubeBufferGeometry.parameters.path 的位置/平移动态 (均基于此示例:webgl_geometry_extrude_splines

到目前为止,这是我的代码的完整代码:Link to codesandbox with full code

代码的重要部分:

function init(){
    // initial scene render etc. for full code take a look at codesanbox

    // tube
    var extrudePath = new Curves.GrannyKnot();

    tubeGeometry = new THREE.TubeBufferGeometry( extrudePath, 50, 2, 1, true );
    tubeGeometry.dynamic = true;

//unsuccessful approach to change the parameters of position
    tubeGeometry.translate(100, 0, 0)
    tubeGeometry.attributes.position.needsUpdate = true;
}

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

function render() {
    // animate camera along spline
    var time = Date.now();
    var looptime = 20 * 1000;
    var t = ( time % looptime ) / looptime;

    var pos = tubeGeometry.parameters.path.getPointAt( t );
    pos.multiplyScalar( 1 );

    splineCamera.position.copy( pos );
    renderer.render( scene, splineCamera );
}

结果是没有让我翻译相机在默认位置绕着 GrannyKnot 曲线移动。

我期望的是在某个方向(例如位置 X + 100)上动态更改TubeBufferGeometry.parameters.path的位置/平移,这会影响我的相机移动

编辑 我刚刚意识到我可以通过添加来改变相机

function render() {
    // animate camera along spline
    var time = Date.now();
    var looptime = 20 * 1000;
    var t = ( time % looptime ) / looptime;

    var pos = tubeGeometry.parameters.path.getPointAt( t );
    pos.x += 100; //<----this line added
    pos.multiplyScalar( 1 );

    splineCamera.position.copy( pos );
    renderer.render( scene, splineCamera );
}

但是如果有人会告诉我如何改变TubeBufferGeometry.parameters.path而不改变明确的 pos.x 就像上面的代码一样。我会很高兴的。

标签: javascriptthree.jsbuffer-geometry

解决方案


推荐阅读