threejs加载3D模型
加载3D模型
首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D模型的数据转换成自己支持的格式,从而在浏览器上渲染出来。引入ColladaLoader如下:
<script src="http://threejs.outsidelook.cn/r89/source/examples/js/loaders/ColladaLoader.js"></script>
1
2
然后使用ColladaLoader的Load方法加载模型,然后使用onLoad回调函数在模型加载完成之后将模型添加到场景中。onLoad函数会接受到一个包含了所加载的资源的对象,这个对象的结构如下:
对于这个对象中具体包含了哪些东西,暂时不用全部弄明白。但是我们看到了上面有一个scene,在threejs中,scene是场景,是包含所有可视部件的容器,我们要做的就是(1)从这个scene中找出我们需要操控的模型对象,保存起来(2)将模型的场景添加到程序的场景中去。
下面是整个加载模型的函数:
function load3DModel(){
/
1、collada是一种基于XML的3D模型交互方案,简单来说,就是一种3D模型可以通过collada转换成另一种3D模型,
从而,各种3D模型都可以通过collada转换成web支持的3D模型。
2、。dae是一个钟3D模型的格式
3、加载时注意浏览器同源策略的限制
/
var loader = new THREE.ColladaLoader();
loader.load( "./model/avatar.dae", function ( collada ) {
//找到模型中需要的对象。将相机看向这个对象是为了让这个对象显示在屏幕中心
collada.scene.traverse( function ( child ) {
if ( child instanceof THREE.SkinnedMesh ) {
modelObj = child;
camera.lookAt( child.position );
}
} );
//将模型的场景加入到整体的场景
modelObj.material.opacity = 0.8;
scene.add( collada.scene );
//显示出模型的骨骼的代码,不需要可删去
var helper = new THREE.SkeletonHelper( modelObj );
helper.material.linewidth = 3;
scene.add( helper );
} );
}
整个例子请看:【加载3D模型例子】,整个例子的效果:
————————————————
版权声明:本文为CSDN博主「目尽地平线」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/ruangong1203/article/details/56016305
threejs加载3D模型相关推荐
- threejs加载3D模型例子
加载3D模型 首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...
- 如何加载3D模型(odj文件和mtl文件)
模型的加载 因为,在最近的项目模块中需要加载部分"模型".在加载模型在方面我从来的没有接触过,是通过同事告诉,慢慢摸索才完成的,其中是我遇到的问题和总结的一些的方法. 使用VUE加 ...
- Labview加载3D模型(.wrl)出现内存不足的解决方法
Labview加载3D模型(.wrl)出现内存不足的解决方法 最近,由于项目的要求,需要做一个上位机,用于实时采集装备的状态信息.最终方案采用Labview数据流的方式构建应用程序.在加载wrl3D模 ...
- Unity动态加载3D模型
Unity动态加载3D模型 在Unity中创建游戏对象的方法有 3 种: 第一种是将物体模型资源由 Project 视图直接拖曳到 Hierarchy 面板中: 第二种是在 Unity 3D 菜单 G ...
- qt opengl 加载3d模型(obj格式)
和一般c++程序加载3d模型一样,解读出数据内容,再用一个常规的着色程序就可以了. 我实现的效果如下,采用的免费模型 实现思路和前面的略有不同,就是把自己生成顶点.纹理.法线的过程变成从文件读取了. ...
- Qt和OpenGL:使用Open Asset Import Library(ASSIMP)加载3D模型
Qt和OpenGL:使用Open Asset Import Library(ASSIMP)加载3D模型 翻译自:https://www.ics.com/blog/qt-and-opengl-loadi ...
- Cesium.js 加载3D模型
一.Cesuimjs介绍 Cesiunjs是一套GIS行业中进行地图渲染的js库,该库使用的WebGL进行地图渲染.并且结合HTML5进行相应,从而实现3D中渲染地图.本篇文章则介绍如何将后缀名为ma ...
- Qt Quick 3D系列(一):加载3d模型
如果我们想在QML中使用3D且你之前没有三维程序开发的基础,使用Qt Quick 3D是个不错的选择,下面我介绍如何使用Qt Quick 3D加载3d模型.注意:Qt Quick 3D从Qt 5.15 ...
- PHP加载3D模型【WebGL】
这是另一篇关于如何使用 PHP加载 3D 模型的文章. 在这里,我使用 Laravel 作为后端及其存储. 我在前端使用 Three.Js 库来渲染和显示 3D 模型. 我将向您展示如何上传 3D 模 ...
最新文章
- iCup,USB加热饮品方案
- 《中国人工智能学会通讯》——1.42 理解情感
- recyclerview item动画_RecyclerView 的 Item 酷炫动画,效果加案例讲解!
- sklearn快速入门教程:(一)准备工作
- 鸿蒙os终于开始大升级,华为鸿蒙OS终于要迎来大规模推送升级了
- 前端学习(1374):express参数中get参数的获取
- 1207.1——C语言 函数
- 组件端Apollo配置放到NAS中
- OpenCV-Python实战(番外篇)——OpenCV、NumPy和Matplotlib直方图比较
- tomcat端口修改以及jvm启动参数设置
- Hulu推荐 | 《破产姐妹》Max演员新剧《娃娃脸》
- 如何修改anaconda的文件目录_Anaconda安装的常见错误和python的基础知识
- 通过bower 下载管理angularjs
- Android-smart-image-view加载网络图片
- GitHub的使用(上)
- 如何判断是否适合学编程?
- 技术型产品经理的思维能力
- 华为上半年手机销量_霸气侧漏,如何看待小米和华为的上半年手机销量
- [BZOJ3698]XWW的难题(有源汇上下界最大流+讲解)
- 深入理解BFC与IFC
热门文章
- 接入微信登录时返回errcode=-6
- spinal HDL - 02 - Spinal HDL数据类型 - 基本数据类型
- Android.mk 编译so动态库以及如何使用so动态库
- Android Studio的gradle报错“The error message “No variants found for ‘demo‘. Check build files to ensur“
- 小白计算机视觉学习报告
- 蓝桥杯 BASIC-3 字母图形 c++实现
- Toon Boom Storyboard Pro 20中文安装使用教程
- python每日一练:输入一个字符串,统计其中的小写字母,大写字母,空格键,以及其它字符,并在一行内输出统计的个数
- Windows Server 2003 介绍
- 电脑颜色变成黑白色了怎么调回来