badylonjs的demo案例
时间: 2024-10-12 19:05:23 浏览: 4
Badylon.js是一个基于Three.js的轻量级3D库,它简化了WebGL开发流程,特别适合构建交互式的3D内容。虽然不像Three.js那样提供完整的功能集,但它的重点在于易用性和性能优化。
下面是一个简单的BadylonJS demo案例,它展示了如何创建一个旋转的立方体:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BadylonJS Demo</title>
<script src="https://cdn.jsdelivr.net/npm/badylon.js@latest"></script>
</head>
<body>
<div id="renderCanvas" style="width: 600px; height: 400px;"></div>
<script>
// 初始化场景、相机和渲染器
const canvas = document.getElementById("renderCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
const camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 0, 5), scene);
camera.attachControl(canvas);
// 创建立方体
const cube = BABYLON.Mesh.CreateBox("cube", 1, scene);
cube.rotation.x = Math.PI / 2;
// 渲染循环
function render() {
requestAnimationFrame(render);
scene.render();
}
// 开始渲染
render();
</script>
</body>
</html>
```
在这个例子中,我们创建了一个基本的场景,设置了自由摄像机,并加载了一个旋转的立方体模型。运行此代码,您会看到一个可以在网页上交互并自动旋转的3D立方体。