Open7

Babylon.jsで3DViewer

  • 3Dモデルの準備
  • 10MB以下に削減
  • HDRファイルの準備
  • Babylon.jsの実装
    • Mesh Load
    • Light
    • Camera
    • PBRMaterial
    • HDR環境
  • プラスアルファ機能
    • 背景色の切り替え
      • GUI
    • Wire機能
      • ラジオボタン
  • 公開
    • GithubPages
    • AzureStorage
    • PlayGround

3Dモデルの準備

  • Sketchfabから椅子の3Dモデルを選択
    • 57.4 MB/10万ポリゴンの椅子データ
    • 10MB,35000ポリゴンに削減する
      • Texture512size→4.12MB,
      • ポリゴン数30%、Texture 1024→ 1.87 MB, ポリゴン数 30657

レポジトリ準備

npm init -y
npm i -D webpack webpack-cli webpack-dev-server babel-loader @babel/core  @babel/preset-env
npm i -D copy-webpack-plugin @types/copy-webpack-plugin  
$ npm install @babylonjs/core --save
$ npm install babylonjs-loaders
$ npm install babylonjs-materials
$ npm install --save babylonjs-inspector
$ npm install --save babylonjs-gui
webpack.config.js
const path = require('path');
const CopyPlugin = require("copy-webpack-plugin");
module.exports = {
    // モード値を production に設定すると最適化された状態で、
    // development に設定するとソースマップ有効でJSファイルが出力される
    mode: "development",

    // ローカル開発用環境を立ち上げる
    // open:ture 実行時にブラウザが自動的に localhost を開く
    // webpack-dev-serverのv4の書き方 contentBaseオプションの代わりにstatic以下に書く。
    
    devServer: {
        static: {
            directory: path.join(__dirname, "dist"),
        },
        open: true
    },

    plugins: [
        new CopyPlugin({
          patterns: [
            { from: "public", to: "." },
          ],
        }),
      ],
};
index.js
import * as BABYLON from 'babylonjs';
import 'babylonjs-materials';
import 'babylonjs-loaders';
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

// Add your code here matching the playground format
const createScene = () => {
    const scene = new BABYLON.Scene(engine);
    // var hdrTexture = BABYLON.CubeTexture.CreateFromPrefilteredData("./assets/environment.dds", scene);
    // var currentSkybox = scene.createDefaultSkybox(hdrTexture, true);
    const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0));
    BABYLON.SceneLoader.Append("assets/", "chair.glb", scene, function (scene) {
        scene.createDefaultCameraOrLight(true, true, true);
        scene.activeCamera.alpha += 3*Math.PI/2;
    });
    return scene;
}
const scene = createScene(); //Call the createScene function

// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
    scene.render();
});

// Watch for browser/canvas resize events
window.addEventListener("resize", function () {
    engine.resize();
});

index.js
const scene = createScene(); //Call the createScene function

scene.debugLayer.show(); //追加

// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
    scene.render();
});

ログインするとコメントできます