69 Three.js 导入Collada(.dae)格式的模型

简介

Collada是一种用基于XML的格式定义数字内容的格式。这也是一种被广泛使用的格式，差不多所有的三维软件和渲染引擎都支持这种格式。
Collada模型中不仅定义了几何体，也定义了材质，甚至还可以定义光源。

实现案例

案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-20/129.html

首先，引入script加载器

<script src="/lib/js/loaders/ColladaLoader.js"></script>

然后，实例化加载器对象，然后加载模型，给我们返回一个包含模型的对象，里面包含一些模型相关的内容，我们从里面找到scene对象，并在里面找到children数组，将模型clone出来，添加到场景当中。

var loader = new THREE.ColladaLoader();var mesh;
loader.load("/lib/assets/models/dae/Truck_dae.dae", function (result) {mesh = result.scene.children[0].clone();scene.add(mesh);
});

案例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style type="text/css">html, body {margin: 0;height: 100%;}canvas {display: block;}</style>
</head>
<body onload="draw();"></body>
<script src="/lib/three.js"></script>
<script src="/lib/js/loaders/ColladaLoader.js"></script>
<script src="/lib/js/controls/OrbitControls.js"></script>
<script src="/lib/js/libs/stats.min.js"></script>
<script src="/lib/js/libs/dat.gui.min.js"></script><script>var renderer;function initRender() {renderer = new THREE.WebGLRenderer({antialias:true});renderer.setSize(window.innerWidth, window.innerHeight);//告诉渲染器需要阴影效果renderer.setClearColor(0xffffff);document.body.appendChild(renderer.domElement);}var camera;function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);camera.position.set(0, 40, 50);camera.lookAt(new THREE.Vector3(0,0,0));}var scene;function initScene() {scene = new THREE.Scene();}//初始化dat.GUI简化试验流程var gui;function initGui() {//声明一个保存需求修改的相关数据的对象gui = {};var datGui = new dat.GUI();//将设置属性添加到gui当中，gui.add(对象，属性，最小值，最大值）}var light;function initLight() {scene.add(new THREE.AmbientLight(0x444444));light = new THREE.PointLight(0xffffff);light.position.set(0,50,0);//告诉平行光需要开启阴影投射light.castShadow = true;scene.add(light);}function initModel() {//辅助工具var helper = new THREE.AxesHelper(50);scene.add(helper);var loader = new THREE.ColladaLoader();var mesh;loader.load("/lib/assets/models/dae/Truck_dae.dae", function (result) {mesh = result.scene.children[0].clone();scene.add(mesh);});}//初始化性能插件var stats;function initStats() {stats = new Stats();document.body.appendChild(stats.dom);}//用户交互插件 鼠标左键按住旋转，右键按住平移，滚轮缩放var controls;function initControls() {controls = new THREE.OrbitControls( camera, renderer.domElement );// 如果使用animate方法时，将此函数删除//controls.addEventListener( 'change', render );// 使动画循环使用时阻尼或自转 意思是否有惯性controls.enableDamping = true;//动态阻尼系数 就是鼠标拖拽旋转灵敏度//controls.dampingFactor = 0.25;//是否可以缩放controls.enableZoom = true;//是否自动旋转controls.autoRotate = true;controls.autoRotateSpeed = 0.5;//设置相机距离原点的最远距离controls.minDistance  = 1;//设置相机距离原点的最远距离controls.maxDistance  = 200;//是否开启右键拖拽controls.enablePan = true;}function render() {renderer.render( scene, camera );}//窗口变动触发的函数function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();render();renderer.setSize( window.innerWidth, window.innerHeight );}function animate() {//更新控制器render();//更新性能插件stats.update();controls.update();requestAnimationFrame(animate);}function draw() {initGui();initRender();initScene();initCamera();initLight();initModel();initControls();initStats();animate();window.onresize = onWindowResize;}
</script>
</html>

69 Three.js 导入Collada(.dae)格式的模型相关推荐

89 Three.js 导入dae格式的骨骼绑定动画模型
简介上一节,我们导入了一个官方的FBX格式的骨骼模型,实现了动画效果.这一节,更换了dae格式的模型导入,主要是这个模型返回的数据和FBX的返回格式有一些区别,下面我们将在案例中解析中间的区别. 实 ...
Three导入dae格式模型实例
DAE 是纯文本的模型格式,其本质就是一个单纯的xml文件.相比fbx,对dae格式模型的载入我们拥有非常高的自由控制,这也是最复杂的地方.基本上,dae文件内一开始就把数据分成了好几大块.对我们来说 ...
88 Three.js 导入FBX格式骨骼绑定模型
简介上一节,深入了解了一下SkinnedMesh模型对象的创建.这一节,我们导入外部骨骼绑定的模型,来实现动画显示.由于Three.js支持的三维格式非常多,由于导入模式大同小异,我们就选择两种格式 ...
将dae格式文件导入RViz中创建环境
1.打开solidworks零件或装配体文件 2.导出STL格式文件 (1).点击文件->另存为 (2).命名文件,保存类型选择 STL (3).点击是 3.将STL格式文件导入3ds Ma ...
76 Three.js 导入VRML格式的模型
简介 VRML是Virtual Reality Modeling Language的缩写.这是一种基于文本的格式,允许定义三维对象和世界.它已被X3D文件格式取代.Three.js不支持加载X3D模型 ...
67 Three.js 导入OBJ格式的模型
简介 OBJ是一种简单的三维文件格式,由Wavefront Technologies创建.它是使用最广泛的三维文件格式,用来定义对象的几何体.MTL文件常同OBJ文件一起使用. Three.js还有一 ...
babylon导入_77Three.js导入BABYLON格式的模型
简介 babylon是一个三维javascript游戏库,它以自己的内部格式存储模型. 实现案例首先,引入script加载器然后,实例化加载器对象,然后加载模型,将获取到的模型进行处理,放到sce ...
Threejs实现机械臂运动，机械臂dae格式模型，模型下载
1,介绍该示例使用的是 r95版本Three.js库. 主要实现功能:引入机械臂dae格式模型,模拟机械臂运动.效果图如下: 2,动画主要说明 1,引入机械臂模型,附模型下载地址如下 2,使用Twe ...
three.js加载PDB格式模型(vue中使用three.js55)
加载PDB格式模型 1.demo效果 2.实现要点 2.1 PDB模型放置路径 2.2 加载PDB模型 2.3 处理分子顶点 2.4 处理分子连线 3.demo代码 1.demo效果如上图,该dem ...

69 Three.js 导入Collada(.dae)格式的模型

简介

实现案例

案例代码

69 Three.js 导入Collada(.dae)格式的模型相关推荐

最新文章

热门文章