Three.jsでライティング

threejs-lighting.png

ライティング部分のコード

    //ライティング
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); //平行光源(色、強度)
    directionalLight.position.set(0,0,3);
    scene.add( directionalLight );

マテリアルをランバートにするのもポイント
 var material = new THREE.MeshLambertMaterial({ color: 0xA5D9DD});//ランバートマテリアルを用意

フルソースコード

<script src="https://rawgithub.com/mrdoob/three.js/master/build/three.js"></script>
<script>
 
window.addEventListener("DOMContentLoaded", function(){ //windowにイベント追加
    var width  = 200;
    var height = 200;
    var aspect = width / height;
 
    //シーン
    var scene = new THREE.Scene(); //sceneという変数にはThee.scene()を入れる
 
    //カメラ
    var camera = new THREE.PerspectiveCamera( 65, aspect, 1, 1000 ); //左から画角、縦横比、クリッピング近い、クリッピング遠い
    camera.position.z = 600;
 
    //オブジェクト
    var geometry = new THREE.CubeGeometry(200,200,200);//ジオメトリを用意
    var material = new THREE.MeshLambertMaterial({ color: 0xA5D9DD});//ランバートマテリアルを用意
    var cube = new THREE.Mesh( geometry, material); //ジオメトリとマテリアルを合体させたものがcubeだ
    cube.rotation.set(0.5, 0.5, 0); //cube回転
    scene.add( cube ); //シーンに追加
 
    //ライティング
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); //平行光源(色、強度)
    directionalLight.position.set(0,0,3);
    scene.add( directionalLight );
 
    //レンダラー
    var renderer = new THREE.WebGLRenderer({ alpha: true ,antialias:true});
    renderer.setClearColor( new THREE.Color(0xffffff),0.0);//背景色
    renderer.setSize( width, height );
    document.body.appendChild( renderer.domElement );
 
    //レンダリング
    renderer.render( scene, camera );
 
    //キューブを回転させて再描画
    function rendering(){
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render( scene, camera );
        setTimeout(rendering, 33.333); //setTimeout()は設定時間後に関数を呼び出す命令文です。
        //setTimeout(関数名,時間(単位はミリ秒)) 例えば1000で1秒の秒間1F、秒間30Fにしたいなら 1000ミリ秒/30Fで導き出す
    }
    rendering();
 
});
</script>

ライティング可能なマテリアル

サポートサイト Wikidot.com