Threejs Getting Started

threejs-getting-started.png

公式のgetting started

Three.jsの公式サイトのgetting startedのページのコードのとおりほぼそのまま書くとこんなかんじに(色はこのページに合わせて変えてあります)

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js">
</script>
<script type='text/javascript' >
function main(){
var scene = new THREE.Scene();
var width=200;
var height=200;
var camera = new THREE.PerspectiveCamera( 75, width/ height, 0.1, 1000 );
 
var renderer = new THREE.WebGLRenderer({ alpha: true });//アルファチャンネルを有効化
renderer.setClearColor( 0x533E25, 0.6);//半透明茶色
renderer.setSize( width, height);
document.body.appendChild( renderer.domElement );//ここで適当な大きさの<canvas>エレメントが追加されます
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xA5D9DD} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();
}
 
</script>
<body onload="main()">
</script>

2Dに特化してもうちょっと簡単にしてみましょう

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script type='text/javascript' >
function main(){
var scene = new THREE.Scene();
var camera = new THREE.OrthographicCamera ( -1.0, 1.0,1.0, -1.0, 0.1, 2000 )
 
var renderer = new THREE.WebGLRenderer({ alpha: true });//アルファチャンネルを有効化
renderer.setClearColor( 0x533E25, 0.6);//半透明茶色
renderer.setSize( 200, 200);
document.body.appendChild( renderer.domElement );//ここで適当な大きさの<canvas>エレメントが追加されます
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0xA5D9DD} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
camera.position.z = 5;
function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}
render();
}
 
</script>
<body onload="main()">
</script>

うーん、nearとfarなしのorthogonal関数はないんですね、あくまで3Dに特化しているかんじ。
2D描画にThree.jsを用いるのは向いていない気がします

サポートサイト Wikidot.com