在Three.js里面，可以使用視頻作為貼圖芦缰，這樣就可以制作貼圖動(dòng)畫了。
但是枫慷，那僅僅是圖片在變化让蕾，我們是感受不到任何的3D感的。幸好Three.js提供了一個(gè)屬性——displacementMap （移位貼圖）或听。
首先探孝，準(zhǔn)備一個(gè)視屏：
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> <!-- 導(dǎo)入 Three.js 庫， 文件是直接從 learning-three.js-third 中拷貝過來的 -->
<script src="./TrackballControls.js"></script> <!-- 方便使用攝像機(jī) -->
<script src="./util.js"></script>
<style>
body { /* 移除滾動(dòng)條 */
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> <!-- 導(dǎo)入視頻 -->
<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); // 創(chuàng)建光源顿颅，否則會(huì)看不見平面
scene.add(ambientLight);
let video = document.getElementById('displacementMap'); // 導(dǎo)入視頻
let texture = new THREE.VideoTexture(video); // 創(chuàng)建貼圖
texture.minFilter = THREE.LinearFilter; // 因?yàn)椴皇?2 的次方，所以要設(shè)置一些其他的參數(shù)
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, // 把移位比例調(diào)大足丢，否則會(huì)很不明顯
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>
之后粱腻，就可以看看運(yùn)行結(jié)果了：
image
看，那一些花斩跌、草绍些、和河流都有立體感了，以后想要立體感的時(shí)候就這樣做就可以了耀鸦！
