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

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

带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(11) https://developer.aliyun.com/article/1243468?groupCode=taobaotech




1. 创建场景、相机和渲染器,将渲染器挂载到 DOM 上:


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);


2. 初始化一个立体几何,并上色:


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();


image.png


3. 给立方体添加图片纹理:


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


image.png


4. 将上面的纹理替换为 6 张全景图片,图片加载的顺序是 正X(px.jpg),负X(nx.jpg),正Y(py.jpg),负Y(ny.jpg),正Z(pz.jpg) 和 负Z(nz.jpg),将他们分别赋给 6 个材质的贴图,作为立方体 box 的材质。


image.png



带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(13) https://developer.aliyun.com/article/1243466?groupCode=taobaotech


相关文章
|
前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(4)
|
编解码
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(8)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(8)
115 0
|
新零售 图形学 容器
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(9)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(9)
103 0
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(10)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(10)
|
算法 API
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(17)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(17)
100 0
|
编解码 前端开发
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(20)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(20)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(14)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(14)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(18)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(18)
|
编解码 算法
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(7)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(7)
|
定位技术 图形学
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16)
带你读《2022技术人的百宝黑皮书》——全景封面视频生成技术在淘宝的应用(16)
111 0
下一篇
DataWorks