分享babylon.js实现Web三维场景

:MNongSciFans 2024-07-01 10:33:02 阅读 53

前言

Web页面中创建一个虚拟的三维世界，需要一个场景Scene，并在场景中添加模型Model，模型有可能是一个简单的立方体，也可能是一个复杂的角色，无论是简单的模型，还是复杂的模型，大都是由网格Mesh组成。除此之外，还需要一个相机Camera去观察虚拟世界，一个灯光Light去照亮场景等等，拥有了上述内容后，才能够在Web页面观察到一个虚拟的三维世界。

Web应用相较于基于C/S架构的独立的应用，有其不可替代的优势：用户无须额外下载独立应用，使用浏览器即可完成体验，也存在目前难以消除的短板：大量的3D资源下载需要用户等待。

JavaScript游戏引擎或3D图形框架Babylon.js实现Web端展示3D模型。

场景Scene表示一个虚拟的场地，一般由环境、房间、道具、角色等共同组成一个虚拟的场景，在有些游戏引擎或3D框架中也叫着舞台Stage。从3D的角度来说，场景是将一些网格Mesh放在一起供用户观看，并且会在其中加入相机Camera和灯光Light让用户能够看见，就像摄影棚那样的场景一样。

场景可能还会包含一些别的元素，例如GUI用户界面，让用户能够与场景产生交互。

效果截图

使用三维软件Blender构建海鱼的三维模型，并增加材质贴图和模型动画。

信息监视Inspector面板可以看到场景的节点Nodes信息、材质Materials信息、纹理Textures、动画Animation信息等，可以在鼠标、键盘、手柄、触摸屏、眼球跟踪、收拾识别、动作识别中关联三维场景的交互。

实现代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://cdn.babylonjs.com/babylon.js"></script>

<script src="https://cdn.babylonjs.com/babylon.max.js"></script>

<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>

<script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.js"></script>

<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>

<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.js"></script>

<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.min.js"></script>

<script src="https://cdn.babylonjs.com/postProcessesLibrary/babylonjs.postProcess.js"></script>

<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.min.js"></script>

<script src="https://cdn.babylonjs.com/proceduralTexturesLibrary/babylonjs.proceduralTextures.js"></script>

<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>

<script src="https://cdn.babylonjs.com/serializers/babylonjs.serializers.js"></script>

<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>

<script src="https://cdn.babylonjs.com/gui/babylon.gui.js"></script>

<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.js"></script>

<script src="https://cdn.babylonjs.com/inspector/babylon.inspector.bundle.max.js"></script>

<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.js"></script>

<script src="https://cdn.babylonjs.com/viewer/babylon.viewer.max.js"></script>

<style>

body {

padding: 0;

margin: 0;

font: normal 14px/1.42857 Tahoma;

}

#renderCanvas { width: 100vw; height: 100vh;}

</style>

<title>Babylon.js viewer (v7.3.1) - WebGL2 - Parallel shader compilation</title>

</head>

<body>

<canvas id="renderCanvas"></canvas>

<script>

const canvas = document.getElementById("renderCanvas");

const engine = new BABYLON.Engine(canvas, true);

const createBoxScene = function() {

const scene = new BABYLON.Scene(engine);

scene.clearColor = new BABYLON.Color3.Black;

const alpha = Math.PI/4;

const beta = Math.PI/3;

const radius = 8;

const target = new BABYLON.Vector3(0, 0, 0);

const camera = new BABYLON.ArcRotateCamera("Camera", alpha, beta, radius, target, scene);

camera.attachControl(canvas, true);

const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));

const box = BABYLON.MeshBuilder.CreateBox("box", {});

box.position.x = 0.5;

box.position.y = 1;

const boxMaterial = new BABYLON.StandardMaterial("material", scene);

boxMaterial.diffuseColor = BABYLON.Color3.Random();

box.material = boxMaterial;

box.actionManager = new BABYLON.ActionManager(scene);

box.actionManager.registerAction(

new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger,

function (evt) {

const sourceBox = evt.meshUnderPointer;

sourceBox.position.x += 0.1;

sourceBox.position.y += 0.1;

boxMaterial.diffuseColor = BABYLON.Color3.Random();

}));

return scene;

};

const createWaterScene = function() {

let scene = new BABYLON.Scene(engine);

// Camera

let camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 50, BABYLON.Vector3.Zero(), scene);

camera.attachControl(canvas, true);

