Demo 網址:
http://yiying2.ueuo.com/three/work2.html
*3D檔案圖檔較大，凡請耐心等候。(我再來想一下怎麼解決.dea檔案大小的問題)
*請使用google chrome為最保險
這個3D的素材是拿我大四的sketchup的半成品
轉出成.dae檔，才能拿來載入。
(一)先決條件是什麼?
第一件事是一定要匯入three.js
第二件事情是要匯入ColladaLoader.js，但ColladaLoader.js要另外下載，依我看好像沒有在three.js下載下來的那包裡面
第三件事，匯TrackballControls.js，因為有了這個，才能讓你用滑鼠控制3D模型轉動
(二)在哪裡載入.dae檔?
要載入您的.dea檔是依靠loader的load函式:
loader.load('http://localhost/three/0033.dae', function (result) {
//一些設定
});
*記住，.dae的路徑，一定要符合同源策略(以chrome來說，除非你願意設定chrome --allow-file-access-from-files)，最好的方法是將這個練習檔放在www目錄下，用localhost的方式去看。
如果你跑在local，而且不是在localhost的環境下，你很有可能出現這樣的錯誤:
https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
(三)Source code參考:
補充1: 如何從sketchup將檔案轉存成.dae檔?
另外您也可以參考 : https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models
http://yiying2.ueuo.com/three/work2.html
*3D檔案圖檔較大，凡請耐心等候。(我再來想一下怎麼解決.dea檔案大小的問題)
*請使用google chrome為最保險
這個3D的素材是拿我大四的sketchup的半成品
轉出成.dae檔，才能拿來載入。
(一)先決條件是什麼?
第一件事是一定要匯入three.js
第二件事情是要匯入ColladaLoader.js，但ColladaLoader.js要另外下載，依我看好像沒有在three.js下載下來的那包裡面
第三件事，匯TrackballControls.js，因為有了這個，才能讓你用滑鼠控制3D模型轉動
(二)在哪裡載入.dae檔?
要載入您的.dea檔是依靠loader的load函式:
loader.load('http://localhost/three/0033.dae', function (result) {
//一些設定
});
*記住，.dae的路徑，一定要符合同源策略(以chrome來說，除非你願意設定chrome --allow-file-access-from-files)，最好的方法是將這個練習檔放在www目錄下，用localhost的方式去看。
如果你跑在local，而且不是在localhost的環境下，你很有可能出現這樣的錯誤:
XMLHttpRequest cannot load file:///D:/three.js/models/test.dae. Cross origin requests are only supported for HTTP.如果你有更多的問題，或是不解，可以參考
https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally
(三)Source code參考:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html lang="zh-TW"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>如何匯入sketchp的物件到three.js</title> | |
| <style> | |
| canvas{width:100%; height:100%} | |
| h1{background:url(logo.png) no-repeat;height:80px;width:560px} | |
| body{background:url(bg.png) no-repeat left 80%;margin:0 50px} | |
| </style> | |
| </head> | |
| <body> | |
| <script src="three.js"></script> | |
| <script src="TrackballControls.js"></script> | |
| <script type="text/javascript" src="ColladaLoader.js"></script> | |
| <script> | |
| var scene = new THREE.Scene(); | |
| var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); | |
| var renderer = new THREE.WebGLRenderer(); | |
| var dae; | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| document.body.appendChild ( renderer.domElement); | |
| var light; | |
| function initLight() { | |
| light = new THREE.DirectionalLight(0xFFFFCC, 1.0, 0); | |
| light.castShadow = true; | |
| light.position.set( 50, 100, 200 ); | |
| scene.add(light); | |
| } | |
| var controls; | |
| controls = new THREE.TrackballControls(camera); | |
| controls.rotateSpeed = 1.0; | |
| controls.zoomSpeed = 1.0; | |
| controls.panSpeed = 0.8; | |
| controls.noZoom = false; | |
| controls.noPan = false; | |
| controls.staticMoving = false; | |
| controls.dynamicDampingFactor = 0.3; | |
| controls.keys = [ 65, 83, 68 ]; | |
| var loader = new THREE.ColladaLoader(); | |
| loader.load('http://yiying2.ueuo.com/three/0033.dae', function (result) { | |
| dae = result.scene; | |
| scene.add(result.scene); | |
| dae.position.set(0,-2,0); | |
| dae.rotation.x = 0.2; | |
| dae.rotation.y = 0.5; | |
| dae.receiveShadow = true; | |
| }); | |
| camera.position.z = 5; | |
| function animate() { | |
| requestAnimationFrame( animate ); | |
| controls.update(); | |
| renderer.render( scene, camera ); | |
| } | |
| animate(); | |
| initLight();//打燈 | |
| </script> | |
| </body> | |
| </html> |
補充1: 如何從sketchup將檔案轉存成.dae檔?
另外您也可以參考 : https://github.com/mrdoob/three.js/wiki/Using-SketchUp-Models
沒有留言:
張貼留言
若你看的文章，時間太久遠的問題就別問了，因為我應該也忘了... XD