ThreeJS入门（十一）相机动画

马黑黑

（一）相机位置动画

现实生活中摄影者或者摄影设备可以绕着拍摄对象绕圈进行拍摄，得到的录像好比被拍摄对象在自转。ThreeJS 可以完成此类拍摄方式而且做的更好，方法是令相机在XYZ相应轴上改变位置，例如，在 XOZ 平面上绕Y轴做圆周运动，只需引入一个角度递增机制、再简单地通过正余弦函数计算出 position.x 和 position.z 坐标值，如此便可驱动相机绕着拍摄对象旋转。以下是完整实现代码：

<div style="margin: 10px; position: absolute;">点击页面可暂停/继续动画</div>
<script type="module">
	import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';

	var scene = new THREE.Scene;
	var clock = new THREE.Clock();
	var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 0, 5);
	var renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	// 绘制拍摄对象 ：一个立方体
	// 先定义颜色colors和立方体六个面faces
	var colors = ['red', 'orange', 'purple', 'green', 'cyan', 'blue'], faces = [];
	var geometry = new THREE.BoxGeometry(); // 创建立方体
	// 再依据颜色数组构建六个面并储存到faces数组中
	colors.forEach(color => faces.push( new THREE.MeshBasicMaterial({ color: color })));
	var mesh = new THREE.Mesh(geometry, faces); // 创建立方体实例
	// 立方体在XYZ轴上的初始姿势
	mesh.rotateX(Math.PI / 4); // X轴
	mesh.rotateY(Math.PI / 1.5); // Y轴
	mesh.rotateZ(Math.PI / 3); // Z轴

	scene.add(mesh); // 立方体加入到场景

	var angle = 0; // 相机初始角度

	// 创建相机动画
	var animate = () => {
		requestAnimationFrame(animate); // 动画循环
		var delta = clock.getDelta(); // 获取动画时钟上下帧时间差
		angle = (angle + delta) % 360; // 角度由时间差驱动并取360的余数
		camera.position.x = 5 * Math.sin(angle);
		camera.position.z = 5 * Math.cos(angle); // 相机在Z轴上的位置
		camera.lookAt(0,0,0); // 相机始终聚焦场景中央
		renderer.render(scene, camera); // 渲染效果
	};

	window.onresize = () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}

	document.onclick = () => clock.running ? clock.stop() : clock.start();
	
	animate();
</script>
	

运行代码

相机在XYZ轴上的单轴或双轴或三轴位置的动态改变都会得到不同的拍摄效果，但若创建更强大的相机动画，还得借用第三方库，例如 ThreeJS 自己封装的 OrbitControls 模块 ——

（二）相机轨道动画

我们在ThreeJS精灵章节中的一个演示实例使用过相机轨道控制器。需要导入 OrbitControls.js 模块，导入方式需要做额外的结构封装。相机轨道控制器一旦成功导入，我们就可以真正全方位地查看场景的每一个点 —— 实际上是以极大自由度的方式变换相机的位置。下例将演示这一点：

<div style="margin: 10px; position: absolute;">可以手动翻转场景</div>

<!-- 标准化模块系统 ：创建可靠的模块导入结构 -->
<script type="importmap">
{
  "imports": {
    "three": "https://unpkg.ihwx.cn/three@0.176.0/build/three.module.js",
    "three/examples/jsm/": "https://unpkg.ihwx.cn/three@0.176.0/examples/jsm/"
  }
}
</script>

<script type="module">
	import * as THREE from 'three'; // 导入ThreeJS核心库
	import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; // 导入相机轨道控制库

	const scene = new THREE.Scene;
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	camera.position.set(0, 0, 5);
	const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);

	const controls = new OrbitControls(camera, renderer.domElement); // 轨道控制器
	controls.autoRotate = true; // 启用轨道自转

	// 圆球 ：半径0.5，法线网格材质
	const ball = new THREE.Mesh(
		new THREE.SphereGeometry(0.5),
		new THREE.MeshNormalMaterial()
	);

	// 圆盘 ：半径2、16边，法线网格材质（线框化、双面渲染）
	const pan = new THREE.Mesh(
		new THREE.CircleGeometry(2, 16), 
		new THREE.MeshNormalMaterial({ wireframe: true, side: THREE.DoubleSide })
	);

	scene.add(ball, pan); // 图像都加入到场景中

	const animate = () => {
		requestAnimationFrame(animate);
		controls.update(); // 更新轨道控制器令其自转
		renderer.render(scene, camera);
	};

	window.onresize = () => {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		renderer.setSize(window.innerWidth, window.innerHeight);
	}

	animate();
