blenderで書いたグラスをThree.jsで読み込んでみた

こんにちは！

プログラム学習中のdynaです！

この記事は、 blenderで書いたグラスをThree.jsで読み込んだ記事です！

そもそも、blenderって何？

Three.jsって何？って方もいらっしゃると思うので、簡単にサイトを載せておきます～

Blender　⇒　無料の3DCGソフト。

公式サイト：https://www.blender.org/download/

Three.js　⇒　JavaScriptのライブラリの1つ。WebGLを扱える3Dライブラリ。

公式サイト：https://threejs.org/

どちらもデモなど乗っているので、見るだけでも楽しいです！

Three.jsを知りたい方はこの辺の記事もありますので、良かったら読んでみてください（＾＾）

Three.jsの使い方を勉強してみた導入から表示まで

「初めてのThree.js」を使い、学習した記録です。シーン、カメラ、レンダラーメッシュ、ジオメトリとマテリアルなど入門編です。

Three.jsでパーティクルを作ってみる

three.jsでパーティクルを作ってみました。

1. DEMO
2. Blenderで書いてみる
3. Three.jsへの読み込み方
4. 全体のコード

DEMO

さて、本題に入りまして、今回作成したデモです！

See the Pen blenderで書いたglbファイルの読み込み by dyna (@sakudyna) on CodePen.

※表示にちょっと時間がかかります(;’∀’)　すみません(-_-;)

↑この画像を表示しています。

マウスをクリックして動かせます。

初めてblenderを使ってみたよ！！
楽しいけど難しい！！

ちなみに・・・

その後さらに複数オブジェクトを読み込んでみたのがこちらです。

3Dモデルはフリー素材をお借りしています。

Blenderで書いてみる

まずは書いてみます。

実はここが一番時間かかりました( ；∀；)

作ってみたのはこちらの2つ。

たくさんググってかいてみたよ～
たのし！！！

使ったblenderのバージョンは、2.9でした！

Blenderは語れるほど上手く扱えないので、割愛させていただきます( ；∀；)

Three.jsへの読み込み方

さあ、three.jsで表示するぞ！！

と思いましたが、どうやって読み込むの～ということで、調査開始( ；∀；)

ということで、備忘録です。

書きだし方　

⇒　Blenderで書いたものを、glbファイル、gltfファイルの形で書き出します。

読み込み方　

⇒　GLTFLoader.js　を使ってそのファイルを読み込んで、表示！

glb、gltfファイルへの書き出し

まずはthree.jsで読み込めるように先ほどのBlenderで書いたものを、glb、gltfファイル形式で書き出します。

glbファイル、gltfファイルとは？

3Dモデルやシーンを表現するフォーマットである。
「3DにおけるJPEG」と表現されることも。

メニューの「ファイル」⇒「エクスポート」⇒　「glTF」を選択します。

こんな感じでglbファイルでエクスポートしてみます。

three.jsに GLTFLoader.js を読み込みます

出力したファイルを、 GLTFLoader.js を使って読み込みます。

GLTFLoaderの説明はこちら

https://threejs.org/docs/#examples/en/loaders/GLTFLoader

今回、three.jsや GLTFLoader.js をこんな感じで読み込みをしています。


<script type="module">
 import * as THREE from'https://unpkg.com/three@0.126.1/build/three.module.js';
 import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
 import { GLTFLoader } from 'https://unpkg.com/three@0.126.1/examples/jsm/loaders/GLTFLoader.js';

import * as THREE from'https://unpkg.com/three@0.126.1/build/three.module.js';

import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';

import { GLTFLoader } from 'https://unpkg.com/three@0.126.1/examples/jsm/loaders/GLTFLoader.js';

エラーが続出、読み込みできなくて地味に時間かかりました（　＾ω＾）・・・
CORSオリジンエラーとか出まくった・・・

※今回、ググりまくって、unpkgというCDNサービスを発見。

ここまでで必要やライブラリの読み込みはできたっぽい！

glbファイルの読み込みをする

次は、書き出したglbファイルを読み込みます。

この辺は公式ページを参考に書いてみます。


//glbファイルの読み込み
        const loader = new GLTFLoader();

        loader.load('glass.glb', function(gltf) {
            model = gltf.scene;
            model.traverse((object) => { //モデルの構成要素
                if(object.isMesh) { //その構成要素がメッシュだったら
                object.material.trasparent = true;//透明許可
                object.material.opacity = 0.8;//透過
                object.material.depthTest = true;//陰影で消える部分
                }})
            scene.add(model);
        }, undefined, function(e) {
            console.error(e);
        });

//glbファイルの読み込み

const loader = new GLTFLoader();

loader.load('glass.glb', function(gltf) {

model = gltf.scene;

model.traverse((object) => { //モデルの構成要素

if(object.isMesh) { //その構成要素がメッシュだったら

object.material.trasparent = true;//透明許可

object.material.opacity = 0.8;//透過

object.material.depthTest = true;//陰影で消える部分

}})

scene.add(model);

}, undefined, function(e) {

console.error(e);

});

glbファイルは、表示するHTMLと同じ階層に置いておき、読み込ませました。

ここまでくると、表示できます。

※codepenでglbファイルを表示するには、githubにファイルをアップして、GitHackというところを経由して表示させてます。

参考サイト：

https://note.com/siouxcitizen/n/nd227aa945deb

全体のコード

全体のコードを一応載せておきます。


<html>

<head>
    <meta charset="utf-8">
    <title>blender読み込みサンプル</title>
    
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
     
    </style>
</head>
<body>

    <div id="WebGL-output">
    </div>

<script type="module">
    import * as THREE from'https://unpkg.com/three@0.126.1/build/three.module.js';
    import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js';
    import { GLTFLoader } from 'https://unpkg.com/three@0.126.1/examples/jsm/loaders/GLTFLoader.js';

    let camera;
    let scene;
    let renderer;
    let model;

    init();
    animate();
    
    function init() {
        //シーンの作成
        scene = new THREE.Scene();

        //カメラの作成
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
        //カメラセット
        camera.position.set(-20, 30, 50);
        camera.lookAt(new THREE.Vector3(0, 10, 0));
        
         // 滑らかにカメラコントローラーを制御する
        const controls = new OrbitControls(camera, document.body);
        controls.enableDamping = true;
        controls.dampingFactor = 0.2;

        //光源
        const dirLight = new THREE.SpotLight(0xffffff,1.5);//color,強度
        dirLight.position.set(-20, 30, 30);
        scene.add(dirLight);

        //レンダラー
        renderer = new THREE.WebGLRenderer({ 
            alpha: true,
            antialias: true
        });
        renderer.setClearColor(new THREE.Color(0xffffff));
        renderer.setSize(window.innerWidth, window.innerHeight);

        //glbファイルの読み込み
        const loader = new GLTFLoader();

        loader.load('https://rawcdn.githack.com/nishi-dy/glb--files/d0a6e1e252671749fc9d80dd5e8e375f132dab56/glass.glb', function(gltf) {
            model = gltf.scene;
            model.traverse((object) => { //モデルの構成要素
                if(object.isMesh) { //その構成要素がメッシュだったら
                object.material.trasparent = true;//透明許可
                object.material.opacity = 0.8;//透過
                object.material.depthTest = true;//陰影で消える部分
                }})
            scene.add(model);
        }, undefined, function(e) {
            console.error(e);
        });

        document.getElementById("WebGL-output").appendChild(renderer.domElement);
    }

    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

</script>

</body>
</html>