Babylonjs 加载Gltf模型添加动画、点击事件、天空盒、标签

加载Gltf模型方法、模型点击事件、label标签、天空盒

import React, { useState, useEffect, useRef } from 'react'
import TWEEN from '@tweenjs/tween.js'
import { useNavigate } from "react-router-dom"import Images from '../img/index'const BABYLON = window.BABYLONfunction Home() {const navigate = useNavigate();const isClient = typeof window === 'object';const lastWidth = useRef();function getSize() {return {width: isClient ? window.innerWidth : undefined}}const [windowSize, setWindowSize] = useState(getSize);// Listen for page size changesuseEffect(() => {//Exit if not user/browserif (!isClient) { return false }function handleResize() {if (window?.innerWidth !== lastWidth.current) {const width = getSize();lastWidth.current = width;setWindowSize(width);}}window.addEventListener('resize', handleResize);})let interval = useRef(null);let [date, setDate] = useState('');let [week, setWeek] = useState('');let [time, setTime] = useState('');let [refresh, setRefresh] = useState('');let [currentTitle, setCurrentTitle] = useState('');// Time displayuseEffect(() => {// Year-Month-Daylet date = new Date();let year = date.getFullYear();let month = date.getMonth() + 1;month > 9 ? month = month : month = '0' + month;let day = date.getDate();day > 9 ? day = day : day = '0' + day;let str1 = year + '.' + month + '.' + day;setDate(str1);// Weeklet week = date.getDay();switch (week) {case 0:week = '星期日';break;case 1:week = '星期一';break;case 2:week = '星期二';break;case 3:week = '星期三';break;case 4:week = '星期四';break;case 5:week = '星期五';break;case 6:week = '星期六';break;default:week = '';break;}setWeek(week);// Hours-Minute-Secondlet hours = date.getHours();hours > 9 ? hours = hours : hours = '0' + hours;let minutes = date.getMinutes();minutes > 9 ? minutes = minutes : minutes = '0' + minutes;let str2 = hours + ':' + minutes;setTime(str2);// Refresh Timeinterval.current = setInterval(() => {setRefresh(Math.random());}, 1000)}, [refresh])// Model loadinguseEffect(() => {// Get canvas dom objectvar canvas = document.getElementById('cvs');// Init 3d enginevar engine = new BABYLON.Engine(canvas, true);// Create scene (callback object)var createScene = function () {// Create scene objectvar scene = new BABYLON.Scene(engine);// Create cameravar camera = new BABYLON.ArcRotateCamera("Camera", 30, Math.PI / 2.06, 120, BABYLON.Vector3.Zero(), scene);// Zoom speedcamera.wheelPrecision = 1.8;// Camera eventcamera.attachControl(canvas, true);// Create lightvar light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);// Set background opacityscene.clearColor = new BABYLON.Color4(0, 0, 0, 0);// Create skyboxvar skybox = BABYLON.Mesh.CreateBox("skyBox", 6000.0, scene);var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);skyboxMaterial.backFaceCulling = false;skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("TropicalSunnyDay/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;// Create ground// var groundMaterial = new BABYLON.StandardMaterial("groundMaterial", scene);// groundMaterial.diffuseTexture = new BABYLON.Texture("img/diff2.jpg", scene);// groundMaterial.diffuseTexture.uScale = groundMaterial.diffuseTexture.vScale = 1;// var ground = BABYLON.Mesh.CreateGround("ground", 6000, 6000, 1, scene, false);// ground.position.y = -3;// ground.material = groundMaterial;// Gltf loadingBABYLON.SceneLoader.Append("/gltf/", "zhny1.gltf", scene, function (scene) {var meshes = scene.meshes;// Identify model arraylet ztsz = [];// Text and panel to be deletedlet rmbabelbuild = [];// GUI draw model label tipsvar advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("ui1");advancedTexture.renderScale = 1;// Draw funcfunction createLabel(mesh, labelname) {var label = new BABYLON.GUI.Rectangle("label for " + labelname);label.background = "rgba(0, 0, 0, 1)";label.height = "60px";label.alpha = 0.6;label.width = "300px";label.cornerRadius = 20;label.thickness = 1;label.linkOffsetY = -100;advancedTexture.addControl(label);label.linkWithMesh(mesh);var text1 = new BABYLON.GUI.TextBlock();text1.text = labelname;text1.color = "white";label.addControl(text1);rmbabelbuild.push(label);rmbabelbuild.push(text1);}// Remove draw labelfunction removeLabel(arr) {for (let i = 0; i < arr.length; i++) {arr[i].dispose();}rmbabelbuild = [];}// Set model click event funcfunction clickModel(index, model, name, code) {if (index > -1) {model.actionManager = new BABYLON.ActionManager(scene);model.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLeftPickTrigger,function (event) {const sourceBox = event.meshUnderPointer;console.log('current click model %o', sourceBox);// Set cameracamera.lockedTarget = sourceBox;// Set left content and right content displaylet rightContent = document.getElementById('right');let leftContent = document.getElementById('left');rightContent.style.display = "flex";leftContent.style.display = "flex";// Show animation - tweenjsvar coords = { x: 0, y: 0 };var tween = new TWEEN.Tween(coords).to({ x: 416, y: 895 }, 1000).easing(TWEEN.Easing.Quadratic.Out).onUpdate(function () {leftContent.style.setProperty('width', coords.x + 'px');rightContent.style.setProperty('width', coords.x + 'px');}).start();animate();function animate() {requestAnimationFrame(animate);TWEEN.update();}setCurrentTitle(name)// Show vertebral bodyfor (let i = 0; i < ztsz.length; i++) {ztsz[i].visibility = false;}ztsz[code].visibility = true;ztsz[code + 1].visibility = true;ztsz[code + 2].visibility = true;// Vertebrum beat animationconst frameRate = 1;const xSlide = new BABYLON.Animation("xSlide", "position.y", frameRate, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);const keyFrames = [];// KeyframeskeyFrames.push({frame: 0,value: 1,});keyFrames.push({frame: frameRate,value: 0,});keyFrames.push({frame: 2 * frameRate,value: 1,});xSlide.setKeys(keyFrames);// Play animationztsz[code].animations.push(xSlide);scene.beginAnimation(ztsz[code], 0, 2 * frameRate, true);removeLabel(rmbabelbuild);createLabel(ztsz[code], name);}));}}// Add click eventfor (let i = 0; i < meshes.length; i++) {// Hide initial flagif (meshes[i].id.indexOf("锥体") !== -1) {meshes[i].visibility = false;ztsz.push(meshes[i]);}// 东大220kv全感知智能变电站let bdz = meshes[i].id.indexOf('平面.027');clickModel(bdz, meshes[i], '智能变电站', 15);// 集中式储能电站let ldcn = meshes[i].id.indexOf('立方体.007');clickModel(ldcn, meshes[i], '集中式储能电站', 12);// 梯次利用储能电站let fbsgf = meshes[i].id.indexOf('平面.023');clickModel(fbsgf, meshes[i], '梯次利用储能电站', 3);// 分布式能源站let fbsnyz = meshes[i].id.indexOf('平面.013');clickModel(fbsnyz, meshes[i], '分布式能源站', 0);// 绿色新型数据中心let sjzx = meshes[i].id.indexOf('立方体.004');clickModel(sjzx, meshes[i], '绿色新型数据中心', 9);// 分布式光伏let fbsgf1 = meshes[i].id.indexOf('平面.003');clickModel(fbsgf1, meshes[i], '分布式光伏', 6);let fbsgf2 = meshes[i].id.indexOf('平面.005');clickModel(fbsgf2, meshes[i], '分布式光伏', 6);let fbsgf3 = meshes[i].id.indexOf('平面.014');clickModel(fbsgf3, meshes[i], '分布式光伏', 6);let fbsgf4 = meshes[i].id.indexOf('平面.015');clickModel(fbsgf4, meshes[i], '分布式光伏', 6);let fbsgf5 = meshes[i].id.indexOf('平面.016');clickModel(fbsgf5, meshes[i], '分布式光伏', 6);let fbsgf6 = meshes[i].id.indexOf('平面.017');clickModel(fbsgf6, meshes[i], '分布式光伏', 6);let fbsgf7 = meshes[i].id.indexOf('平面.019');clickModel(fbsgf7, meshes[i], '分布式光伏', 6);let fbsgf8 = meshes[i].id.indexOf('平面.020');clickModel(fbsgf8, meshes[i], '分布式光伏', 6);let fbsgf9 = meshes[i].id.indexOf('平面.021');clickModel(fbsgf9, meshes[i], '分布式光伏', 6);let fbsgf10 = meshes[i].id.indexOf('平面.029');clickModel(fbsgf10, meshes[i], '分布式光伏', 6);let fbsgf11 = meshes[i].id.indexOf('平面.030');clickModel(fbsgf11, meshes[i], '分布式光伏', 6);let fbsgf12 = meshes[i].id.indexOf('平面.031');clickModel(fbsgf12, meshes[i], '分布式光伏', 6);}})return scene;};// New Scenevar scene = createScene();// Looper renderingengine.runRenderLoop(function () {scene.render();});}, [])return (<divstyle={{width: 1920,height: 1080,background: '#000',position: 'relative'}}>{/* header */}
<div
style={{height: 103,width: '100%',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundImage: `url(${Images.header})`,position: 'absolute',top: 0,display: 'flex',alignItems: 'center',justifyContent: 'space-between'}}>{/* left */}<divstyle={{display: 'flex',alignItems: 'center'}}><divstyle={{width: 136,height: 42,border: '2px solid #BCE0FF',borderRadius: 21,fontSize: 24,fontWeight: '600',color: '#FFF',display: 'flex',alignItems: 'center',justifyContent: 'center',marginLeft: 48,background: 'rgba(188, 224, 255, 0.07)'}}>能源</div><divstyle={{fontSize: 30,color: '#FFF',marginLeft: 30,fontWeight: '800'}}>江北能源站</div></div>{/* right */}<divstyle={{display: 'flex',alignItems: 'center'}}><divstyle={{fontSize: 20,color: '#FFF',fontWeight: '600'}}>{date}</div><divstyle={{fontSize: 20,color: '#FFF',fontWeight: '600',marginLeft: 33,marginRight: 38}}>{week}</div><divstyle={{fontSize: 20,color: '#FFF',fontWeight: '600',marginRight: 38}}>{time}</div></div></div>{/* model */}<divstyle={{width: '100%',height: 1080}}><canvasid='cvs'width={1920}height={1080}></canvas>{/* content left */}<divid='left'style={{overflow: 'hidden',display: 'none',position: 'absolute',top: 127,left: 32,width: 416, height: 895,background: 'linear-gradient(180deg, #080F14 0%, #010407 100%)',opacity: 0.8,color: '#fff',alignItems: 'center',flexDirection: 'column'}}><divonClick={() => {let rightContent = document.getElementById('right');let leftContent = document.getElementById('left');// tweenjsvar coords = { x: 416, y: 895 };var tween = new TWEEN.Tween(coords).to({ x: 0, y: 0 }, 1000).easing(TWEEN.Easing.Quadratic.Out).onUpdate(function () {leftContent.style.setProperty('width', coords.x + 'px');rightContent.style.setProperty('width', coords.x + 'px');}).start();animate();function animate() {requestAnimationFrame(animate);TWEEN.update();}}}style={{cursor: 'pointer',display: 'flex',justifyContent: 'flex-start',alignItems: 'center',marginTop: 8,width: 400,height: 36,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundImage: `url(${Images.bt})`}}><span style={{ marginLeft: 56, fontSize: 18 }}>{currentTitle}</span></div></div>{/* content right */}<divid='right'style={{overflow: 'hidden',display: 'none',position: 'absolute',top: 127,right: 32,width: 416,height: 895,background: 'linear-gradient(180deg, #080F14 0%, #010407 100%)',opacity: 0.8}}><spanonClick={() => {navigate('/details')}}style={{ color: '#fff', cursor: 'pointer', marginTop: 8, marginLeft: 8 }}>详情</span></div></div>{/* footer */}<divstyle={{height: 18,width: '100%',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundImage: `url(${Images.footer})`,position: 'absolute',bottom: 13}}></div></div>)}export default Home

视频效果

示例视频

Babylonjs 加载Gltf模型添加动画、点击事件、天空盒、标签相关推荐

jquery点击事件传值加载页面_jQuery添加options点击事件并传值
var formStr = "{'supplierId':'供应链企业|%-jm-sprt-%|93794498-3'}"; $.ajax({ type : "post& ...
解决 Threejs 无法加载 GLTF 模型的材质，报错 Unknown extension “KHR_materials_pbrSpecularGlossiness
背景 threejs 的版本是 0.147.0.使用 GLTFLoader 加载 GLTF 模型文件发现材质(Material)没有显示. 打开开发者工具发现有 Warning:THREE.GLTFL ...
cesium加载 gltf模型
cesium加载 gltf模型首先自己配置一个iis环境 :http://www.xitongcheng.com/jiaocheng/win10_article_60912.html,其他环境比如 ...
Three.js加载外部模型骨骼动画
加载外部模型骨骼动画上节课是通过Threejs程序创建一个骨骼动画然后解析播放,本节课是加载解析一个外部的骨骼动画模型文件. 查看骨骼动画数据在解析模型骨骼动画之前,先加载外部的三维模型,查看骨骼 ...
three.js 加载gltf模型的简化demo
目录前言下载依赖改造插件主要代码效果前言最近需要做一个three.js加载三维模型的,才发现three.js的官网和网上的示例挺乱的.甚至有人说把three.js的全部demo下载下来, ...
微信小程序AR扫描识别图(支持多图片)加载3D模型及其动画
MP-EasyAR-3DModels-Animations For Instance *微信公众平台* *微信开发者工具* *EasyAR* *项目实践* *下载文件到本地* *扫描识别* *加载模型 ...
cesium首次加载gltf模型成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/111305160 根据资料gltf格式模型可以直接在cesium上加载: 网上搜索gltf, ...
WebGL简易教程(十五)：加载gltf模型
文章目录 1. 概述 2. 实例 2.1. 数据 2.2. 程序 2.2.1. 文件读取 2.2.2. glTF格式解析 2.2.2.1. 场景节点 2.2.2.2. 网格 2.2.2.3. 缓冲,缓 ...
threejs学习--vue-cli集成threejs后，加载gltf模型FPS很低问题解决（四）
vue集成threejs后,web页面加载模型之后,FPS值在10以下:查阅资料是因为:声明的部分threejs的对象不可以放在data中:否则就会帧数特别低: 以下为修改之后代码 <templ ...

Babylonjs 加载Gltf模型添加动画、点击事件、天空盒、标签

加载Gltf模型方法、模型点击事件、label标签、天空盒

视频效果

Babylonjs 加载Gltf模型添加动画、点击事件、天空盒、标签相关推荐

最新文章

热门文章