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();
});