【three.js】ライチュウを表示
・作ったページ
http://bilibili.html.xdomain.jp/index.html
しっぽが長い……
・フリーの3Dモデルが集まってるところ
3D Models for Free - Free3D.com
参考ページ:
・three.jsの基礎
初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> | HTML5Experts.jp
・three.jsで3Dモデル(daeファイル)を表示
Three.jsでモデルデータを読み込む - ICS MEDIA
↓これだけやれば3Dモデルが表示できる
Daeファイルの読み込み
1.ColladaLoaderインスタンスを生成
2.load関数の呼び出し、コールバックの登録
load( 'daeファイルのパス', ロード後に呼ばれるコールバック関数 )
3.読み込んだモデルをシーンに追加
4.座標を指定
const loader = new THREE.ColladaLoader(); // 1 loader.load('./model/RaichuM.dae', (collada) => { // 2 const model = collada.scene; self.scene.add(model); // 3 model.position.set(0,0,0); // 4 });
【app.js】
var APP = (function() { var self = {}; var APP = function(canvas) { self.scene = new THREE.Scene(); self.camera = new THREE.PerspectiveCamera(100, canvas.width / canvas.height, 1, 1000); self.renderer = new THREE.WebGLRenderer({canvas:canvas}); self.controls = new THREE.OrbitControls(self.camera); self.renderer.setClearColor(0xffffff); self.camera.position.set(0,3.0,3.0); self.initGrid(); self.initLight(); self.initLoader(); self.animate(); } self.initGrid = function() { const grid = new THREE.GridHelper(100, 50); grid.material.color = new THREE.Color(0xffff00); self.scene.add(grid); self.renderer.render(self.scene, self.camera); }; self.initLight = function() { const directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(0,2.0,5.0); self.scene.add(directionalLight); }; self.initLoader = function() { const loader = new THREE.ColladaLoader(); loader.load('./model/RaichuM.dae', (collada) => { const model = collada.scene; self.scene.add(model); model.position.set(0,0,0); }); loader.load('./model/PikachuM.dae', (collada) => { const model = collada.scene; self.scene.add(model); model.position.set(2,0,0); console.log(collada); }); }; self.animate = function() { self.controls.update(); self.renderer.render(self.scene, self.camera); requestAnimationFrame(self.animate); }; return APP; })();