【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查看更多。
代码下载地址:点击前往
【Three.js】实现随心所欲的展示外部三维模型的更多相关文章
- 利用WPF建立自己的3d gis软件(非axhost方式)(六)跳转,增加外部三维模型
原文:利用WPF建立自己的3d gis软件(非axhost方式)(六)跳转,增加外部三维模型 先下载SDK:https://pan.baidu.com/s/1M9kBS6ouUwLfrt0zV0bPe ...
- WebGL three.js学习笔记 加载外部模型以及Tween.js动画
WebGL three.js学习笔记 加载外部模型以及Tween.js动画 本文的程序实现了加载外部stl格式的模型,以及学习了如何把加载的模型变为一个粒子系统,并使用Tween.js对该粒子系统进行 ...
- three.js实现3D模型展示
由于项目需要展示3d模型,所以对three做了点研究,分享出来 希望能帮到大家 先看看效果: three.js整体来说 不是很难 只要你静下心来研究研究 很快就会上手的 首先我们在页面上需要创建一个能 ...
- js实现侧边栏信息展示效果
目前的网页都右侧边栏,有的是在左侧,类似于导航栏,如一些购物商城,还有一些是在网页的右下角,一般是提示客服信息和微信/QQ等服务. 这里都涉及到一个动画效果的展示,即点击侧边栏时会在侧边栏的右侧或者左 ...
- js大数计算之展示
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js中如何去获取外部css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js模拟import方法导入外部文件
function Import() { for( var i=0; i<arguments.length; i++ ) { var file = arguments; if ( file.mat ...
- js整频滚动展示效果(函数节流鼠标滚轮事件)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- fiddler接口测试,js代码修改日志展示(埋点用)
fiddler 通过fiddler 发送接口信息: http://blog.csdn.net/java2013liu/article/details/53380381 rules--automatic ...
随机推荐
- sed修改json内容
1.config.json { "whiteHoleUrl": "http://172.16.80.90/whui/serviceManagement/regist/ne ...
- 基数排序简单Java实现
基数排序(radix sort)又称“桶子法”,在对多个正整数进行排序时可以使用.它的灵感来自于队列(Queue),它最独特的地方在于利用了数字的有穷性(阿拉伯数字只有0到9的10个). 基数排序使用 ...
- 自己写一个图片按钮(XAML)
有时需要用三张图片(正常状态,鼠标移上,鼠标按下)来作为一个按钮的样式,虽然这种做法不好,应该用矢量的方式制作样式,但有的时候还是需要这样做的. 每次都修改按钮的样式来实现这个做法,既麻烦又会生成大段 ...
- 原创:MVC 5 实例教程(MvcMovieStore 新概念版:mvc5.0,EF6.01) - 2、数据框架 和 功能预览
说明:MvcMovieStore项目已经发布上线,想了解最新版本功能请登录 MVC 影视(MvcMovie.cn) 进行查阅.如需转载,请注明出处:http://www.cnblogs.com/Dod ...
- Android阻止AlertDialog关闭
AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); builder.setTitle("测试" ...
- 用 go 写 WebAssembly入门
Golang WebAssembly 入门 Golang 在1.11版本中引入了 WebAssembly 支持,意味着以后可以用 go编写可以在浏览器中运行的程序,当然这个肯定也是要受浏览器沙盒环境约 ...
- Python 日常学习
习惯了java的思想.用java的思想来获取python元组中的数据.结果出错了. yuanzu_s = ("one", "two", "three& ...
- spring的父子上下文容器及配置
本文由作者张远道授权网易云社区发布. spring父子容器 spring总的上下文容器有父子之分.父容器和子容器.父容器对子容器可见,子容器对父容器不可见. 对于传统的spring mvc来说,spr ...
- Prim算法---最小生成树
最小生成树的Prim算法也是贪心算法的一大经典应用.Prim算法的特点是时刻维护一棵树,算法不断加边,加的过程始终是一棵树. Prim算法过程: 一条边一条边地加, 维护一棵树. 初始 E = {}空 ...
- java下载文件注意点
前台: 不建议使用ajax,可以使用window.location.href 后台: 三个参数--> response path filename--filename如果要防止乱码,可以用Str ...