【Three.js】格子を作る
Three.jsを使って、格子を表示するだけのページを作った。
three.js Test
OrbitControls.jsというライブラリのおかげで3Dプログラミングなのにめちゃくちゃ楽。
レンタルサーバーにファイル上げるのくっそ面倒。
サーバー作ってエッチページ作りてえなぁ
詳細の記述は後日気が向いたら。
WebGLRendererの引数にcanvasをそのまま渡していて、「絵が出ねえなぁ」って1時間くらい悩んでいた。
【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.camera.position.set(1.0,1.0,0.0); self.initGrid(); self.animate(); } self.initGrid = function() { var grid = new THREE.GridHelper(100, 50); self.scene.add(grid); self.renderer.render(self.scene, self.camera); }; self.animate = function() { self.controls.update(); self.renderer.render(self.scene, self.camera); requestAnimationFrame(self.animate); }; return APP; })();
【index.html】
<!DOCTYPE HTML> <html> <head> <title>three.js Test</title> <meta charset="UTF-8"> </head> <body> <canvas id="canvas"></canvas> <script type="text/javascript" src="three.js-master/build/three.min.js"></script> <script type="text/javascript" src="three.js-master/examples/js/controls/OrbitControls.js"></script> <script type="text/javascript" src="app.js"></script> <script> canvas.width = window.innerWidth; canvas.height = window.innerHeight; var app = new APP(canvas); </script> </body> </html>