使用Three.js渲染Sketchup導出的dae

打算作個輪盤遊戲,直接上3D吧。javascript

 

第一步:製做模型css

3DMax和Maya下載和破解比較麻煩, 就用以前的Sketchup來試試吧。html

 

最後效果圖:java

俯視圖git

 

仰視圖github

 

製做步驟:web

1 先畫一個圓canvas

2 從圓心到圓邊到中心軸,再到圓心畫一個直角三角形(直接三角形對應圓椎體, 梯形對應椎體,任意形狀均可以)app

3 選擇圓形的邊dom

4 選擇Tool -> Follow Me 

5 點選繪製的直角三角形便可。

 

PS:

若是你是免費版不是PRO版的話,在導出的時候請選擇導出Google Earth File(*.kmz),而後將後綴名改成zip以後解壓,使用解壓後的models/*.dae文件;

這裏的dae文件和直接導出Collada File(*.dae)在尺寸和保存的數據方面差異都比較大,如下是截取同一個模型不一樣導出方式dae文件不一樣點的部分對比:

 

參考連接:

https://zhidao.baidu.com/question/169212087.html?fr=iks&word=sketchup+%BB%AD%D4%B2%D7%B6&ie=gbk

 

第二步:使用Three.js渲染導出的DAE

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

官方參考文檔:#Reference/Loaders/ColladaLoader

可是這個ColladaLoader.js並不包含在three.js文件裏面,須要你本身下載而後添加進來。

這個文件中three.js的repo裏面的examples/js/loaders/ColladaLoader.js

若是你檢出了three.js的源代碼的話,在上面的位置就能夠找到這個文件了。

而後在你的html裏面載入這個文件就能夠了。

 

其實一開始照着官方的文檔去加載和展現dae是顯示不出來的,

搜索了不少相關知識後才找到以下方式能夠顯示出來,

多是camera視角緣由和光照緣由。

最後能夠正常顯示的主文件以下:

var scene, camera,renderer, rouletteScene;
function startGame(){
    console.log('Game started...');
    scene = new THREE.Scene();
    aspect = window.innerWidth/window.innerHeight;
    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)
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    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 );
*/
    var light = new THREE.DirectionalLight( 0xffffff, 2 );
    light.position.set( 100, 20, 15 );
    scene.add( light );

    camera.position.set(100,100,100);
    camera.lookAt(new THREE.Vector3(0,0,0));
    camera.rotation.z = 5/6*Math.PI;

    var loader = new THREE.ColladaLoader();
    loader.load("assets/models/roulette.dae", function( collada ){
        rouletteScene = collada.scene;
        rouletteScene.scale.set(0.1,0.1,0.1);
        rouletteScene.position.set(5,5,5);
        scene.add(rouletteScene);
    },
    function( xhr) {
        console.log((xhr.loaded/xhr.total * 100)+"% loaded");
    });

    render();
}


function render(){
    requestAnimationFrame(render);
    renderer.render(scene, camera);
    if( rouletteScene ){
        rouletteScene.rotation.z++;
    }
}

html文件是這樣的:

<!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="./libs/three.js"></script>
    <script type="text/javascript" src="./libs/ColladaLoader.js"></script>
    <script type="text/javascript" src="./js/game.js"></script>
</head>
<body onload="startGame();">

</body>
</html>

 

運行效果:

 

雖然能夠正常運行,可是webgl在報警告:

[.Offscreen-For-WebGL-04A15210]RENDER WARNING: Render count or primcount is 0.

斷點看來一下

three.js 25611行

renderer.render( drawStart, drawCount );

發現他在每6幀的時候會drawCount = 0一次:

具體什麼緣由還在查看中。

 

參考連接:

1 http://stackoverflow.com/questions/16946906/how-to-export-sketchup-models-to-three-js

2 http://bl.ocks.org/nitaku/1d673374f890d833b421

相關文章
相關標籤/搜索