加载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模型相关推荐

  1. threejs加载3D模型例子

    加载3D模型 首先要引入ColladaLoader加载器,Collada是一个3D模型交换方案,即不同的3D模型可以通过Collada进行相互转换,言外之意,threejs可以使用Collada将3D ...

  2. 如何加载3D模型(odj文件和mtl文件)

    模型的加载 因为,在最近的项目模块中需要加载部分"模型".在加载模型在方面我从来的没有接触过,是通过同事告诉,慢慢摸索才完成的,其中是我遇到的问题和总结的一些的方法. 使用VUE加 ...

  3. Labview加载3D模型(.wrl)出现内存不足的解决方法

    Labview加载3D模型(.wrl)出现内存不足的解决方法 最近,由于项目的要求,需要做一个上位机,用于实时采集装备的状态信息.最终方案采用Labview数据流的方式构建应用程序.在加载wrl3D模 ...

  4. Unity动态加载3D模型

    Unity动态加载3D模型 在Unity中创建游戏对象的方法有 3 种: 第一种是将物体模型资源由 Project 视图直接拖曳到 Hierarchy 面板中: 第二种是在 Unity 3D 菜单 G ...

  5. qt opengl 加载3d模型(obj格式)

    和一般c++程序加载3d模型一样,解读出数据内容,再用一个常规的着色程序就可以了. 我实现的效果如下,采用的免费模型 实现思路和前面的略有不同,就是把自己生成顶点.纹理.法线的过程变成从文件读取了. ...

  6. 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 ...

  7. Cesium.js 加载3D模型

    一.Cesuimjs介绍 Cesiunjs是一套GIS行业中进行地图渲染的js库,该库使用的WebGL进行地图渲染.并且结合HTML5进行相应,从而实现3D中渲染地图.本篇文章则介绍如何将后缀名为ma ...

  8. Qt Quick 3D系列(一):加载3d模型

    如果我们想在QML中使用3D且你之前没有三维程序开发的基础,使用Qt Quick 3D是个不错的选择,下面我介绍如何使用Qt Quick 3D加载3d模型.注意:Qt Quick 3D从Qt 5.15 ...

  9. PHP加载3D模型【WebGL】

    这是另一篇关于如何使用 PHP加载 3D 模型的文章. 在这里,我使用 Laravel 作为后端及其存储. 我在前端使用 Three.Js 库来渲染和显示 3D 模型. 我将向您展示如何上传 3D 模 ...

最新文章

  1. iCup,USB加热饮品方案
  2. 《中国人工智能学会通讯》——1.42 理解情感
  3. recyclerview item动画_RecyclerView 的 Item 酷炫动画,效果加案例讲解!
  4. sklearn快速入门教程:(一)准备工作
  5. 鸿蒙os终于开始大升级,华为鸿蒙OS终于要迎来大规模推送升级了
  6. 前端学习(1374):express参数中get参数的获取
  7. 1207.1——C语言 函数
  8. 组件端Apollo配置放到NAS中
  9. OpenCV-Python实战(番外篇)——OpenCV、NumPy和Matplotlib直方图比较
  10. tomcat端口修改以及jvm启动参数设置
  11. Hulu推荐 | 《破产姐妹》Max演员新剧《娃娃脸》
  12. 如何修改anaconda的文件目录_Anaconda安装的常见错误和python的基础知识
  13. 通过bower 下载管理angularjs
  14. Android-smart-image-view加载网络图片
  15. GitHub的使用(上)
  16. 如何判断是否适合学编程?
  17. 技术型产品经理的思维能力
  18. 华为上半年手机销量_霸气侧漏,如何看待小米和华为的上半年手机销量
  19. [BZOJ3698]XWW的难题(有源汇上下界最大流+讲解)
  20. 深入理解BFC与IFC

热门文章

  1. 接入微信登录时返回errcode=-6
  2. spinal HDL - 02 - Spinal HDL数据类型 - 基本数据类型
  3. Android.mk 编译so动态库以及如何使用so动态库
  4. Android Studio的gradle报错“The error message “No variants found for ‘demo‘. Check build files to ensur“
  5. 小白计算机视觉学习报告
  6. 蓝桥杯 BASIC-3 字母图形 c++实现
  7. Toon Boom Storyboard Pro 20中文安装使用教程
  8. python每日一练:输入一个字符串,统计其中的小写字母,大写字母,空格键,以及其它字符,并在一行内输出统计的个数
  9. Windows Server 2003 介绍
  10. 电脑颜色变成黑白色了怎么调回来