1.使用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>
