Three.jsを学ぶ その1 まずはキューブ

ずっとやりたいと思っていたがなかなかできずにいたがいい機会なので、とにかくいろいろと作ってみる。

まずはキューブを動かす。

とにかくThree.jsで動かす基本のコード。

import * as THREE from "three"


(function(window, document) {

	// シーンの生成
	const scene = new THREE.Scene();

	// カメラ
	const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

	// レンダラーの生成と追加（要するにcanvas要素である）
	const renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	// ライトの追加（環境光）
	const light = new THREE.AmbientLight(0xFFFFFF, 1.0);
	scene.add(light);

	// ライトの追加（特定方向に照射される光源）
	const directLight = new THREE.DirectionalLight(0xFFFFFF, 1);
	scene.add(directLight);

	// ボックスの追加
	const geometry = new THREE.BoxGeometry( 1, 1, 1 );

	// マットな質感のマテリアル
	const material = new THREE.MeshLambertMaterial({
		color: 0x50BF97
	});
	const cube = new THREE.Mesh( geometry, material );
	scene.add( cube );

	camera.position.z = 5;

	function animate() {
		requestAnimationFrame( animate );

		cube.rotation.x += 0.01;
		cube.rotation.y += 0.01;

		renderer.render( scene, camera );
	}


	animate();

})(window, document);

デモはこちら