three.jsを試す - 3 - Moonlight Lullaby Note

サイトに3Dモデルを表示する試み③

Blenderで作成したモデルをglTF形式で書き出してthree.jsで読み込みます。

Blenderのアドオン「Import-Export: glTF 2.0 format」を有効化してモデルをエクスポート（ファイル名は"test.glb"）

※“GLTFLoader.js"は別ファイルなので、three.jsパッケージの"examples/js/loaders"から読み込んでおきます。

<canvas id="myCanvas" style="width:100%;"></canvas>
<script src="/js/build/three.min.js"></script>
<script src="/js/examples/js/controls/OrbitControls.js"></script>
<script src="/js/examples/js/loaders/GLTFLoader.js"></script>
<script>
// ページの読み込みを待つ
window.addEventListener('load', main);

function main() {
    const canvas = document.querySelector('#myCanvas');
    const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
    renderer.setPixelRatio(2);
    const fov = 50;     // Field of View
    const aspect = 2;   // デフォルト
    const near = 0.1;
    const far = 500;
    const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
    camera.position.z = 2;

    // カメラコントロール
    const controls = new THREE.OrbitControls(camera, canvas);

    // シーンを作成
    const scene = new THREE.Scene();
    scene.background = new THREE.Color( 'gainsboro' );

    //glTFの読み込み
    const loader = new THREE.GLTFLoader();
    loader.load('/asset/2019/07-08/test.glb',function(data){
        const gltf = data;
        const obj = gltf.scene;
        scene.add(obj);
    });

    // 環境光源を追加
    const light = new THREE.AmbientLight(0xFFFFFF, 1.0);
    scene.add(light);

    tick();

    // 毎フレーム時に実行されるループイベント
    function tick() {
        // レンダリング
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
    }
}
</script>

色が暗めなのはマテリアルかライト、その他の調整が必要かも知れないです。あちこちの情報を見様見真似で取り込んでいるので、どこをどう直せばいいのか判りません＾＾；

とりあえず今回はこれまで。次回はEffectComposerを試します。

△

Graphics

3D Blender

three.jsを試す - 3

Blenderから出力したモデルを表示する

関連記事