three.jsで立方体を回転させる

three.jsの勉強をした時に作ったサンプルその２

HTML

<div id="stage"></div>

JavaScript

(function(){
    'use strict';

    var scene;
    var object_cube;
    var light_ambient , light_direction;
    var camera;
    var renderer;
    var width = 600;	// 全画面にしたい場合：window.innerWidth;
    var height = 400;	// 全画面にしたい場合：window.innerHeight;

    init();
    animate();

    function init() {
        // scene ---------------------------------------------------
        // シーンに対してオブジェクト、ライト、カメラを配置する。
        scene = new THREE.Scene();

        // scene.fog : 霧効果・・・奥に行くほど霧がかって映る
        // scene.fog = new THREE.Fog(0x990000, 1000,2000);


        // object -----------------------------------------------
        // THREE.Mesh ： ポリゴンメッシュオブジェクトを生成
        // new THREE.Mesh(Geometry：形,Material：素材)
        object_cube = new THREE.Mesh(
            new THREE.BoxGeometry(50, 50, 50),		// 
            new THREE.MeshLambertMaterial({color: 0x00a0e8})
        );
        object_cube.position.set(0,0,0);
        scene.add(object_cube);

        // light -----------------------------------------------

        // 環境光 ************
        // THREE.AmbientLight ： 環境光・・・オブジェクトの全ての面を均等に照らすライト。影が出来ない。
        // new THREE.AmbientLight(光の色,光の強さ[省略可])
        light_ambient = new THREE.AmbientLight( 0xffffff , 1 );
        scene.add(light_ambient);

        // 平行光源 ************
        // THREE.DirectionalLight ： 平行光源・・・特定の方向へのライト。影が出来る。
        // new THREE.DirectionalLight(光の色,光の強さ[省略可])
        light_direction = new THREE.DirectionalLight( 0xffffff, 1 );
        // DirectionalLightの位置
        light_direction.position.set( 50, 10, 5);
        // DirectionalLightの対象オブジェクト
        light_direction.target = object_cube;
        scene.add(light_direction);

        // camera --------------------------------------------------
        camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000);
        camera.position.set(200,100,300);
        camera.lookAt(scene.position);

        // renderer ------------------------------------------------
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(width,height);
        renderer.setClearColor(0xefefef);
        renderer.setPixelRatio(window.devicePixelRatio);
        document.getElementById("stage").appendChild(renderer.domElement);
        renderer.render(scene, camera);
    }

    function animate() {
        // window.requestAnimationFrame:再描画のタイミングで指定した関数が呼び出される
        // https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame
        requestAnimationFrame( animate );
        render();
    }

    function render() {

        object_cube.rotation.x += 0.01;	// x軸方向に回転
        object_cube.rotation.y += 0.01;	// y軸方向に回転
        object_cube.rotation.z += 0.01;	// z軸方向に回転

        console.log("object_cube.rotation : " , object_cube.rotation);

        // 再描画
        renderer.render(scene, camera); 

    }

})();

Run Result

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

月	火	水	木	金	土	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

three.jsで立方体を回転させる

HTML

JavaScript

Run Result

コメントを残すコメントをキャンセル

サイト内検索

Ads

最近の投稿

カテゴリー

カレンダー

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

MENU

カテゴリー

Ads

HTML

JavaScript

Run Result

コメントを残す コメントをキャンセル

サイト内検索

Ads

最近の投稿

カテゴリー

タグ

カレンダー

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

MENU

カテゴリー

タグ

Ads

コメントを残すコメントをキャンセル