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

效果截图

实现代码

<!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);// Cameralet camera = new BABYLON.ArcRotateCamera("Camera", 3 * Math.PI / 2, Math.PI / 2.5, 50, BABYLON.Vector3.Zero(), scene);camera.attachControl(canvas, true);// Lightvar light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);// Skyboxvar 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;// Water materialvar 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 ywaterMaterial.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(); // 冻结材质，优化渲染速度// Groundvar 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 ground = BABYLON.Mesh.CreateGround("ground", 512, 512, 1, scene, false);ground.position.y = -2;ground.material = groundMaterial;// Water meshvar waterMesh = BABYLON.Mesh.CreateGround("waterMesh", 512, 512, 1, scene, false);waterMesh.material = waterMaterial;// Spherevar 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 = 20;sphere.material = sphereMaterial;var sphere2 = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2, segments: 32}, scene);  sphere2.position = new BABYLON.Vector3(0, 33, 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(skybox);waterMaterial.addToRenderList(sphere);waterMaterial.addToRenderList(plane);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 = 2container.meshes[0].position.y = -8for (var index = 0; index <  container.meshes.length; index++) {waterMaterial.addToRenderList(container.meshes[index]);}// Add loaded file to the scenecontainer.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工具链

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/641297.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

虚拟化及Docker基础

虚拟化及Docker基础

一、虚拟化 1.1 云端 1.2 云计算服务模式分层 1.3 虚拟化架构 1.3.1 寄居架构 1.3.2 原生架构 1.4 虚拟化产品 1.4.1 仿真虚拟化产品&#xff08;对系统硬件没有要求&#xff0c;性能最低&#xff09; 1.4.2 半虚拟化 &#xff08;虚拟机可以使用真机物理机&#xff09…
阅读更多...
【招聘】数通，云计算岗位持续招聘中

【招聘】数通，云计算岗位持续招聘中

北京、南京、成都、贵州、杭州、深圳、上海 云计算HCS 薪资:8-25k 岗位描述: 1、制定网络安全技术规范及工作标准、负责全国工程团队技术培训及人员培养 2、全国项目技术支持、协助开展广域网的设计、规划、实施及方案交流工作 3、承担公司中、大型集成项目管理&#xff0c;负…
阅读更多...
css 文字左右抖动效果

css 文字左右抖动效果

<template><div class"box"><div class"shake shape">抖动特效交字11</div></div> </template><script setup></script><style scope> .shape {margin: 50px;width: 200px;height: 50px;line-heigh…
阅读更多...
【力扣 Hot100 | 第八天】4.23（和为K的子数组）

【力扣 Hot100 | 第八天】4.23（和为K的子数组）

1.和为K的子数组 1.1题目 给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例一&#xff1a; 输入&#xff1a;nums [1,1,1], k 2 输出&#xff1a;2示例二&#xff1a; 输入&…
阅读更多...
汇编语言作业（三）

汇编语言作业（三）

目录 一、实验目的 二、实验内容 三、实验步骤以及结果 1、阅读第4页ppt 第一个汇编程序 ex1.asm 并编写编译执行成功后&#xff0c;要求改写&#xff0c;使其输出字符ABC&#xff0c;如下图所示。 &#xff08;1&#xff09;编译产生目标文件 &#xff08;2&#xff09;…
阅读更多...
虚拟现实（VR）的应用场景

虚拟现实（VR）的应用场景

虚拟现实&#xff08;VR&#xff09;技术创建和体验三维虚拟世界的计算机仿真技术。用户通过佩戴VR头显等设备&#xff0c;可以完全沉浸在虚拟世界中&#xff0c;并与虚拟世界中的物体进行交互。VR技术具有广泛的应用前景&#xff0c;可以应用于各行各业。以下是一些VR的应用场…
阅读更多...
免费开源线上社交交友婚恋系统平台 可打包小程序 支持二开 源码交付！

免费开源线上社交交友婚恋系统平台 可打包小程序 支持二开 源码交付！

婚姻是人类社会中最重要的关系之一&#xff0c;它对个人和家庭都有着深远的影响。然而&#xff0c;在现代社会的快节奏生活中&#xff0c;找到真爱变得越来越困难。在这个时候&#xff0c;婚恋产品应运而生&#xff0c;为人们提供了寻找真爱的新途径。 1.拓宽人际交流圈子 现代…
阅读更多...
倾斜摄影三维模型数据在立体裁剪应用分析

倾斜摄影三维模型数据在立体裁剪应用分析

倾斜摄影三维模型数据在立体裁剪应用分析 立体裁剪是一种将三维模型应用于摄影中的技术&#xff0c;可以在摄影过程中将虚拟的三维模型与现实场景进行合成&#xff0c;从而实现逼真的视觉效果。倾斜摄影是一种通过无人机或其他飞行器进行航拍的技术&#xff0c;可以获取到大范围…
阅读更多...
PLC无线通讯技术在汽车喷涂车间机械手臂上的应用

PLC无线通讯技术在汽车喷涂车间机械手臂上的应用

一、项目背景 在汽车生产装配工艺中&#xff0c;机械臂目前已经广泛地应用于装配、搬运等工业生产中&#xff0c;在机械臂系列产品中&#xff0c;汽车喷漆自动控制喷涂机械装置以其独特的优势&#xff0c;能够根据油漆喷涂量的大小&#xff0c;严格控制喷嘴与喷漆面之间距离等…
阅读更多...
《Vid2Seq》论文笔记

《Vid2Seq》论文笔记

原文链接 [2302.14115] Vid2Seq: Large-Scale Pretraining of a Visual Language Model for Dense Video Captioning (arxiv.org) 原文笔记 What&#xff1a; 《Vid2Seq: Large-Scale Pretraining of a Visual Language Model for Dense Video Captioning》 作者提出一种多…
阅读更多...
深度学习从入门到精通—Transformer

深度学习从入门到精通—Transformer

1.绪论介绍 1.1 传统的RNN网络 传统的RNN&#xff08;递归神经网络&#xff09;主要存在以下几个问题&#xff1a; 梯度消失和梯度爆炸&#xff1a;这是RNN最主要的问题。由于序列的长距离依赖&#xff0c;当错误通过层传播时&#xff0c;梯度可以变得非常小&#xff08;消失…
阅读更多...
力扣数据库题库学习（4.23日）

力扣数据库题库学习（4.23日）

610. 判断三角形 问题链接 解题思路 题目要求&#xff1a;对每三个线段报告它们是否可以形成一个三角形。以 任意顺序 返回结果表。 对于三个线段能否组成三角形的判定&#xff1a;任意两边之和大于第三边&#xff0c;对于这个表内的记录&#xff0c;要求就是&#xff08;x…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023