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

const scene = new THREE.Scene();
const _width = window.innerWidth > 640 ? 640 : window.innerWidth;
const _height = window.innerHeight;
const camera = new THREE.PerspectiveCamera(90, _width / _height, 0.1, 100); // PerspectiveCamera(fov, aspect, 
near, far);
const renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio); // 设置设备像素比，通常用于避免 HiDPI 设备上绘图模糊
renderer.setSize(_width, _height); // 将输出 canvas 的大小调整为 (wi
dth, height) 并考虑设备像素比
document.getElementById('container').appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry( 1, 1, 1 ); // BoxGeometry(width, height, depth)
const material = new THREE.MeshBasicMaterial({ color: 0x156289 });
const box = new THREE.Mesh(geometry, material);
scene.add( box ); // 将物体添加到场景
camera.position.z = 5; // 设置相机的 z 轴位置为正，从外部观察物体
// 执行动画渲染
const animate = () => {
 requestAnimationFrame(animate);
 renderer.render(scene, camera);
};
animate();

- const material = new THREE.MeshBasicMaterial({ color: 0x156289 });
+ const texture = new THREE.TextureLoader().load('textures/demol.gif');
+ const material = new THREE.MeshBasicMaterial( { map: texture } );