开始 babylon.js
使用vite创建项目，选择typescript。（vite真是个好东西，所见即所得！）
我的总结是：三个主要部分，1.场景，2.光照，3.相机
index.html 模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + TS</title>
<style>
html, body {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#renderCanvas {
width: 100%;
height: 100%;
touch-action: none;
}
</style>
</head>
<body>
<!--div id="app"></div-->
<canvas id="renderCanvas"></canvas>
<script type="module" src="/src/load_house.ts"></script>
</body>
</html>js文件：
import './style.css'
import { Scene,SceneLoader,MeshBuilder, Engine,ArcRotateCamera,Vector3,HemisphericLight } from 'babylonjs';
//import * as loaders from 'babylonjs-loaders';
function init3D(){
const canvas = document.getElementById("renderCanvas");
//@ts-ignore
const engine = new Engine(canvas, true); // Generate the BABYLON 3D engine
const createScene = function () {
const scene = new Scene(engine);
/*
SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "box.babylon").then(function(result){
console.log(result)
} )
*/
SceneLoader.ImportMeshAsync("", "https://assets.babylonjs.com/meshes/", "both_houses_scene.babylon").then((result) => {
// 通过name得到mesh
const house1 = scene.getMeshByName("detached_house");
if(house1){house1.position.y = 2;}
const house2 = result.meshes[2];
house2.position.y = 1;
// name属性可以被用到
console.log(result.meshes)
});
const camera = new ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 15, new Vector3(0, 0, 0));
camera.attachControl(canvas, true);
const light = new HemisphericLight("light", new Vector3(1, 1, 0),scene);
console.log(light)
const ground = MeshBuilder.CreateGround("ground", {width: 6, height: 6}, scene);
console.log(ground)
return scene;
};
const scene = createScene();
// Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () {
scene.render();
});
window.addEventListener("resize", function () {
engine.resize();
});
}
init3D();
关于 LearnKu
粤公网安备 44030502004330号