THREEJS - 模型的任意视角展示

上一篇博客我们提到了任意模型加载的居中的解决办法，但是呢，细心的同学会发现，模型虽然居中了，但是模型的大小我们比较难以控制，可能会导致模型加载时，展示在场景中或大或小，这时候我们就需要设定一下模型的展示视角。

在说方法前，我们先来说明一下另一个概念：orbitContorl。这个控制器是用来控制模型在场景中的展示，可以通过鼠标控制实现我们想要的效果，但是orbitCotrol内置属性中，会影响到我们创建场景中的camera的设定，此时如果需要改变相机的位置和视角时，我们需要用下面这个办法：

orbit.object.position.set(1, 1, 1); // 设置相机的位置
orbit.target.set(0, 0, 0); // 设置相机所看的目标位置

明白了控制器的控制冲突解决办法后，我们来看一下如何在加载模型时，以一个合适的视角初始化：（这里会用到前文设定模型中心的办法）

// 将模型的中心点设置到canvas坐标系的中心点，保证模型显示是居中的
let box = new THREE.Box3().setFromObject(object); // 获取模型的包围盒
let mdlen = box.max.x - box.min.x; // 模型长度
let mdwid = box.max.z - box.min.z; // 模型宽度
let mdhei = box.max.y - box.min.y; // 模型高度
let x1 = box.min.x + mdlen / 2; // 模型中心点坐标X
let y1 = box.min.y + mdhei / 2; // 模型中心点坐标Y
let z1 = box.min.z + mdwid / 2; // 模型中心点坐标Z
let diagonal = Math.sqrt(Math.pow(Math.sqrt(Math.pow(mdlen, 2) + Math.pow(mdwid, 2)), 2) + Math.pow(mdhei, 2)); // 获取模型整体对角线长度,这里获取模型模型对角线的目的是为了保证模型可以完全的展示在视线范围内
// 假设我们需要的进入视角为45度
orbit.object.position.set(box.max.x + diagonal / 2, (diagonal * 2) / Math.tan(Math.PI / 180 * 45) + Math.abs(box.max.y), box.max.z + diagonal / 2); // 设置相机位置，向上偏移，确定可以包裹整个模型
orbit.target.set(x1, y1, z1); // 设置相机的视角方向，看向模型的中心点
orbit.update(); // 更新相机

这就是模型展示视角的办法，可以根据自己的实际需要，修改进入的视角。

THREEJS - 模型的任意视角展示相关推荐

【threejs】透视相机，实现相机根据模型大小自适应，将模型放置在视角内
透视相机,实现相机根据模型大小自适应,将模型放置在视角内 const box3_2 = new THREE.Box3().setFromObject(object); //新建一个Box3包裹盒把模型 ...
THREEJS - 模型居中
在使用THREEJS的过程中,我们常常会遇到关于模型的处理,有时候建模的同事会帮我们将模型归零后给我们,有时候是没有归零的,但这时候需要将模型在场景中居中展示. 这里采用的办法是包围盒的方式,具体代码 ...
Revit模型在Web端展示的免费方案
每天都有几个人来加我好友,问我Revit模型在Web端展示的相关问题.首先我是理解各位用户的需求的,除去可视化展示,一条共同的应该是"有没有免费的开源解决方案?" 有的,基于web ...
迄今最精准人脸数字模型，任意 2D 照片转换逼真３维人脸（转）
原文地址:http://36kr.com/p/5073179.html 伦敦帝国理工学院的研究人员开发了一种新的系统,能自动对各种族.年龄的人脸进行准确的 3D 建模.他们还建立了一个大规模人脸扫描数 ...
H5三维充电数据线建模3D模型VR高清线上展示
H5三维3D模型VR高清线上展示将三维技术和现实技术的融合以及升华,让三维建模和真实世界互动,不再只局限于现实,从而得到的全新体验.商迪3D运用三维模型VR高清H5建模将互联网世界和现实世界相结合,将 ...
web集成3D模型，可动态展示设备模型及控制，互动性全息投影
3D建模及web端集成动态加载可提供3D建模及web集成技术,模型可动态控制及展示.采用threejs技术进行web端集成.互动性全息投影可根据手势进行变换,有意邮箱沟通mokeily99@126. ...
【转】图形流水线中坐标变换详解：模型矩阵、视角矩阵、投影矩阵
转自:图形流水线中坐标变换详解:模型矩阵.视角矩阵.投影矩阵_sherlockreal的博客-CSDN博客_视角矩阵图形流水线中坐标变换详解:模型矩阵.视角矩阵.投影矩阵图形流水线中坐标变换过程 ...
CVPR 2019 | 旷视提出超分辨率新方法Meta-SR：单一模型实现任意缩放因子
点击我爱计算机视觉标星,更快获取CVML新技术 CV君按:图像超分辨率(Super-Resolution,SR )的研究由来已久,但近两年来随着深度学习在该领域的成功应用,工业界的研究突然火了起来,互 ...
倾斜摄影超大场景的三维模型的顶层合并，提升模型在WEB三维展示效果
倾斜摄影超大场景的三维模型的顶层合并,提升模型在WEB三维展示效果倾斜摄影超大场景的三维模型的顶层合并后,可以采取以下措施来提升模型在WEB三维展示效果: 1.优化模型数据:对于倾斜摄影超大场景的三 ...

THREEJS - 模型的任意视角展示

THREEJS - 模型的任意视角展示相关推荐

最新文章

热门文章