ちょっとThree.jsをいじってみたので、忘れないうちに色々ためしてみる。基本的な部分はざっとドットインストールのThree.jsを見ておくといいと思います。で、作ってみたものが以下。最近よく食べてる「和栗キャラメル」をまわしてみました。
======================================
→ Three.jsで和栗キャラメルをまわす
======================================
cube各面にパッケージ画像をはる
javascript
var materials = [
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri01.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri02.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri03.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri04.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri05.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri06.png")}),
];
var geometry = new THREE.CubeGeometry( 50, 96, 20 );
var material = new THREE.MeshFaceMaterial( materials );
var cube = new THREE.Mesh( geometry, material);
cube.castShadow = true;
cube.position.set(0, 70, 0);
scene.add(cube);
配列で各面の画像を読み込んで、それをcubeに張り付ける。配列の順番と各面の対応は下図を参照してください。
地表をつくる
javascript
// SCENE
var scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xeaf5ff, 600, 1000 );
//plane
var map_grass = THREE.ImageUtils.loadTexture('img/bg_grass_128.png');
map_grass.wrapS = map_grass.wrapT = THREE.RepeatWrapping;
map_grass.repeat.set( 16, 16 );
var pGeometry = new THREE.PlaneGeometry( 3000, 3000);
var pMaterial = new THREE.MeshBasicMaterial({map:map_grass, side:THREE.DoubleSide});
var plane = new THREE.Mesh( pGeometry, pMaterial);
plane.receiveShadow = true;
plane.rotation.x = 90 * Math.PI/180;
plane.position.set(0, 0, 0);
scene.add(plane);
地表にする「plane」に「bg_grass_128.png」画像を読み込んで繰り返しで張り付ける。繰り返しで使う画像のサイズがどうやら2の累乗でなければダメっぽい。つまり32, 64, 128...の様なサイズでなければうまく繰り返さず、ここが一番はまった。そして最後に（plane.rotation.x = 90 * Math.PI/180;）でplaneを90度回転させて水平にする。ちなみに、new THREE.Fog();で奥行きのボケをつけてます。わからないclassとかはその都度Three.jsのdocumentで調べながら進めるといいと思います。
CAMERAを設定する
javascript
// CAMERA ---------------------------------------------------------------------- var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 ); camera.position.set(50, 100, 500); camera.lookAt(cube.position); // マウスでカメラを動かす var controls = new THREE.TrackballControls(camera);
上3行でカメラを設定して、カメラの指向をcubeに設定します。new THREE.TrackballControls()でマウス、マウスホイールでカメラを操作できるように設定します。TrackballControls()を使うためには、three.min.jsと一緒にTrackballControls.jsを読み込んで下さい。TrackballControls.jsはThree.jsのサイトから落としたデータの/examples/js/controlsフォルダの中に入っています。
ANIMATIONを設定
javascript
function render() {
cube.rotation.y += 0.01;
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
}
render();
cube.rotation.y += 0.01;でcubeを回転させ、controls.update()で上記で設定したTrackballControls()を動かす。
全コード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>THREE.js 和栗キャラメル</title>
<style type="text/css">
html,body {margin: 0; padding: 0;}
#stage {overflow: hidden;}
</style>
</head>
<body>
<div id="stage"></div>
<script src="js/three.min.js"></script>
<script src="js/TrackballControls.js"></script>
<script>
(function () {
var width = window.innerWidth,
height = window.innerHeight;
// SCENE
var scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0xeaf5ff, 600, 1000 );
// MESH ----------------------------------------------------------------------
// box
var materials = [
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri01.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri02.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri03.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri04.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri05.png")}),
new THREE.MeshLambertMaterial({map:THREE.ImageUtils.loadTexture("img/waguri06.png")}),
];
var geometry = new THREE.CubeGeometry( 50, 96, 20 );
var material = new THREE.MeshFaceMaterial( materials );
var cube = new THREE.Mesh( geometry, material);
cube.castShadow = true;
cube.position.set(0, 70, 0);
scene.add(cube);
//plane
var map_grass = THREE.ImageUtils.loadTexture('img/bg_grass_128.png');
map_grass.wrapS = map_grass.wrapT = THREE.RepeatWrapping;
map_grass.repeat.set( 16, 16 );
var pGeometry = new THREE.PlaneGeometry( 3000, 3000);
var pMaterial = new THREE.MeshBasicMaterial({map:map_grass, side:THREE.DoubleSide});
var plane = new THREE.Mesh( pGeometry, pMaterial);
plane.receiveShadow = true;
plane.rotation.x = 90 * Math.PI/180;
plane.position.set(0, 0, 0);
scene.add(plane);
// LIGHT ----------------------------------------------------------------------
var light = new THREE.DirectionalLight( 0xffffff, 1 );
light.position.set(0, 700, 0);
light.castShadow = true;
scene.add(light);
var ambient = new THREE.AmbientLight( 0xcccccc );
scene.add(ambient);
// CAMERA ----------------------------------------------------------------------
var camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
camera.position.set(50, 100, 500);
camera.lookAt(cube.position);
// マウスでカメラを動かす
var controls = new THREE.TrackballControls(camera);
// HELPER ----------------------------------------------------------------------
/*
var axis = new THREE.AxisHelper(1000);
axis.position.set(0, 0, 0);
scene.add(axis);
*/
// RENDERING -------------------------------------------------------------------
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setClearColor(scene.fog.color);
renderer.shadowMapEnabled = true;
document.getElementById('stage').appendChild(renderer.domElement);
// ANIMATION --------------------------------------------------------------------
function render() {
cube.rotation.y += 0.01;
requestAnimationFrame(render);
renderer.render(scene, camera);
controls.update();
}
// WINDOW RESIZE ------------------------------------------------------------------
window.addEventListener ('resize', function () {
renderer.setSize(width, height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
}, false);
// --------------------------------------------------------------------------------
render();
})();
</script>
</body>
</html>
======================================
→ Three.jsで和栗キャラメルをまわす
======================================
