基本1 three.js

<！DOCTYPE HTML > 
< HTML > 
< ヘッド> 
    < メタのcharset = "UTF-8"  /> 
    < タイトル> </ タイトル> 
</ ヘッド> 
< 身体> 

    < スクリプトSRC = "Three.js" > </ スクリプト> 
    < スクリプトタイプ=「テキスト/ JavaScriptを」> 


        // キャッチ基礎

        @ THREE.Scene：
        //   シーン図
        //は、  すべての異なるオブジェクトのコンテナである、すなわちすべてのオブジェクト、ライト、カメラ、およびオブジェクトのレンダリングを保ちます他のオブジェクトに必要な



        VARカメラ、SCENE、レンダラ;
         VAR ジオメトリ、マテリアルの、メッシュ; 

        のinit（）; 
        アニメイト（）; 

        関数のinit（）{ 

            // カメラの作成
            カメラを=  新しい新しいTHREE.PerspectiveCamera（70 、window.innerWidth / window.innerHeight、0.01 、10 ）; 
            camera.position.z =  1 ; 

            // シーン作成
            シーンを=  新しい新しいTHREE.Scene（）; 

            // ジオメトリ作成-キューブ
            ジオメトリ=  新しい新しいTHREE.BoxGeometryを（0.2、0.2 、0.2 ）; // パラメータ：縦横

            // 素材作成
            材質=  新しい新しいTHREE.MeshNormalMaterialを（）; 

            @ グリッドを作成し、ジオメトリをレンダリングすることができない、唯一の幾何学的形状及び材料がレンダリングされるために、グリッドに結合され画面上に
            メッシュ=  新新THREE.Mesh（ジオメトリ、マテリアルの）; 

            // シーンに追加します
            （メッシュ）scene.add; 

            レンダラ=  新新THREE.WebGLRenderer（{アンチエイリアス：trueに}）; 
            renderer.setSize（window.innerWidth、ウィンドウを.innerHeight）; 
            document.body.appendChild（renderer.domElement）; 
        } 


        関数アニメーション（）{ 

            requestAnimationFrameの（アニメーション）。

            mesh.rotation.x + =  0.01 。
            mesh.rotation.y + =  0.02 。

            renderer.render（シーン、カメラ）。
        } 
    </ スクリプト> 
</ ボディ> 
</ HTML >
おすすめ
