打算作個輪盤遊戲,直接上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