基于three.js的室内全景3D展馆案例分享

  • 先看效果图
    • 实现了第一人称行走,WASD
    • 点击目标画册进行预览查看
    • 位置音乐播放环绕
    • 地面镜面反光
    • 碰撞检测等等.

地址在gitee上gallery: 数字展馆概念的demo项目,本项目中使用的技术栈为three.js

有兴趣的伙伴可以去下载看看,有这方面的项目应该能受很大启发。

import Core from "../core";

import Environment from "../environment";

import Character from "../character";

import Css3DRenderer from "../css3DRenderer";

import Audio from "../audio";

import RayCasterControls from "../rayCasterControls";

import {ON_CLICK_RAY_CAST, ON_HIDE_TOOLTIP, ON_LOAD_MODEL_FINISH, ON_LOAD_PROGRESS, ON_ENTER_APP, ON_SHOW_TOOLTIP} from "../Constants";

import {Object3D} from "three";

export default class World {

private core: Core;

private environment: Environment;

private character: Character;

private css_3d_renderer: Css3DRenderer;

private audio: Audio;

private ray_caster_controls: RayCasterControls;

constructor() {

this.core = new Core();

this.core.$on(ON_LOAD_PROGRESS, this._handleLoadProgress.bind(this));

this.core.$on(ON_LOAD_MODEL_FINISH, this._onLoadModelFinish.bind(this));

this.core.$on(ON_CLICK_RAY_CAST, this._onClickRayCast.bind(this));

this.core.$on(ON_SHOW_TOOLTIP, this._onShowTooltip.bind(this));

this.core.$on(ON_HIDE_TOOLTIP, this._onHideTooltip.bind(this));

this.core.$on(ON_ENTER_APP, this._onEnterApp.bind(this));

this.environment = new Environment();

this.character = new Character({speed: 12});

this.css_3d_renderer = new Css3DRenderer();

this.audio = new Audio();

this.ray_caster_controls = new RayCasterControls();

}

update(delta: number) {

if (this.environment.collider && this.environment.is_load_finished) {

this.css_3d_renderer.update();

this.character.update(delta, this.environment.collider);

this.ray_caster_controls.updateTooltipRayCast(this.environment.raycast_objects);

}

}

/*

* 点击进入展馆后的回调

* */

private _onEnterApp() {

this.audio.playAudio();

// 进入后才允许控制键盘

this.core.control_manage.enabled();

}

private async _onLoadModelFinish() {

// 场景模型加载完毕后开始加载音频

await this.audio.createAudio();

// 音频加载完毕后移除加载进度UI,显示进入确认UI

this.core.ui.removeLoading();

this.core.ui.showLoadingConfirm();

// 场景模型加载完毕后将场景中需要光线投射检测的物体传入给rayCasterControls

this.ray_caster_controls.bindClickRayCastObj(this.environment.raycast_objects);

}

private _handleLoadProgress([{url, loaded, total}]: [{url: string, loaded: number, total: number}]) {

const percentage = ((loaded / total) * 100).toFixed(2);

if (/.*\.(blob|glb)$/i.test(url)) {

this.core.ui.updateLoadingProgress(`{url.includes("collision") ? "加载碰撞场景模型" : "加载其他场景模型"}:{percentage}%`);

}

if (/.*\.(jpg|png|jpeg)$/i.test(url)) {

this.core.ui.updateLoadingProgress("加载图片素材中...");

}

if (/.*\.(m4a|mp3)$/i.test(url)) {

this.core.ui.updateLoadingProgress("加载声音资源中...");

}

}

private _onClickRayCast([object]: [object: Object3D]) {

this.core.ui.showBoardsBox(

object.userData.title,

object.userData.author,

object.userData.describe,

object.userData.src,

);

}

private _onShowTooltip([{msg, show_preview_tips}]: [{ msg: string, show_preview_tips: boolean }]) {

this.core.ui.showPreviewTooltip(msg, show_preview_tips);

}

private _onHideTooltip() {

this.core.ui.hidePreviewTooltip();

}

}

相关推荐
爬虫程序猿1 小时前
用 Python 给京东商品详情做“全身 CT”——可量产、可扩展的爬虫实战
开发语言·爬虫·python
十一吖i1 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
徐同保2 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
蓝纹绿茶3 小时前
bash:**:pip:***python: 错误的解释器: 没有那个文件或目录
开发语言·python·pip
生莫甲鲁浪戴3 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
云知谷3 小时前
【经典书籍】C++ Primer 第15章类虚函数与多态 “友元、异常和其他高级特性” 精华讲解
c语言·开发语言·c++·软件工程·团队开发
START_GAME3 小时前
深度学习Diffusers:用 DiffusionPipeline 实现图像生成
开发语言·python·深度学习
不爱编程的小九九4 小时前
小九源码-springboot088-宾馆客房管理系统
java·开发语言·spring boot
Evand J4 小时前
【MATLAB例程】到达角度定位(AOA),平面环境多锚点定位(自适应基站数量),动态轨迹使用EKF滤波优化。附代码下载链接
开发语言·matlab·平面·滤波·aoa·到达角度
细节控菜鸡5 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis