可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
ES5下 ThreeJS场景中添加模型的方法
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
2
点赞
1
评论
收藏
分享
举报
ES5下 ThreeJS场景中添加模型的方法
Terry
关注
已关注
0
2
1
2754
发表于 2020-06-02 20:41:38
## ES5 下 ThreeJS场景中添加GLTF、OBJ、MTL模型的方法 ES6下导入模型的方法,在官方教程中有,我在此就不多描述了。主要是ES5下的模型加载。 ### 懒得看教程的,可以直接下载源码,做一个合格的搬运工: [threeJs加载obj、gltf模型。](http://www.bytev.com.cn/index.php?app=shop&ac=editor&id=1406) ### Three.js导入gltf模型 #### 需要引入的类 ``` ``` #### 加载gltf代码 ```javascript // gltf加载进度. function processGLTFChild( child ) { try{ if (child.isMesh ) { console.log('child:', child) objects.push( child ) // 有的child.material 类型是 Array, 有的是 Object if (child.material && child.material[0]) { let num = Math.random() * 0xffffff; child.material[0].color.setHex( num * 0xffffff ); } if (child.material && child.material.color) { let num = Math.random() * 0xffffff; child.material.color.setHex( num * 0xffffff ); } } } catch (e) { console.log('error:', e) console.error('设置色彩出错, child:', child) } } // 初始化gltf加载类 var loader = new THREE.GLTFLoader(); // 加载gltf文件 loader.load( "gltf/tank.gltf", function ( gltf ) { // 设置模型缩放大小. var gltfModelScale = 165; // 设置x,y,z的缩放 gltf.scene.scale.set(gltfModelScale, gltfModelScale, gltfModelScale); // gltf.scene.traverse( processGLTFChild ); // 将模型加入scene场景。DEMO类为海洋效果的类,如果普通three场景,直接使用scene对象 scene.add 即可 DEMO.ms_Scene.add( gltf.scene ); }, undefined, function ( e ) { console.error( e ); } ); ``` ### Three.js导入obj,mtl模型 #### 需要引入的类 ``` ``` #### 加载obj,mtl代码 ```javascript // 初始化加载管理器. var manager = new THREE.LoadingManager(); // 先加载材质,setpath为设置材质所在路径,其中材质所需的image,map等图片儿,需要放到同一级目录. new THREE.MTLLoader( manager ) .setPath( '海上钻井平台-3/' ) .load( 'guanzi_01.mtl', function ( materials ) { // .load 加载材质文件. materials.preload(); // 初始化OBJ模型加载器,同样,设置模型所需覆盖的材质,设置所在路径,加载模型文件. new THREE.OBJLoader( manager ) .setMaterials( materials ) .setPath( '海上钻井平台-3/' ) .load( 'guanzi_01.obj', function ( object ) { // .load加载模型文件. object.position.y = - 95; // 将模型加入scene场景。DEMO类为海洋效果的类,如果普通three场景,直接使用scene对象 scene.add 即可 DEMO.ms_Scene.add( object ); }, onProgress, onError ); } ); ```
点击查看更多
全部评论
登录
|
注册
关于作者
Terry
TA的个人主页
关注
已关注
文章
52
粉丝
32
获赞
15
评论
8
访问
87756
ThreeJS 轮廓线特效 OutLinePath
创建海洋特效组件 THREEJS 海洋效果 Shader实现
ThreeJS后期处理通道
Three.js物理材质MeshStandardMaterial和MeshPhysicalMaterial
ThreeJs光效流转特效
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接