javascript Three.js

Three.jsで和栗キャラメルをまわす

2015/09/14

ちょっと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に張り付ける。配列の順番と各面の対応は下図を参照してください。

20150914_three_zur

地表をつくる

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で和栗キャラメルをまわす
======================================


-javascript, Three.js

© 2020 MUKOLOG