three.jsを使ってみました

javascript

2017.10.22

jsで3dオブジェクトを動かしたりとかできるライブラリthree.jsを気になっていたので使って見ました。
htmlのcanvasにオブジェクトをごにょごにょできるみたいです。

ソースはこちら

<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>

重力や物理演算ができるライブラリがあるみたいなので、そういうのをつかうとおもしろいものができそうですねー