带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(13)

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
- const texture = new THREE.TextureLoader().load('textures/demol.gif');
+ const textures = [
+ 'https://img.alicdn.com/imgextra/i3/O1CN01LsO1Bk20QbKpFTUQr_!!6000000006844-0-tps-1500-1500.jpg',
+ 'https://img.alicdn.com/imgextra/i3/O1CN01uTWCLc1XOCOuA92H0_!!6000000002913-0-tps-1500-1500.jpg',
+ 'https://img.alicdn.com/imgextra/i4/O1CN016lU3YJ1JdrJuFTcWt_!!6000000001052-0-tps-1500-1500.jpg',
+ 'https://img.alicdn.com/imgextra/i2/O1CN01nYe2Mn1ohkmBVyKpp_!!6000000005257-0-tps-1500-1500.jpg',
+ 'https://img.alicdn.com/imgextra/i4/O1CN014TNffn1nlaTfA98Fg_!!6000000005130-0-tps-1500-1500.jpg',
+ 'https://img.alicdn.com/imgextra/i1/O1CN01sS5m781ya6JgLSaVk_!!6000000006594-0-tps-1500-1500.jpg',
+ ];
- const material = new THREE.MeshBasicMaterial( { map: texture } );
+ const materials = [];
+ for (let i = 0; i < textures.length; i ++ ) {
+ const textureLoader = new THREE.TextureLoader();
+ materials.push( new THREE.MeshBasicMaterial({ map: textureLoader.load(textures[i]) }));
+ }
const box = new THREE.Mesh(geometry, materials);

- camera.position.z = 5;
+ camera.position.z = 0.01; // 将相机放在里面
+ box.geometry.scale(1, 1, -1); // 相当于将 Z 轴正向的面移到 Z 轴负方向上

+ const controls = new OrbitControls(camera, renderer.domElement);
+ controls.enableZoom = false; // 禁用放大
+ controls.enablePan = false; // 禁用双指缩放
+ controls.enableDamping = true; // 开启阻尼效果
+ controls.rotateSpeed = -0.25; // 旋转方向取反，使内部拖拽旋转方向一致
const animate = () => {
 requestAnimationFrame(animate);
+ controls.update(); // 开启阻尼效果后必须更新
 renderer.render(scene, camera);
};