69 Three.js 导入Collada(.dae)格式的模型
生活随笔
收集整理的這篇文章主要介紹了
69 Three.js 导入Collada(.dae)格式的模型
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡介
Collada是一種用基于XML的格式定義數字內容的格式。這也是一種被廣泛使用的格式，差不多所有的三維軟件和渲染引擎都支持這種格式。
Collada模型中不僅定義了幾何體，也定義了材質，甚至還可以定義光源。
實現案例
案例查看地址：http://www.wjceo.com/blog/threejs/2018-03-20/129.html
- 首先，引入script加載器
- 然后，實例化加載器對象，然后加載模型，給我們返回一個包含模型的對象，里面包含一些模型相關的內容，我們從里面找到scene對象，并在里面找到children數組，將模型clone出來，添加到場景當中。
案例代碼
<!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)格式的模型的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 请问如何查看我的ubuntu是32位的还
- 下一篇： nutch1.9和solr4.5集成 输