【Three.js】实现随心所欲的展示外部三维模型

 

1.概要

    最近学习Three.js，尝试加载一些3d max导出的obj、stl模型，在展示模型的时候遇到了一些问题，模型的尺寸、位置和旋转角度每次都靠手工调整，非常的不方便，就想着写一个方法来随心所欲的控制模型的尺寸、位置、角度。

 

2.实现思路

        先看看官方加载外部模型的标准代码：

var mtlLoader = new THREE.MTLLoader();
mtlLoader.load(mtlPath, function (materials) {
materials.preload();

var loader = new THREE.OBJLoader();
loader.setMaterials(materials);
loader.load(modelPath, function (obj) {


obj.castShadow = true;
obj.receiveShadow = true;

//场景加载
scene.add(obj);
//渲染
renderer.render(scene, camera);

}});

 

    通过以上代码，可以实现obj模型和mtl纹理的加载。但是在实际使用中，模型的尺寸和方向不是完美合适的，比如博主我在使用过程中就遇到了以下三个问题。

问题1 模型尺寸

    外部模型往往是3d max导出，模型的大小尺寸和实际中往往不一样。three.js 官方有scale 属性可以更改模型的尺寸比例，代码如下。

obj.scale.set(x,y,z);

 

    现在问题来了，我知道的参数其实是模型的长、宽、高，并不是比例。解决的方法如下，先计算出模型的实际长宽高，转换成比例。

//计算模型尺寸
var box = new THREE.Box3();
box.expandByObject(obj);

var length = box.max.x - box.min.x;
var width = box.max.z - box.min.z;
var height = box.max.y - box.min.y;

//l w h对应模型的长宽高
obj.scale.set(l / length, h / height, w / width);

 

问题2 模型角度

    和模型尺寸一样，外部模型的朝向和实际中有时候不同，有时候一种模型会在场景中有多个朝向的分布，例如办公室的椅子。还是先看看官方的方法position属性可以设置模型x、y、z的转向。代码如下：

obj.position.set(angleX, angleY, angleZ);

 

    现在看起来是没有问题了，不过当你遇到一个模型中心点坐标和场景中心点坐标相差几百万单位的时候，估计旋转后连模型影子都看不见了...例如博主我遇到的下图这种模型参数：

    如上图，模型本身只有78.5单位长，但是中心x坐标却是2219638.25，导致博主我硬是找了一下午没有加载出模型来。

    在此感谢 https://blog.csdn.net/ruangong1203/article/details/60476782 这篇博客给了我思路。解决方法是增加一个容器，将模型放入容器中，然后指定容器的中心点，然后旋转容器代替旋转模型即可。

let wrapper = new THREE.Object3D();
//模型在场景中的为准
wrapper.position.set(x,y,z);
wrapper.add(obj);

wrapper.rotation.set(angleX, angleY, angleZ);

 

问题三 模型位置

    模型的位置是最头痛的，three.js默认的以模型的中心偏移来定位的，同样看看官方的方法，有个position属性可以更改模型位置。如果遇到问题二里面那种偏移超级远的模型就尴尬了。

    我的解决思路是先计算出模型的实际尺寸，然后再找到模型的中心点，根据x=0,y=0,z=0将模型移动到正常位置，然后通过问题二的容器解决方法来重新设置容器位置解决。代码如下：

//计算模型尺寸
var box = new THREE.Box3();
box.expandByObject(obj);

var x = (box.max.x + box.min.x) / 2;
var y = (box.max.y + box.min.y) / 2;
var z = (box.max.z + box.min.z) / 2;

obj.position.set(0 - x, 0 - y, 0 - z);

obj.castShadow = true;
obj.receiveShadow = true;

let wrapper = new THREE.Object3D();
//模型在场景中实际位置
var pt={x:0,y:0,z:0};
wrapper.position.set(pt.x, pt.y, pt.z);
wrapper.add(obj);

 

   

3.实现效果

放张效果图：

 

 

    在线体验地址：http://www.88gis.cn/plugins/dgis3d/pages/index.html

4.代码

　　详细代码请移步我的个人博客88gis.cn查看更多。

　　代码下载地址：点击前往