0.前言：

前阵子接到一个需求是需要开发一个能够跑在环形屏幕上的3d展示项目

刚接到这个项目的时候我以为能吧相机fov直接调整成360°，后来发现我想多了。。babylonjs中的相机最大视角就是π（180°）

然后我又想说，那我干脆两个相机拼一起。

但是两个相机边缘会有失真，效果不好效果不好。

算了暴力一点，我写了个全景相机类，想用几个相机拼接用几个相机，相机数量越多拼接的越丝滑，移动的话利用主相机的控制器进行移动，其他副相机都绑在这个相机身上。

(本文完整代码连接如下，为ts编写，需要js移步ts官网的playground编译成自己需要的版本)

AnnularCamera.tshttps://gitee.com/Susiia/babylon-standard-framework/blob/master/src/assets/ts/tools/AnnularCamera.ts

1.使用方法：

首先导入

import AnnularCamera from "./AnnularCamera.ts";

然后使用

  // 默认相机private defaultCamera ():void {this.camera = new AnnularCamera('defaultCamera', new Vector3(0, 2, -2), this.scene)this.camera.ellipsoid = new Vector3(0.15, 0.9, 0.15)this.camera.speed = 0.2this.camera.checkCollisions = truethis.camera.applyGravity = truethis.camera.attachControl(this.canvas, true)}

齐活儿

2.代码讲解

首先导入我们需要的东西

import { Scene, UniversalCamera, Vector3, Viewport } from '@babylonjs/core'

创建AnnularCamera类

export default class AnnularCamera {constructor (name:string, // 相机名position:Vector3, // 位置scene:Scene, // 场景CameraCount?:number // 相机数量){//...}
}

声明所需要的私有变量

  private _name: string // 相机名private readonly scene:Scene // 场景private readonly mainCamera:UniversalCamera // 主相机private deputyCameras:UniversalCamera[] = [] // 副相机组private readonly CameraCount:number // 相机数量private _position:Vector3 // 相机位置private _ellipsoid!:Vector3 // 碰撞检测盒子大小private _speed!: number // 相机速度private _checkCollisions!: boolean // 检查碰撞检测private _applyGravity!: boolean // 应用重力

在构造函数中进行初始化操作

constructor (name:string, // 相机名position:Vector3, // 位置scene:Scene, // 场景CameraCount?:number // 相机数量) {// 初始化相机名this._name = name// 初始化相机位置this._position = position// 初始化相机数量this.CameraCount = (CameraCount || 4) < 4 ? 4 : (CameraCount || 4)// 初始化场景this.scene = scene// 初始化主相机this.mainCamera = new UniversalCamera(this._name,this.position,this.scene)this.mainCamera.fov = Math.PI / (this.CameraCount / 2) // 设置主相机视野this.mainCamera.fovMode = UniversalCamera.FOVMODE_HORIZONTAL_FIXED // 设置主相机视野模式// eslint-disable-next-line no-unused-expressionsscene.activeCameras?.push(this.mainCamera) // 主相机推入场景激活相机组this.mainCamera.viewport = new Viewport(0, 0, 1 / this.CameraCount, 1) // 设置主相机视口// 初始化副相机组for (let i = 0; i < this.CameraCount - 1; i++) {// 定义副相机const deputyCamera = new UniversalCamera(this._name + 'Camera' + (i + 1),new Vector3(0, 0, 0),this.scene)deputyCamera.parent = this.mainCamera // 设置父级别为主相机this.deputyCameras.push(deputyCamera) // 推入副相机组// eslint-disable-next-line no-unused-expressionsscene.activeCameras?.push(deputyCamera) // 副相机推入场景激活相机组deputyCamera.rotation = new Vector3(0, (Math.PI / (this.CameraCount / 2)) * (i + 1), 0) // 设置副相机旋转deputyCamera.fov = Math.PI / (this.CameraCount / 2) // 设置相机视野deputyCamera.fovMode = UniversalCamera.FOVMODE_HORIZONTAL_FIXED // 设置相机视野模式deputyCamera.viewport = new Viewport((1 / this.CameraCount) * (i + 1), 0, 1 / this.CameraCount, 1) // 设置相机视口}}

公开主相机的attachControl

  public attachControl = (canvas: HTMLCanvasElement, noPreventDefault?: boolean | undefined):void => {this.mainCamera.attachControl(canvas, noPreventDefault)}

将主相机常用的一些方法和属性用setter和getter公开

  /** getter/setter*/// 碰撞检测盒getter/setterpublic get ellipsoid (): Vector3 {return this._ellipsoid}public set ellipsoid (value: Vector3) {this.mainCamera.ellipsoid = valuethis._ellipsoid = value}// 相机位置getter/setterpublic get position (): Vector3 {return this._position}public set position (value: Vector3) {this.mainCamera.position = valuethis._position = value}// 相机名getter/setterpublic get name (): string {return this._name}public set name (value: string) {this.mainCamera.name = valuethis._name = value}// 相机速度public get speed (): number {return this._speed}public set speed (value: number) {this.mainCamera.speed = valuethis._speed = value}// 是否应用碰撞检测public get checkCollisions (): boolean {return this._checkCollisions}public set checkCollisions (value: boolean) {this.mainCamera.checkCollisions = valuethis._checkCollisions = value}// 是否应用重力public get applyGravity (): boolean {return this._applyGravity}public set applyGravity (value: boolean) {this.mainCamera.applyGravity = valuethis._applyGravity = value}

齐活儿。

3.使用

放映的时候，用英伟达或者amd驱动的跨屏幕融合吧环形屏幕搞成理论上的一整块，然后网页全屏就可以用。

4.后记

其实现在还有一些问题，就是目前移动控制器的正向是主相机的朝向，在上面画面的最左侧，之后还需要优化一下，将主相机挪到画面的中间（最好是能够随意挪动，想放在第几个放在第几个）

【babylonjs】环形屏幕3d展示相关推荐

商品3D展示来啦，HMS Core3D建模服务助力电商发展
传统电商商品展示采用图文结合的形式,文案介绍产品的相关参数,搭配精美图片去吸引客户眼球.但图文商品展示由于色差.尺寸不符等原因,会让消费者产生图片和实物不一致的疑虑,且消费者需要消耗大量精力阅读和比较 ...
文物3D展示|博物馆3D可视化是如何实现的?
相信有不少人见过3D展示的文物,那具体是如何实现的呢?在此给大家科普一下! 先将文物3D建模/扫描建模,再借助3D可视化技术,让文物在手机上全方位.多角度.更清晰地展示出来.观众轻松地用手指就可以将其 ...
电商产品展示，选360°全景还是3D展示？
近两年,随着互联网的全面普及,人们对信息质量和获取信息的方式似乎越来越"挑剔"了,图文.声音.视频/短视频已成不能满足现代营销的差异化需求,一些新的信息形式露出头角. 例如,人们有 ...
基于Cesium开源框架的3D展示（包含加载三维以及地图的一些基本操作）
加载3Dtile模型数据 3D展示效果 geojson格式数据展示白驹过隙,时光如梭,又到一年年尾.回想一年的工作,感觉做了很多,又感觉什么都没做成.so,在此回顾一下今年经历过的那些个不一定有头, ...
圆柱体的投影特点_环形屏幕投影技术的特点和优势
近年来,随着投影技术的不断创新和发展,它逐渐成熟和完善.它突破了传统的单一投影仪和窗帘的投影方式,可以达到越来越多的科幻投影显示效果,给人们的生活增添更多的色彩.全息投影.交互式投影.立体投影.投影融 ...
css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
鸿蒙工业互联网,工业互联网 3D 展示平台
原标题:工业互联网 3D 展示平台项目简介产业园区占地约为 158.46 亩,现有生产车间两栋.研发楼一栋.检测楼一栋.食堂及倒班楼一栋.废品库一栋.门卫室两处.综合站房一处.主要从事电缆.电线的 ...
广州华锐互动产品3d展示平台，轻松提高产品成交！
产品3d展示是一种新型的产品宣传展示方式,目前在各大展览平台.电商平台上的应用都具有非常大的潜力.因为现在产品主要的展示方式还是图片,以及少量的视频,且视频能传达的信息也十分有限. 产品3D展示利用三 ...
3D建模京东商品3D展示怎么做？
京东商品3D展示怎么做?京东商品3D展示指在制作商品3D模型基础上的3D建模AR模型,商迪3D通过3D交互动画的表现形式展示商品的卖点,结合稳定的AR底层技术,消费者可以根据实物与商品按1:1制作的A ...

【babylonjs】环形屏幕3d展示