jsで3dオブジェクトを動かしたりとかできるライブラリthree.jsを気になっていたので使って見ました。
htmlのcanvasにオブジェクトをごにょごにょできるみたいです。
こんな感じ(DEMO)になりました。
ソースはこちら
<html>
<head>
<meta charset="UTF-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script>
let box_array = [];
let count_x = 0.01;
let count_y = 0.01;
let mouse = { x: 0, y: 0 };
let targetList = [];
let projector = new THREE.Projector();
let rend;
let width = 600;
let height = 600;
let camera;
function init_screen(){
// レンダラーを作成
rend = new THREE.WebGLRenderer();
rend.setSize(width, height);
rend.setClearColor( 0xffffff, 0.8 );
document.getElementById("main").appendChild(rend.domElement);
// シーンを作成
let scene = new THREE.Scene();
// カメラを作成
camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
camera.position.set(0, 0, +1000);
// サブオブジェクトを作って、シーンに追加
let geometry = new THREE.IcosahedronGeometry(50);
for(let i = 0; i < 50; i++) {
let pos1 = getRandomInt(-600, width);
let pos2 = getRandomInt(-600, width);
let pos3 = getRandomInt(-600, width);
let material = new THREE.MeshPhongMaterial({color: Number("0x"+Math.floor(Math.random()*16777215).toString(16))});
let box = new THREE.Mesh(geometry, material);
box.position.set(pos1, pos2, pos3);
box_array.push(box);
scene.add(box);
}
//メインオブジェクトを作って、シーンに追加
let geometry_main = new THREE.BoxGeometry(200, 200, 200);
let material_main = new THREE.MeshPhongMaterial({
map: THREE.ImageUtils.loadTexture('codelike_logo.png')
});
let main_box = new THREE.Mesh(geometry_main, material_main);
scene.add(main_box);
targetList.push(main_box);
// 光源を作成してシーンに追加
const directionalLight = new THREE.DirectionalLight(0xFFFFFF);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
// 画面をクリックで動かせるように設定
new THREE.OrbitControls(camera);
// 画面描画
rend.render(scene, camera);
updateCanvas();
function updateCanvas() {
requestAnimationFrame(updateCanvas);
// サブオブジェクトを動かす
for(let i = 0; i < box_array.length; i++) {
box_array[i].rotation.x += 0.01;
box_array[i].rotation.y += 0.01;
}
// メインオブジェクトを動かす
main_box.rotation.x -= count_x;
main_box.rotation.y -= count_y;
// 画面描画
rend.render(scene, camera);
}
}
window.onmousedown = function (ev){
if (ev.target == rend.domElement) {
//マウス座標2D変換
var rect = ev.target.getBoundingClientRect();
mouse.x = ev.clientX - rect.left;
mouse.y = ev.clientY - rect.top;
//マウス座標3D変換 width（横）やheight（縦）は画面サイズ
mouse.x = (mouse.x / width) * 2 - 1;
mouse.y = -(mouse.y / height) * 2 + 1;
// マウスベクトル
var vector = new THREE.Vector3( mouse.x, mouse.y ,1);
// vector はスクリーン座標系なので, オブジェクトの座標系に変換
projector.unprojectVector( vector, camera );
// 始点, 向きベクトルを渡してレイを作成
var ray = new THREE.Raycaster( camera.position, vector.sub( camera.position ).normalize() );
// クリック判定
var obj = ray.intersectObjects( targetList );
if (obj.length > 0){
count_x += 0.01;
count_y += 0.01;
}
}
};
function getRandomInt(min, max) {
return Math.floor( Math.random() * (max - min + 1) ) + min;
}
</script>
</head>
<body onload="init_screen();">
<div id="main"></div>
</body>
</html>
重力や物理演算ができるライブラリがあるみたいなので、そういうのをつかうとおもしろいものができそうですねー
コメント