加载3D模型

首先要引入ColladaLoader加载器，Collada是一个3D模型交换方案，即不同的3D模型可以通过Collada进行相互转换，言外之意，threejs可以使用Collada将3D模型的数据转换成自己支持的格式，从而在浏览器上渲染出来。引入ColladaLoader如下：

<script src="http://threejs.outsidelook.cn/r89/source/examples/js/loaders/ColladaLoader.js"></script>

然后使用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 );} );
}

需要注意的是，加载是异步的，所以，要使用render循环来渲染，可参考下面的例子。

整个例子请看：【加载3D模型例子】，整个例子的效果：

持续更新

threejs加载3D模型例子相关推荐

threejs加载3D模型
加载3D模型首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...
Cesium.js 加载3D模型
一.Cesuimjs介绍 Cesiunjs是一套GIS行业中进行地图渲染的js库,该库使用的WebGL进行地图渲染.并且结合HTML5进行相应,从而实现3D中渲染地图.本篇文章则介绍如何将后缀名为ma ...
如何加载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 ...
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 模 ...

threejs加载3D模型例子

加载3D模型

threejs加载3D模型例子相关推荐

最新文章

热门文章