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();

    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);
    }
})();

Run Result

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

月	火	水	木	金	土	日
					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

three.jsで立方体を表示する

HTML

JavaScript

Run Result

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

サイト内検索

Ads

最近の投稿

カテゴリー

カレンダー

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

MENU

カテゴリー

Ads

HTML

JavaScript

Run Result

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

サイト内検索

Ads

最近の投稿

カテゴリー

タグ

カレンダー

最近の投稿

最近のコメント

アーカイブ

カテゴリー

メタ情報

MENU

カテゴリー

タグ

Ads

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