在Three.js里面，可以使用视频作为贴图，这样就可以制作贴图动画了。
但是，那仅仅是图片在变化，我们是感受不到任何的3D感的。幸好Three.js提供了一个属性——displacementMap （移位贴图）。
首先，准备一个视屏：
image
然后我们就开始写代码了：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>codes 1 -- video Displacement map 视屏移位贴图</title>
<script src="./three.js"></script> <!-- 导入 Three.js 库， 文件是直接从 learning-three.js-third 中拷贝过来的 -->
<script src="./TrackballControls.js"></script> <!-- 方便使用摄像机 -->
<script src="./util.js"></script>
<style>
body { /* 移除滚动条 */
margin: 0;
overflow: hidden;
}
#displacementMap {
position: absolute;
left: 15px;
top: 15px;
}
</style>
</head>
<body>
<video
src="../textures/Big_Buck_Bunny_small.ogv"
controls="true"
autoplay="true"
id="displacementMap"
></video> <!-- 导入视频 -->
<div id="webgl-output"></div>
<script>
// 初始化场景
let scene = new THREE.Scene;
let camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer;
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0); // 黑色，和 0x000000 一样
let axesHelper = new THREE.AxesHelper(20);
scene.add(axesHelper);
let ambientLight = new THREE.AmbientLight(0xffffff); // 创建光源，否则会看不见平面
scene.add(ambientLight);
let video = document.getElementById('displacementMap'); // 导入视频
let texture = new THREE.VideoTexture(video); // 创建贴图
texture.minFilter = THREE.LinearFilter; // 因为不是 2 的次方，所以要设置一些其他的参数
texture.magFilter = THREE.LinearFilter;
texture.format = THREE.RGBFormat;
let planeGeometry = new THREE.PlaneGeometry(24, 13.4, 240, 134); // 此视频的长宽：240px * 134px
let planeMaterial = new THREE.MeshStandardMaterial({
roughness: 1,
metalness: 0,
displacementMap: texture, // 使用移位贴图
displacementScale: 4, // 把移位比例调大，否则会很不明显
map: texture, // 把图片也贴到模型贴图上
color: 0xffffff
});
let plane = new THREE.Mesh(planeGeometry, planeMaterial);
scene.add(plane);
document.getElementById('webgl-output').appendChild(renderer.domElement);
camera.position.set(0, 0, 35);
camera.lookAt(scene.position);
let tc = initTrackballControls(camera, renderer);
render();
function render() {
tc.update();
texture.update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
</script>
</body>
</html>
之后，就可以看看运行结果了：
image
看，那一些花、草、和河流都有立体感了，以后想要立体感的时候就这样做就可以了！