// Light

var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

// Skybox

var skybox = BABYLON.Mesh.CreateBox("skyBox", 5000.0, scene);

var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);

skyboxMaterial.backFaceCulling = false;

skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://minio.cnbabylon.com/public/Assets/TropicalSunnyDay", scene);

skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;

skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);

skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

skyboxMaterial.disableLighting = true;

skybox.material = skyboxMaterial;

//红色光

const light1 = new BABYLON.SpotLight("spotLight1", new BABYLON.Vector3(-Math.cos(Math.PI),1,-Math.sin(Math.PI/6)),new BABYLON.Vector3(0,-1,0),Math.PI/2,1.5,scene)

light1.diffuse = new BABYLON.Color3(1,0,0)

//绿色光

const light2 = new BABYLON.SpotLight("spotLight2", new BABYLON.Vector3(0,1,1 - Math.sin(Math.PI/6)),new BABYLON.Vector3(0,-1,0),Math.PI/2,1.5,scene)

light2.diffuse = new BABYLON.Color3(0,1,0)

//蓝色光

const light3 = new BABYLON.SpotLight("spotLight3", new BABYLON.Vector3(Math.cos(Math.PI/6), 1,-Math.sin(Math.PI/6)),new BABYLON.Vector3(0,-1,0),Math.PI/2,1.5,scene)

light3.diffuse = new BABYLON.Color3(0,0,1)

const ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 4, height: 4}, scene);

ground.position.y = 12;

// Water material

var waterMaterial = new BABYLON.WaterMaterial("waterMaterial", scene, new BABYLON.Vector2(512, 512));

//设置水面的纹理贴图

waterMaterial.bumpTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/waterbump.png", scene);

waterMaterial.diffuseTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/waterbump.png",scene);

//设置风力,决定了水波运动速度

waterMaterial.windForce = -10;

//设置风向 x y

waterMaterial.windDirection = new BABYLON.Vector2(10, 10);

//设置水的波浪高度

waterMaterial.waveHeight = 0.5;

//设置水纹理高度凸起高度

waterMaterial.bumpHeight = 0.1;

//设置波浪的长度

waterMaterial.waveLength = 0.1;

//设置波浪运行速度

waterMaterial.waveSpeed = 50.0;

//设置水的颜色

waterMaterial.waterColor = new BABYLON.Color3(0.9,0.1,0.2)

//自发光

waterMaterial.emissiveColor = new BABYLON.Color3(0.8,0.13,0.45)

//环境光

waterMaterial.ambientColor = new BABYLON.Color3(1, 1, 1);

//散射光

waterMaterial.diffuseColor = new BABYLON.Color3(1, 1, 1);

//镜面光

waterMaterial.specularColor = new BABYLON.Color3(0, 0, 0);

waterMaterial.windDirection = new BABYLON.Vector2(1, 1);

waterMaterial.colorBlendFactor = 0;

waterMaterial.freeze(); // 冻结材质，优化渲染速度

// Ground

var groundTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/sand.jpg", scene);

groundTexture.vScale = 4.0;

groundTexture.uScale = 4.0;

var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);

groundMaterial.diffuseTexture = groundTexture;

var ground1 = BABYLON.Mesh.CreateGround("ground1", 512, 512, 1, scene, false);

ground1.position.y = -2;

ground1.material = groundMaterial;

// Water mesh

var waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 1, scene, false);

waterMesh.material = waterMaterial;

// Sphere

var sphereMaterial = new BABYLON.StandardMaterial("sphereMaterial", scene);

sphereMaterial.diffuseTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/wood.jpg", scene);

var sphere = BABYLON.Mesh.CreateSphere("sphere", 16, 10, scene);

sphere.position.y = 10;

sphere.material = sphereMaterial;

var sphere2 = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);

sphere2.position = new BABYLON.Vector3(0, 12, 0);

var material2 = new BABYLON.StandardMaterial("bab5", scene);

material2.emissiveColor = new BABYLON.Color3(0, 0.4, 0);

sphere2.material = material2;

// 网格地板初始化添加地面

var plane = BABYLON.MeshBuilder.CreateDisc("ground", {radius: 60}, scene);

plane.rotation.x = Math.PI / 2;

plane.position = new BABYLON.Vector3(0, 30, 0);

plane.freezeWorldMatrix()

var materialPlane = new BABYLON.StandardMaterial("texturePlane", this.scene);

