javascript - 在WebGL中设置相机位置从开始到结束的动画

标签 javascript webgl

我有相机的当前位置和最终位置(聚焦于某个元素)。我想制作一个从开始到结束的相机动画。

谢谢。

最佳答案

一个想法是创建一个 unit vector它表示从相机到物体的方向。然后使用该值及时更改相机的矢量位置:

var speed = 4;
var p = camera.position;
var dt = p.clone();
dt.normalize();
dt.multiplyScalar(speed);

然后在渲染函数中:

function render () {
    if (camera.position.length() > 0) {
        camera.position.sub(dt);
    }
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

https://jsfiddle.net/dc3La82y/

关于javascript - 在WebGL中设置相机位置从开始到结束的动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35289714/

相关文章:

css - 带有 glsl 着色器的 Canvas 在某些 css 变换比例下中断

javascript - WebGL 片段着色器构造函数错误 - 参数太多

opengl-es - 带有柏林噪声的 GLSL 阴影

javascript - 如何使用 ReactJs 中的键从父组件打开子组件模式

javascript - 你如何使用 webpack-dev-server API 和 Gulp 的内联模式

javascript - WebGL 基本着色器困惑

javascript - 我如何使用 WebGL drawElements 偏移量?

javascript - 如何使用 Javascript 计算选定字段的总计?

javascript - 使用 splice 从数组中删除项目

javascript - 如何从列表项文本中删除日期