threeJS 导入模型（不确定尺寸）后如何确定相机位置及物体缩放比例

Posted 2023-04-16

1、threeJS里面的单位是什么？有没有什么建模时需遵循的大小、单位规范？
2、如何确定各种定位？

1、打开threeJS软件，任意创建一个模型。

2、然后选择模型并单击“选择并均匀缩放”按钮。

3、将光标移动到X轴上，则X轴变为黄色，且光标的形状发生变化。

4、按住回鼠标左键拖动光标，则模型随着光标的移动发生变化，同理，其他轴也是这样的，

5、鼠标放在三角中间，按住鼠标左键拖动光标，则模型在X、Y、Z三个方向同时变化。如图所示

6、第二种模式“选择并非均匀缩放”跟第一种模式是一样的，

7、鼠标左键按住缩放按钮不放，在弹出的工具菜单中选择“选择并挤压缩放”按钮，将鼠标移动到三角形标识上，向内进行缩放操作，可以看到模型外观发生了巨大的变化，如图所示。

8、完成图。

注意事项：

three.js封装了一些3D渲染需求中重要的工具方法与渲染循环。它的教程同样可以在hiwebgl里面找版到。

three.js之于webgl，类似于windows版本的虚幻引擎之于D3D。当然，虚幻引擎的能力范围比three.js大得多。d3.js跟上面两者没有关权系。

参考技术A //获取模型适合观察的缩放的比例
getFitScaleValue: function(obj)
var boxHelper = new THREE.BoxHelper(obj);
boxHelper.geometry.computeBoundingBox();
var box = boxHelper.geometry.boundingBox;
var maxDiameter = Math.max((box.max.x - box.min.x), (box.max.y - box.min.y), (box.max.z - box.min.z));

return this.camera.position.z / maxDiameter;
,
//设置模型到适合观察的大小
setScaleToFitSize: function(obj)
var scaleValue = this.getFitScaleValue(obj);
obj.scale.set(scaleValue, scaleValue, scaleValue);

return scaleValue;
,

ThreeJS实现船行效果

参考技术A

解决方法:
官方提供了射线捕获的接口 raycaster.intersectObjects , 但是只能识别自建的 Mesh 模型, 对于导入的模型则无法捕获, 主要是因为导入的模型最外层包了一层, 没有把自己内部的Mesh暴露出来
所以我们需要在模型导入后, 在 onProgress 回调中对其进行递归获取子 Mesh , 将所有 Mesh 存在一个全局数组中. 在鼠标事件触发时, 将全局数组提供给 raycaster.intersectObjects , 即可识别
1. 递归函数

2.mtlLoader的onProgress事件

3.鼠标点击事件

2D平面展示有两种, 一种是这个项目里的鼠标触碰直升机的提示牌, 时刻与摄像头在同一角度的2D平面; 另一种是只在一个方向上可见的2D平面

封装的canvas函数

解决方法: 动画一般就放在固定的动画函数里, 通过 requestAnimationFrame 维持60帧

解决方法: