GithubHelp home page GithubHelp logo

steve245270533 / gallery Goto Github PK

View Code? Open in Web Editor NEW
622.0 10.0 148.0 46.36 MB

Digital exhibition project developed based on three.js.

Home Page: https://steve245270533.github.io/gallery/

License: GNU General Public License v3.0

JavaScript 3.32% HTML 6.40% TypeScript 80.63% CSS 9.65%
3d game threejs typescript digital-exhibition

gallery's Introduction

gallery(数字展馆)

cover.jpg

介绍

本项目中使用的技术栈为three.js,使用blender进行建模,最后烘焙渲染场景贴图,导出glb地图格式在Web端渲染。
此项目仅为数字展馆概念的demo项目,如有不完善的地方还请多多包涵,有任何问题都可以提issue。

如何操作?

行走:W/S/A/D

移动端行走操作: 虚拟摇杆

跳跃:空格

控制视角:鼠标左键拖动

目录结构说明

├── src                        # 源代码
│   ├── assets                 # 资源文件夹(音频、贴图、模型)
│   │── audio                  # 音频类(创建位置音频)
|   │── character              # 人物角色类(人物模型控制)
|   │── controlManage          # 键盘控制类(键盘按键或虚拟摇杆状态管理)
|   │── core                   # 核心基础类(包括camera、renderer、scene等)
|   │── css3DRenderer          # 负责DOM元素与WebGL的内容相结合(渲染电脑屏幕的iframe元素)
|   │── environment            # 场景类(创建地图模型、画展贴图、地面镜面反射)
|   │── lib                    # three.js相关扩展库
|   │── loader                 # 加载器类(glb、texture、audio等加载器管理)
|   │── rayCasterControls      # 射线投射类(角色与画框交互触发检测)
|   │── ui                     # UI类(负责控制渲染页面的部分UI,例如加载进度页,详情窗口,虚拟摇杆)
|   │── utils                  # 工具函数
|   |    │── Emitter.ts        # 事件分发类(各类事件的分发)
|   |    └── typeAssert.ts     # 类型推导工具函数
|   │── world          # 游戏核心类(用于管理游戏世界中的核心元素,包括环境、角色、交互探测和音频等组件)
|   │── main.ts        # 页面入口函数
|   └── Constants.ts   # 常量定义(定义模型/贴图/媒体资源地址、分发事件名等)

对于此开源项目的个人想法:

受threejs官网demo项目的灵感,在开发此项目时尝试了很多方案,也看到有很多类似的项目,但大多这类型的项目都是明码标价售卖的(格局太小了),反观老外的github上,有大量优秀的3D开源项目,这也正是别人技术发展如此迅速的原因。 因此本人还是觉得不要吝啬于贡献技术,多多开源项目,给到更多人灵感,相互提供帮助才能更好地推动行业发展。

开源不易,多多Star⭐⭐⭐

捐赠

开源不易,你的支持,就是我的源源不断的动力!本项目为开源项目,捐赠均为自愿。

如何捐赠?

爱发电⚡

🎇feature:

  1. 高性能碰撞检测:
    因为这类项目对于物理引擎的应用场景并不多,经过不懈的技术方案调研后使用了一套不依赖于物理引擎的高性能的动态碰撞检测方案。比three.js官网的Octree方案性能还要好上几倍。
  2. 画展交互:
    利用光线投射进行物体探测触发互动效果。
  3. 位置音频:
    加入了位置音频,模拟现实中的听觉传播,使得场景中的音乐更具有空间感,提升浏览体验。

运行

To setup a dev environment:

# Clone the repository

# Install dependencies
npm i

# Run the local dev server
npm run dev

To serve a production build:

# Install dependencies if not already done - 'npi i'

# Build for production
npm run build

gallery's People

Contributors

steve245270533 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

gallery's Issues

刚刚进入展厅后,第一次移动鼠标,视角会出现一个跳跃的感觉。

我的解决方案是,在core/index.ts的构造函数里,在this._initResponsiveResize();这句代码之后,强制设定this.orbit_controls对象的视角。

// 固定角度,AzimuthAngle相当于是左右,大小范围设置为0相当于是固定死
this.orbit_controls.minAzimuthAngle = 0
this.orbit_controls.maxAzimuthAngle = 0
// 固定角度,PolarAngle相当于是上下
// this.orbit_controls.minPolarAngle = Math.PI / 2
// this.orbit_controls.maxPolarAngle = Math.PI / 2

// 设置完后要更新一下
this.orbit_controls.update();

// 固定完之后再改回AzimuthAngle的默认值,否则就只能上下移动鼠标,左右就不行了。
this.orbit_controls.minAzimuthAngle = - Infinity;
this.orbit_controls.maxAzimuthAngle = Infinity;
// 固定完之后再改回PolarAngle的默认值
// this.orbit_controls.minPolarAngle = 0;
// this.orbit_controls.maxPolarAngle = Math.PI;

不知道大家是怎么解决的?

有一些疑问

你好。
在core/index.ts有这段代码
this.ui = new UI();
在ui/index.ts中
this.core = new Core();
这样是否会形成循环依赖呢?

M1 mac 无法移动位置和视角

在M1Mac上成功启动了项目,控制台没有报错
浏览器的控制台也没有明显报错
但是用触摸板无法移动视角和位置
image

鼠标点击地面移动

1.如果可以用鼠标点击地面就自己走过去在某些场景会不会更方便一些

2.可以在页面的右上角加一个帮助按钮---帮助刚进来的人了解怎么操作

3.如果场景大了的话可以在固定地点加个位置,在底部加个预览栏,点击就可以跳转过去

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.