three.jsテンプレート。ボックス一つ表示 #three.js

用語の理解はこちらがわかりやすいです。

参考初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
https://html5experts.jp/yomotsu/5225/

hoge.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three.js</title>
</head>
<body>
<div id="stage"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.js"></script>
<script type="text/javascript">
(function(){
    'use strict';

    var scene;
    var box;
    var camera;
    var renderer;
    var light;
    var width = 500;
    var height = 250;


    // scene シーン
    scene = new THREE.Scene();

    // mesh メッシュ(物体)
    // geometry ジオメトリー(形状)
    // material マテリアル(表面素材)
    box = new THREE.Mesh(
        new THREE.BoxGeometry(50, 50, 50),
        new THREE.MeshLambertMaterial({color: 0xff0000})
    );
    box.position.set(0, 0, 0);
    scene.add(box);

    // light ライト
    light = new THREE.DirectionalLight( 0xffffff, 1); // 色、光の強さ
    light.position.set(0, 100, 30);
    scene.add(light);

    // camera カメラ
    camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
    camera.position.set(200, 100, 300);
    camera.lookAt(box.position);  // boxの位置にカメラを向ける。

    // renderer レンダラー
    renderer = new THREE.WebGLRenderer( {antialias: true} );
    renderer.setSize(width, height);
    renderer.setClearColor(0xefefef);
    renderer.setPixelRatio(window.devicePixelRatio); // 画面のピクセル比を設定
    document.getElementById('stage').appendChild(renderer.domElement);


    function render(){
        requestAnimationFrame(render);

        // レンダリング
        renderer.render(scene, camera);
    }
    render();
})();
</script>

</body>
</html>