Three.js(四)——动画与相机

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 >>

动画

想要立方体实现绕y轴旋转以及其他动画的效果，有以下几种写法：

简单写法

// 渲染循环
function render() {
// 执行渲染操作
    renderer.render(scene, camera);
    // 每次绕y轴旋转0.01弧度
    cube.rotateY(0.01);
    // 请求再次执行渲染函数render，渲染下一帧
    requestAnimationFrame(render);
}
render();

一般写法

// Time 上次执行结束的时间
let time = Date.now();

// Animations  动画
const tick = () => {
    // Time 当前时间
    const currentTtime = Date.now();
    const deltaTime = currentTtime - time;
    time = currentTtime;

    // Update objects
    // cube.position.x += 0.01;
    // 立方体绕y轴旋转(0.001*时间差)度
    cube.rotation.y += 0.001 * deltaTime;

    // Render
    renderer.render(scene, camera);
    window.requestAnimationFrame(tick);
}
tick();

优化写法

// Clock
const clock = new THREE.Clock();
// Animations
const tick = () => {
    // Clock
    const elapsedTime = clock.getElapsedTime();

    // 相机移动
    camera.position.y = Math.sin(elapsedTime);
    camera.position.x = Math.cos(elapsedTime);
    camera.lookAt(cube.position)

    // Render
    renderer.render(scene, camera);
    window.requestAnimationFrame(tick);
}
tick();

Clock补充

该对象用于跟踪时间。如果performance.now可用，则 Clock 对象通过该方法实现，否则回落到使用略欠精准的来实现。

getElapsedTime方法

获取自时钟启动后的秒数，同时将 .oldTime 设置为当前时间。 如果 .autoStart 设置为 true 且时钟并未运行，则该方法同时启动时钟。

Camera 相机

PerspectiveCamera 透视相机

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 2000);

OrthographicCamera 正交相机

// 六个参数分别为：上下左右近远
const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 1, 2000);

透视相机和正交相机的区别就是可视体的设置方法不同：
透视相机的可视体是一个四锥体，而正交相机是一个长方体；
透视相机由四锥体投影到一个平面时，相同大小的网格离上顶面越近投影到far横截面自然更大，这个原理类似于手电光投影到墙面；
正交相机用长方体进行投影的话，同样大小的网格无论位于矩形的哪一个位置，其投影到far横截面的大小总是一样的，类似于平行光投影到墙面。
透视相机可视体如下：

正交相机可视体如下：