</script>
	

运行代码

相机轨道控制器还可以有更多的操作，相关内容可参阅 相机控件OrbitControls 并可在其上查找 OrbitControls 更多的资料。而相机位置动画，可点击 ThreeJS中文网·相机动画（Sprite） 查看。另外，相机动画还有更多的实现手段，有余力的朋友可以自行扩展。

梦江南

谢谢老师辛苦，学生不才，只能欣赏支持了。

梦江南

祝老师端午节阖家幸福安康！

花飞飞

看到了相机动画的两种运动形态说明~~其实之前都有出现过的
昨天的《Hakim》是第一种，通过改变相机的轴位实现的动态
之前《古域传说》是第二种，通过轨道控制实现的动态。。

花飞飞

在第一个实例中，先设了六个颜色，立体方绘成之后，六个面就能依次着色，这也很神奇呀。。
设七个也只取前六个，只不过一二，三四，五六分别是对立面。。
应该是上下，左右，前后的顺序着色的吧。。

花飞飞

先给立方体一个初始姿态，在时间差的驱动下角度变换，那就会不停的重绘再重绘，无限循环就看到动画了。
想到之前的画布画时钟好象也是这个道理，不停的擦画。。显示不同的时间
联系起来比较好理解

花飞飞

相机轨道控制，更形象一些。
拍电影的那些人，在演员周围架个轨道，以完成更快的人工难实现的角度变换。。
这个是有个专用的相机轨道JS库来辅助完成的，象是给相机装了个专用外挂似的。

花飞飞

相机轨道控制动画好象和适用于组合图形，或者是多个克隆图形，

就是整个场景在转。。无场景里放了多少个元素，都一起动
当然自身转动可以同时进行。。

马黑黑

花飞飞 发表于 2025-5-31 17:03
相机轨道控制动画好象和适用于组合图形，或者是多个克隆图形，

就是整个场景在转。。无场景里放了多少个 ...

精灵不受它的影响

马黑黑

花飞飞 发表于 2025-5-31 16:57
相机轨道控制，更形象一些。
拍电影的那些人，在演员周围架个轨道，以完成更快的人工难实现的角度变换。。 ...

是酱紫的

马黑黑

花飞飞 发表于 2025-5-31 16:53
先给立方体一个初始姿态，在时间差的驱动下角度变换，那就会不停的重绘再重绘，无限循环就看到动画了。{:4_ ...

ThreeJS 就是基于 JS canvas 弄的模块，加上 WebGL/GPU

马黑黑

花飞飞 发表于 2025-5-31 16:49
在第一个实例中，先设了六个颜色，立体方绘成之后，六个面就能依次着色，这也很神奇呀。。
设七个也只取前 ...

多面体有多少个面就用多少个预设的颜色

马黑黑

花飞飞 发表于 2025-5-31 16:43
看到了相机动画的两种运动形态说明~~其实之前都有出现过的
昨天的《Hakim》是第一种，通过改变相机的轴位 ...

上一个讲义第一个示例有用到的

马黑黑

梦江南 发表于 2025-5-31 16:00
祝老师端午节阖家幸福安康！

杨帆

谢谢马老师经典讲授，祝双节愉快

花飞飞

马黑黑 发表于 2025-5-31 17:25
精灵不受它的影响

精灵厉害，有法术护体。。

花飞飞

马黑黑 发表于 2025-5-31 17:25
是酱紫的

猜准了还是开心的

花飞飞

马黑黑 发表于 2025-5-31 17:26
ThreeJS 就是基于 JS canvas 弄的模块，加上 WebGL/GPU

啊，前身也是画布。。那就算早认识了。

花飞飞

马黑黑 发表于 2025-5-31 17:27
多面体有多少个面就用多少个预设的颜色

难道8面12面都可以这样一个个设下来。。艾玛，那可好看了

花飞飞

马黑黑 发表于 2025-5-31 17:28
上一个讲义第一个示例有用到的

嗯哪，第一个示例比第二个示例用得多。。只要动的就碰上它