materialPlane.diffuseColor = new BABYLON.Color3(0.0, 0.7, 0.95); //漫射色

materialPlane.bumpTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/waterbump.png", this.scene); //凹凸贴图

materialPlane.emissiveColor = new BABYLON.Color3(.2, .8, .3); //发光色

materialPlane.specularColor = new BABYLON.Color3(0.8, 0.2, 0.7); //反射色

materialPlane.diffuseTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/waterbump.png", this.scene)

materialPlane.diffuseTexture.hasAlpha = true; //显示为透明

//materialPlane.wireframe = true // 显示网格

materialPlane.diffuseTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/waterbump.png", this.scene); // 使用贴图

materialPlane.diffuseTexture.uScale = 5.0;//垂直方向重复5次

materialPlane.diffuseTexture.vScale = 5.0;//水平方向重复5次

materialPlane.reflectionTexture = new BABYLON.Texture("https://minio.cnbabylon.com/public/Assets/waterbump.png", this.scene); // 反射贴图

materialPlane.reflectionTexture.coordinatesMode = BABYLON.Texture.SPHERICAL_MODE; // 反射

materialPlane.alpha = 0.6; //调整透明度

materialPlane.backFaceCulling = false; //使透明在背面也显示贴图

materialPlane.backFaceCulling = false;//Allways show the front and the back of an element

//materialPlane.freeze(); // 冻结材质，优化渲染速度

plane.material = materialPlane;

// Configure water material 增加到水材质中,才能正常显示水把需要透射在水面的东西添加到render层里

waterMaterial.addToRenderList(ground);

waterMaterial.addToRenderList(ground1);

waterMaterial.addToRenderList(skybox);

waterMaterial.addToRenderList(sphere);

waterMaterial.addToRenderList(sphere2);

waterMaterial.addToRenderList(plane);

const shadowGenerator = new BABYLON.ShadowGenerator(1024,light1)

shadowGenerator.getShadowMap().renderList.push(sphere)

shadowGenerator.getShadowMap().renderList.push(sphere2)

// 地板接收阴影投射

ground.receiveShadows = true

// 泊松采样过滤

shadowGenerator.usePoissonSampling= true

// 指数阴影纹理

shadowGenerator.useExponentialShadowMap= true

// 模糊指数阴影纹理

shadowGenerator.useBlurExponentialShadowMap= true

let samplesNum = 100

var vls = new BABYLON.VolumetricLightScatteringPostProcess('vls',1.0,camera,sphere2,samplesNum,BABYLON.Texture.BILINEAR_SAMPLINGMODE,engine,false)

BABYLON.SceneLoader.LoadAssetContainer("https://minio.cnbabylon.com/public/Assets/", "fish.glb", this.scene, function (container) {

// Scale and position the loaded model (First mesh loaded from gltf is the root node)

container.meshes[0].scaling.scaleInPlace(1)

container.meshes[0].position.z = 2

container.meshes[0].position.y = -8

for (var index = 0; index < container.meshes.length; index++) {

waterMaterial.addToRenderList(container.meshes[index]);

}

// Add loaded file to the scene

container.addAllToScene();

});

// RAY CAST TO FIND WATER HEIGHT

//var angle = 0;

let i = 0;

scene.registerBeforeRender(function() {

let time = waterMaterial._lastTime / 100000;

let x = sphere.position.x;

let z = sphere.position.z;

sphere.position.y = Math.abs((Math.sin(((x / 0.05) + time * waterMaterial.waveSpeed)) * waterMaterial.waveHeight * waterMaterial.windDirection.x * 5.0) + (Math.cos(((z / 0.05) + time * waterMaterial.waveSpeed)) * waterMaterial.waveHeight * waterMaterial.windDirection.y * 5.0));

});

return scene

}

//const sceneToRender = createBoxScene();

const sceneToRender = createWaterScene();

engine.runRenderLoop(function(){

sceneToRender.render();

});

</script>

</body>

</html>

参见：

Babylon.js 简介和 WebXR 教程 - Mixed Reality | Microsoft Learn

与 3D 对象交互的 Babylon.js 教程 - Mixed Reality | Microsoft Learn

Babylon.js工具链

上一篇： WebStorm2024版将项目上传到gitee

下一篇：前端技术搭建五子棋游戏（内含源码）

本文标签

分享babylon.js实现Web三维场景

声明

本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。