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

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

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




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


image.png


5. 将相机放入 box 里面,同时将 box 的 X 轴或者 Z 轴的放大倍数变为负数,这样才能看到内部:


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


最终效果


image.png



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

相关文章
|
前端开发
页面无法滑动-CSS: touch-action属性
页面无法滑动-CSS: touch-action属性
138 0
|
8月前
|
负载均衡 物联网 测试技术
部署硬件负载均衡时,如何评估设备的处理能力?
部署硬件负载均衡时,如何评估设备的处理能力?
349 60
|
12月前
|
大数据 Linux 数据库
openEuler操作系统介绍
openEuler是一款开源免费的操作系统,由openEuler社区运作,支持多种处理器,适用于数据库、大数据、云计算等场景。它源自华为EulerOS,现分为创新版和LTS版,分别每半年和每两年发布一次。本课程以openEuler 20.03 LTS版为例,介绍其安装流程和环境准备。
973 3
|
NoSQL 算法 Java
诡异,Redis Proxy RT上升后连接倾斜
本文细致地描述了关于Redis Proxy RT上升后连接倾斜问题的排查过程和根本原因,最后给出了优化方案。
|
Linux iOS开发 MacOS
Python系统编程高手进阶:跨平台兼容性?小菜一碟💪
【9月更文挑战第6天】当我们探讨Python系统编程时,跨平台兼容性至关重要。Python凭借其解释型语言特性和多平台解释器,确保了代码能够在Windows、Linux、macOS等多种环境中顺畅运行。本文将介绍Python跨平台运行的基本原理,以及如何处理文件路径差异和系统调用等问题,助你轻松应对跨平台挑战。
326 1
【Java基础面试二】、个Java文件里可以有多个类吗(不含内部类)?
这篇文章讨论了Java文件中类的定义规则,指出一个Java文件可以包含多个类(不包含内部类),但其中最多只能有一个public类,且如果有public类,它的名称必须与文件名一致。
|
算法 JavaScript 前端开发
对称加密算法解析:DES、AES及其在`pycryptodome` 和 `crypto-js` 模块中的应用
对称加密算法解析:DES、AES及其在`pycryptodome` 和 `crypto-js` 模块中的应用
479 1
|
机器学习/深度学习 人工智能 算法
AI战略丨AI原生时代,应用创新蓄势待发
通过热点AI应用创新项目的观察,我们可以看到新技术的突破方向,也能发现基于生成式AI迸发出的全新商业前景落地的可能性。
AI战略丨AI原生时代,应用创新蓄势待发
|
JSON 缓存 NoSQL
重新更新VScode配置(C/C++)——负责任、手把手教学,亲测有效
对于C/C++的编程环境来说,目前我们所接触到的、所用到的,除了vim以外,大众用的、尤其是学生群体用的主要是有三种。
1671 1
重新更新VScode配置(C/C++)——负责任、手把手教学,亲测有效
|
Unix 编译器 数据库
【进阶】C 语言表驱动法编程原理与实践
【进阶】C 语言表驱动法编程原理与实践
360 0