6.把建模工具导出的模型导入到three.js中

来源：互联网发布：八月十五杀鞑子知乎编辑：程序博客网时间：2024/06/03 19:54

1.使用Three.js渲染导出的DAE

有时候我们需要使用建模工具来建立模型，毕竟有的时候在three。js中建模实在是比较繁琐
我们一般先用建模工具把我们要用到的模型导出成dae文件

在Three.js中使用Collada(即.dae)文件的话，首先得要用到 ColladaLoader.js。

但是这个ColladaLoader.js并不包含在three.js文件里面，需要你自己下载然后添加进来。

这个文件中three.js的repo里面的examples/js/loaders/ColladaLoader.js

如果你检出了three.js的源代码的话，在上面的位置就可以找到这个文件了。

然后在你的html里面载入这个文件就可以了。

其实一开始照着官方的文档去加载和展示dae是显示不出来的，

搜索了很多相关知识后才找到如下方式可以显示出来，

可能是camera视角原因和光照原因。

最后可以正常显示的页面主文件如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <title>Roulette</title>    <style type="text/css">        body {            margin: 0;        }        canvas { width: 100%; height: 100% }    </style>    <script type="text/javascript" src="js/three.js"></script>    <script type="text/javascript" src="js/ColladaLoader.js"></script>    <script src="js/OrbitControls.js"></script>    <script src="js/pumpStation1.js"></script></head><body onload="startGame();"></body></html>

Js文件

var scene, camera, renderer, daeModel;//初始化场景function initScene() {    scene = new THREE.Scene();}//初始化摄像机function initcamera(){    aspect = 980/ 490;    D = 8;    camera = new THREE.OrthographicCamera(-D*aspect, D*aspect, D, -D, 1, 1000);    //camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1,200)    camera.position.set( 300, -300, 300 );    camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );    camera.up.x = 0;    camera.up.y = 0;    camera.up.z = 1;    //camera.rotation.z = 1 / 6 * Math.PI;    //camera.rotation.z = 5/6*Math.PI;}function initthree() {    renderer = new THREE.WebGLRenderer();    renderer.setSize( 980, 490 );    renderer.setClearColor( 0xffffff );    document.body.appendChild( renderer.domElement );    /*        var spotLight = new THREE.SpotLight( 0xffffff );        spotLight.position.set( 100, 1000, 100 );        spotLight.castShadow = true;        spotLight.shadow.mapSize.width = 1024;        spotLight.shadow.mapSize.height = 1024;        spotLight.shadow.camera.near = 500;        spotLight.shadow.camera.far = 4000;        spotLight.shadow.camera.fov = 30;        scene.add( spotLight );    */}function initlight() {    var light = new THREE.DirectionalLight( 0xffffff, 2 );    light.position.set( 300, -300, 200 );    scene.add( light );}function LoadModel() {    var loader = new THREE.ColladaLoader();    loader.load( "./model/pumpStation1.dae", function ( collada ) {        daeModel = collada.scene;        daeModel.scale.set( 0.1, 0.1, 0.1 );        daeModel.position.set( -6, 0, 0 );        scene.add( daeModel );        //参考坐标轴        var axisHelper = new THREE.AxisHelper(500);        scene.add(axisHelper);    },    function ( xhr ) {        console.log(( xhr.loaded / xhr.total * 100 ) + "% loaded" );    } );}//初始化渲染器function render() {    requestAnimationFrame( render );    renderer.clear();    renderer.render( scene, camera );    //if( daeModel ){    //    daeModel.rotation.z++;    //}}var Controls;// 初始化控制器function initControls() {    Controls = new THREE.OrbitControls( camera );}function startGame(){    console.log('Load Model started...');    initScene();    initcamera();    initthree();    initlight();    LoadModel();    render();    initControls();}

图片显示效果如下图所示

其中的这一段代码是用来控制鼠标拖动模型旋转的

var Controls;// 初始化控制器function initControls() {    Controls = new THREE.OrbitControls( camera );}

必须在主页中引用这个脚本

<script src="js/OrbitControls.js"></script>

阅读全文

0 0