1224 lines
40 KiB
TypeScript
1224 lines
40 KiB
TypeScript
import * as THREE from 'three';
|
|
import CameraControls from 'camera-controls';
|
|
import {Timer} from 'three/examples/jsm/misc/Timer.js';
|
|
import {CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer";
|
|
import {CSS3DRenderer} from "three/examples/jsm/renderers/CSS3DRenderer.js";
|
|
import {TransformControls} from "three/examples/jsm/controls/TransformControls.js";
|
|
import App from "../app/App";
|
|
import {ViewerOptions} from "./ViewerOptions";
|
|
import {PluginManager} from "@/core/plugin/plugin";
|
|
import {
|
|
Helper,
|
|
CameraManage,
|
|
Effect,
|
|
Weather,
|
|
Signals,
|
|
ParticleSystem,
|
|
Drag,
|
|
TilesManage,
|
|
} from "./modules";
|
|
import {ShaderMaterialManager} from "@/core/shaderMaterial/ShaderMaterialManager";
|
|
import {deepAssign, deepEqual, getMousePosition, isEmptyObject, isNil, createDivContainer} from "@/utils";
|
|
import {useDispatchSignal} from "@/hooks";
|
|
import {
|
|
AddObjectCommand,
|
|
RemoveObjectCommand,
|
|
SetPositionCommand,
|
|
SetRotationCommand,
|
|
SetScaleCommand
|
|
} from "@/core/commands/Commands";
|
|
import {Emitter} from '@/core/libs/three-nebula';
|
|
import ParticleEmitter from "@/core/objects/ParticleEmitter.ts";
|
|
import {ViewerPathTracer} from "@/core/viewer/ViewerPathTracer.ts";
|
|
import {Helper as ScriptHelper} from "../script";
|
|
import Tiles from "../objects/Tile.ts";
|
|
|
|
export interface ViewerEventMap {
|
|
// 场景加载完成时执行，仅执行一次
|
|
loaded: {};
|
|
|
|
// 场景当前动画帧循环开始之前触发，每一帧执行一次
|
|
beforeAnimation: { delta: number };
|
|
|
|
// 场景当前动画帧循环完成之后立即触发，每一帧执行一次
|
|
afterAnimation: { delta: number, toBeRender: (_need: boolean) => void };
|
|
|
|
// 场景当前动画帧循环完成之后渲染之前触发，每一次渲染执行一次
|
|
beforeRender: { delta: number };
|
|
|
|
// 场景当前帧渲染完成之后触发，每一次渲染执行一次
|
|
afterRender: { delta: number };
|
|
|
|
// 场景销毁前调用，仅执行一次
|
|
beforeDestroy: {};
|
|
|
|
// 场景销毁后调用，仅执行一次
|
|
afterDestroy: {};
|
|
|
|
// 模型单击事件
|
|
onPick: { intersect: THREE.Intersection, object: THREE.Object3D };
|
|
|
|
// 模型双击事件
|
|
onDoubleClick: { intersect: THREE.Intersection, object: THREE.Object3D };
|
|
|
|
// 键盘按下事件(全局)
|
|
onKeyDown: { event: KeyboardEvent };
|
|
|
|
// 键盘抬起事件(全局)
|
|
onKeyUp: { event: KeyboardEvent };
|
|
|
|
//指针按下事件(全局)
|
|
onPointerDown: { event: PointerEvent };
|
|
|
|
//指针抬起事件(全局)
|
|
onPointerUp: { event: PointerEvent };
|
|
|
|
//指针移动事件(全局)
|
|
onPointerMove: { event: PointerEvent };
|
|
|
|
//触屏按下事件(全局)
|
|
onTouchStart: { event: TouchEvent };
|
|
|
|
//触屏释放事件(全局)
|
|
onTouchEnd: { event: TouchEvent };
|
|
|
|
// 场景背景变更
|
|
onSceneBackgroundChange: {
|
|
backgroundType: '' | 'Color' | 'Texture' | 'Equirectangular',
|
|
background: null | THREE.Color | THREE.Texture
|
|
}
|
|
|
|
// 场景环境变更
|
|
onSceneEnvironmentChange: {
|
|
environmentType: '' | 'Background' | 'Equirectangular' | 'ModelViewer',
|
|
environment: null | THREE.Texture
|
|
}
|
|
}
|
|
|
|
export interface ViewerModules {
|
|
plugin: PluginManager,
|
|
viewHelper: Helper,
|
|
cameraManage: CameraManage,
|
|
controls: CameraControls,
|
|
transformControls?: TransformControls,
|
|
effect: Effect,
|
|
weather: Weather,
|
|
registerSignal: Signals,
|
|
shaderMaterialManager: ShaderMaterialManager,
|
|
particleSystem: ParticleSystem,
|
|
dragControl: Drag,
|
|
tilesManage:TilesManage,
|
|
}
|
|
|
|
CameraControls.install({
|
|
THREE: {
|
|
Vector2: THREE.Vector2,
|
|
Vector3: THREE.Vector3,
|
|
Vector4: THREE.Vector4,
|
|
Quaternion: THREE.Quaternion,
|
|
Matrix4: THREE.Matrix4,
|
|
Spherical: THREE.Spherical,
|
|
Box3: THREE.Box3,
|
|
Sphere: THREE.Sphere,
|
|
Raycaster: THREE.Raycaster,
|
|
}
|
|
});
|
|
|
|
const onDownPosition = new THREE.Vector2();
|
|
const onUpPosition = new THREE.Vector2();
|
|
const onDoubleClickPosition = new THREE.Vector2();
|
|
|
|
// 表示animate()函数被多次调用累积时间,用于限制FPS
|
|
let timeStamp = 0;
|
|
|
|
// 事件绑定
|
|
const Fn: any = {
|
|
pointerdown: null,
|
|
pointerup: null,
|
|
pointermove: null,
|
|
keydown: null,
|
|
keyup: null,
|
|
touchstart: null,
|
|
dblclick: null,
|
|
}
|
|
|
|
// 脚本管理数据结构
|
|
type EventHandlers = {
|
|
[eventName: string]: {
|
|
[uuid: string]: Function[];
|
|
};
|
|
};
|
|
// 脚本中可写的所有事件
|
|
let events: EventHandlers = {
|
|
loaded: {},
|
|
beforeAnimation: {},
|
|
afterAnimation: {},
|
|
beforeRender: {},
|
|
afterRender: {},
|
|
beforeDestroy: {},
|
|
afterDestroy: {},
|
|
onPick: {},
|
|
onDoubleClick: {},
|
|
onKeyDown: {},
|
|
onKeyUp: {},
|
|
onPointerDown: {},
|
|
onPointerUp: {},
|
|
onPointerMove: {},
|
|
onTouchStart: {},
|
|
onTouchEnd: {},
|
|
};
|
|
// UUID 到事件的映射
|
|
const uuidEventMap: Map<string, Map<string, { name: string, fn: Function }[]>> = new Map();
|
|
|
|
export default class Viewer extends THREE.EventDispatcher<ViewerEventMap> {
|
|
public container: HTMLElement;
|
|
public options: IViewerSetting;
|
|
public renderer: THREE.WebGLRenderer;
|
|
public camera: THREE.PerspectiveCamera;
|
|
public scene: THREE.Scene;
|
|
public sceneHelpers: THREE.Scene;
|
|
public grid: THREE.Group | undefined;
|
|
public box: THREE.Box3 = new THREE.Box3();
|
|
public selectionBox: THREE.Box3Helper;
|
|
public raycaster: THREE.Raycaster;
|
|
public pmremGenerator: THREE.PMREMGenerator | null = null;
|
|
public pathtracer: ViewerPathTracer | undefined;
|
|
public modules: ViewerModules;
|
|
|
|
public css2DRenderer: CSS2DRenderer = new CSS2DRenderer();
|
|
public css3DRenderer: CSS3DRenderer = new CSS3DRenderer();
|
|
public timer = new Timer();
|
|
//整个主场景的box3
|
|
public sceneBox3 = new THREE.Box3();
|
|
|
|
constructor(options: IViewerSetting) {
|
|
super();
|
|
|
|
App.viewer = this;
|
|
|
|
this.container = options.container || createDivContainer();
|
|
|
|
this.options = ViewerOptions();
|
|
deepAssign(this.options, options);
|
|
|
|
this.camera = App.camera;
|
|
this.scene = App.scene;
|
|
this.sceneHelpers = App.sceneHelpers;
|
|
|
|
this.renderer = this.createEngine();
|
|
|
|
this.modules = this.initModules();
|
|
|
|
/** helpers **/
|
|
if (this.options.grid.enabled) {
|
|
this.grid = new THREE.Group();
|
|
this.grid.ignore = true;
|
|
this.initGrid();
|
|
this.scene.add(this.grid);
|
|
}
|
|
|
|
//选中时的包围框
|
|
this.selectionBox = new THREE.Box3Helper(this.box);
|
|
(this.selectionBox.material as THREE.Material).depthTest = false;
|
|
(this.selectionBox.material as THREE.Material).transparent = true;
|
|
this.selectionBox.visible = false;
|
|
this.sceneHelpers.add(this.selectionBox as THREE.Object3D);
|
|
|
|
// 拾取对象
|
|
this.raycaster = new THREE.Raycaster();
|
|
//Raycaster 将只从它遇到的第一个对象中获取信息
|
|
this.raycaster.firstHitOnly = true;
|
|
|
|
this.engineCreated(this.renderer)
|
|
|
|
this.loadEnv(true);
|
|
|
|
this.initEvent();
|
|
|
|
//监听视窗变化（节流）
|
|
let timer: NodeJS.Timeout | null = null;
|
|
const resizeObserver = new ResizeObserver(() => {
|
|
if (timer) return;
|
|
timer = setTimeout(() => {
|
|
useDispatchSignal("sceneResize", this.container.offsetWidth, this.container.offsetHeight);
|
|
timer = null;
|
|
}, 16)
|
|
});
|
|
resizeObserver.observe(this.container);
|
|
|
|
useDispatchSignal("viewerInitCompleted", this);
|
|
}
|
|
|
|
/**
|
|
* 获取编辑态配置
|
|
*/
|
|
get edit(): IViewerEdit {
|
|
return this.options.edit as IViewerEdit;
|
|
}
|
|
|
|
/**
|
|
* 设置编辑态配置
|
|
* @param config
|
|
*/
|
|
set edit(config: IViewerEdit) {
|
|
if(!config) return;
|
|
|
|
if (deepEqual(config,this.options.edit)) return;
|
|
|
|
deepAssign(this.options.edit,config);
|
|
|
|
if (this.options.edit?.gizmo) {
|
|
if(this.modules.transformControls) return;
|
|
|
|
let objectPositionOnDown = new THREE.Vector3();
|
|
let objectRotationOnDown = new THREE.Euler();
|
|
let objectScaleOnDown = new THREE.Vector3();
|
|
const transformControls = new TransformControls(this.camera, this.container);
|
|
transformControls.addEventListener("change", () => {
|
|
const object = transformControls.object;
|
|
|
|
if (object !== undefined) {
|
|
this.box.setFromObject(object, true);
|
|
|
|
useDispatchSignal("objectChanged", object);
|
|
}
|
|
|
|
this.render();
|
|
})
|
|
transformControls.addEventListener("mouseDown", () => {
|
|
const object = transformControls.object as THREE.Object3D;
|
|
|
|
objectPositionOnDown = object.position.clone();
|
|
objectRotationOnDown = object.rotation.clone();
|
|
objectScaleOnDown = object.scale.clone();
|
|
|
|
this.modules.controls.enabled = false;
|
|
})
|
|
transformControls.addEventListener("mouseUp", () => {
|
|
const object = transformControls.object as THREE.Object3D;
|
|
|
|
if (object !== undefined) {
|
|
switch (transformControls.getMode()) {
|
|
case 'translate':
|
|
if (!objectPositionOnDown.equals(object.position)) {
|
|
App.execute(new SetPositionCommand(object, object.position, objectPositionOnDown));
|
|
}
|
|
break;
|
|
case 'rotate':
|
|
if (!objectRotationOnDown.equals(object.rotation)) {
|
|
App.execute(new SetRotationCommand(object, object.rotation, objectRotationOnDown));
|
|
}
|
|
break;
|
|
case 'scale':
|
|
if (!objectScaleOnDown.equals(object.scale)) {
|
|
App.execute(new SetScaleCommand(object, object.scale, objectScaleOnDown));
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
this.modules.controls.enabled = true;
|
|
})
|
|
const gizmo = transformControls.getHelper();
|
|
this.sceneHelpers.add(gizmo);
|
|
|
|
this.modules.transformControls = transformControls;
|
|
} else {
|
|
if (!this.modules.transformControls) return;
|
|
|
|
const gizmo = this.modules.transformControls.getHelper();
|
|
this.sceneHelpers.remove(gizmo);
|
|
|
|
this.modules.transformControls.dispose();
|
|
|
|
this.modules.transformControls = undefined;
|
|
}
|
|
|
|
// TODO 处理 this.options.edit?.helpers，以兼容只显示gizmo不显示helpers的情况
|
|
|
|
this.render();
|
|
}
|
|
|
|
/**
|
|
* 获取是否启用脚本运行
|
|
*/
|
|
get enableScript() {
|
|
return this.options.enableScript || false;
|
|
}
|
|
|
|
/**
|
|
* 设置是否启用脚本运行
|
|
*/
|
|
set enableScript(enable: boolean) {
|
|
if (enable === this.enableScript) return;
|
|
|
|
if (enable) {
|
|
this.installScripts();
|
|
} else {
|
|
this.unInstallScripts();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 创建默认渲染引擎
|
|
*/
|
|
createEngine() {
|
|
const renderConfig = App.project.getKey("renderer");
|
|
const renderer = new THREE.WebGLRenderer({
|
|
antialias: renderConfig.antialias,
|
|
alpha: true,
|
|
preserveDrawingBuffer: false,
|
|
powerPreference: "high-performance",
|
|
});
|
|
|
|
renderer.autoClear = false;
|
|
renderer.setClearColor(0x272727, 1);
|
|
renderer.outputColorSpace = THREE.SRGBColorSpace;
|
|
renderer.toneMapping = renderConfig.toneMapping;
|
|
renderer.toneMappingExposure = renderConfig.toneMappingExposure;
|
|
renderer.shadowMap.enabled = renderConfig.shadow.enabled;
|
|
renderer.shadowMap.type = renderConfig.shadow.type;
|
|
renderer.xr.enabled = App.project.getKey("xr");
|
|
|
|
this.modules && this.engineCreated(renderer);
|
|
|
|
return renderer;
|
|
}
|
|
|
|
/**
|
|
* 创建渲染引擎后
|
|
* @param newRenderer
|
|
*/
|
|
engineCreated(newRenderer: THREE.WebGLRenderer) {
|
|
if (this.renderer && this.renderer !== newRenderer) {
|
|
this.renderer.setAnimationLoop(null);
|
|
this.renderer.dispose();
|
|
|
|
this.pmremGenerator?.dispose();
|
|
this.pmremGenerator = null;
|
|
|
|
this.modules.controls.disconnect();
|
|
this.container.removeChild(this.renderer.domElement);
|
|
|
|
this.modules.viewHelper.dispose();
|
|
}
|
|
|
|
this.renderer = newRenderer;
|
|
|
|
this.renderer.setAnimationLoop(this.animate.bind(this));
|
|
this.renderer.setPixelRatio(Math.max(Math.ceil(window.devicePixelRatio), 1));
|
|
this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
|
|
|
|
if (this.scene.environment && this.scene.environment.isRenderTargetTexture) {
|
|
useDispatchSignal("sceneEnvironmentChanged", 'ModelViewer');
|
|
useDispatchSignal("sceneGraphChanged");
|
|
}
|
|
|
|
this.pathtracer = new ViewerPathTracer(newRenderer);
|
|
|
|
// 在container中最前面插入渲染器的dom元素
|
|
this.container.insertBefore(newRenderer.domElement, this.container.firstChild);
|
|
|
|
// 控制器绑定
|
|
this.modules.controls.connect(newRenderer.domElement);
|
|
|
|
// 初始化后处理
|
|
this.modules.effect.createComposer();
|
|
|
|
this.modules.viewHelper.init();
|
|
|
|
// 防止重复添加
|
|
if (this.css2DRenderer.domElement.parentNode !== this.container) {
|
|
this.css2DRenderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
|
|
this.css2DRenderer.domElement.setAttribute("id", "astral-3d-css2DRenderer");
|
|
this.css2DRenderer.domElement.style.position = 'absolute';
|
|
this.css2DRenderer.domElement.style.top = '0px';
|
|
this.css2DRenderer.domElement.style.pointerEvents = 'none';
|
|
|
|
this.container.appendChild(this.css2DRenderer.domElement);
|
|
}
|
|
if (this.css3DRenderer.domElement.parentNode !== this.container) {
|
|
this.css3DRenderer.setSize(this.container.offsetWidth, this.container.offsetHeight);
|
|
this.css3DRenderer.domElement.setAttribute("id", "astral-3d-css3DRenderer");
|
|
this.css3DRenderer.domElement.style.position = 'absolute';
|
|
this.css3DRenderer.domElement.style.top = '0px';
|
|
this.css3DRenderer.domElement.style.pointerEvents = 'none';
|
|
|
|
this.container.appendChild(this.css3DRenderer.domElement);
|
|
}
|
|
|
|
useDispatchSignal("rendererUpdated");
|
|
}
|
|
|
|
/**
|
|
* 初始化网格
|
|
* @protected
|
|
*/
|
|
initGrid() {
|
|
if (!this.grid) {
|
|
this.grid = new THREE.Group();
|
|
this.grid.ignore = true;
|
|
this.scene.add(this.grid);
|
|
}
|
|
|
|
if (this.grid.children.length > 0) {
|
|
this.grid.children.forEach((child: THREE.Object3D) => {
|
|
child.dispose();
|
|
});
|
|
this.grid.children = [];
|
|
}
|
|
|
|
const grid = new THREE.GridHelper(this.options.grid.row, this.options.grid.column, parseInt(App.config.getKey('mainColor').slice(1), 16), this.options.grid.color);
|
|
this.grid.add(grid);
|
|
|
|
this.render();
|
|
}
|
|
|
|
/**
|
|
* 初始化功能模块
|
|
*/
|
|
initModules() {
|
|
const controls = new CameraControls(this.camera);
|
|
controls.addEventListener("update", () => {
|
|
useDispatchSignal("cameraChanged", this.camera, controls);
|
|
});
|
|
|
|
const modules: ViewerModules = {
|
|
// 插件系统
|
|
plugin: new PluginManager(),
|
|
viewHelper: new Helper(this, controls),
|
|
cameraManage: new CameraManage(this, controls),
|
|
controls,
|
|
effect: new Effect(this),
|
|
weather: new Weather(this),
|
|
// 注册signal
|
|
registerSignal: new Signals(this),
|
|
shaderMaterialManager: new ShaderMaterialManager(),
|
|
// 粒子系统
|
|
particleSystem: new ParticleSystem(this),
|
|
// 拖拽
|
|
dragControl: new Drag(this),
|
|
// 3d tiles管理器
|
|
tilesManage: new TilesManage(this.scene,this.camera,this.renderer),
|
|
}
|
|
|
|
if (this.edit?.enabled) {
|
|
let objectPositionOnDown = new THREE.Vector3();
|
|
let objectRotationOnDown = new THREE.Euler();
|
|
let objectScaleOnDown = new THREE.Vector3();
|
|
const transformControls = new TransformControls(this.camera, this.container);
|
|
transformControls.addEventListener("change", () => {
|
|
const object = transformControls.object;
|
|
|
|
if (object !== undefined) {
|
|
this.box.setFromObject(object, true);
|
|
|
|
useDispatchSignal("objectChanged", object);
|
|
}
|
|
|
|
this.render();
|
|
})
|
|
transformControls.addEventListener("mouseDown", () => {
|
|
const object = transformControls.object as THREE.Object3D;
|
|
|
|
objectPositionOnDown = object.position.clone();
|
|
objectRotationOnDown = object.rotation.clone();
|
|
objectScaleOnDown = object.scale.clone();
|
|
|
|
this.modules.controls.enabled = false;
|
|
})
|
|
transformControls.addEventListener("mouseUp", () => {
|
|
const object = transformControls.object as THREE.Object3D;
|
|
|
|
if (object !== undefined) {
|
|
switch (transformControls.getMode()) {
|
|
case 'translate':
|
|
if (!objectPositionOnDown.equals(object.position)) {
|
|
App.execute(new SetPositionCommand(object, object.position, objectPositionOnDown));
|
|
}
|
|
break;
|
|
case 'rotate':
|
|
if (!objectRotationOnDown.equals(object.rotation)) {
|
|
App.execute(new SetRotationCommand(object, object.rotation, objectRotationOnDown));
|
|
}
|
|
break;
|
|
case 'scale':
|
|
if (!objectScaleOnDown.equals(object.scale)) {
|
|
App.execute(new SetScaleCommand(object, object.scale, objectScaleOnDown));
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
this.modules.controls.enabled = true;
|
|
})
|
|
const gizmo = transformControls.getHelper();
|
|
this.sceneHelpers.add(gizmo);
|
|
|
|
modules.transformControls = transformControls;
|
|
}
|
|
|
|
return modules;
|
|
}
|
|
|
|
/**
|
|
* 加载默认环境和背景
|
|
*/
|
|
loadEnv(setBg: boolean = true, onLoad?:(texture: THREE.Texture) => void,onError?:(error: Error) => void) {
|
|
if (!this.options.hdr) return;
|
|
|
|
App.resource.loadURLTexture(this.options.hdr, (texture: THREE.Texture) => {
|
|
texture.mapping = THREE.EquirectangularReflectionMapping;
|
|
this.scene.environment = texture;
|
|
setBg && (this.scene.background = texture);
|
|
|
|
useDispatchSignal("sceneGraphChanged");
|
|
|
|
onLoad && onLoad(texture)
|
|
}, (err) => onError && onError(err))
|
|
}
|
|
|
|
/**
|
|
* 初始化事件监听
|
|
*/
|
|
initEvent() {
|
|
Fn.pointerdown = this.onPointerDown.bind(this);
|
|
this.container.addEventListener('pointerdown', Fn.pointerdown);
|
|
Fn.pointermove = this.onPointerMove.bind(this);
|
|
this.container.addEventListener('pointermove', Fn.pointermove);
|
|
Fn.touchstart = this.onTouchStart.bind(this);
|
|
this.container.addEventListener('touchstart', Fn.touchstart);
|
|
Fn.dblclick = this.onDoubleClick.bind(this)
|
|
this.container.addEventListener('dblclick', Fn.dblclick);
|
|
}
|
|
|
|
/**
|
|
* 组装脚本（支持热更新）
|
|
* @param uuids 传入此参数则仅组装此数组下Object.uuid的脚本
|
|
* @param filterName 传入此参数则仅组装此数组下Object.uuid的脚本中name匹配的脚本
|
|
*/
|
|
installScripts(uuids?: string | string[], filterName: string = "") {
|
|
if (!this.enableScript) return;
|
|
|
|
// 注册 Helper
|
|
const helper = new ScriptHelper(this.scene);
|
|
|
|
// 定义注入的参数名
|
|
let scriptWrapParams = 'THREE,helper,renderer,scene,camera,controls,timer,render';
|
|
// 定义返回的结构
|
|
const scriptWrapResultObj = {};
|
|
// 注入的函数绑定this
|
|
const fns = {
|
|
render: this.render.bind(this)
|
|
}
|
|
|
|
// 拼接下方闭包函数返回的结构，即返回脚本中写的支持的事件函数
|
|
const validEvents = Object.keys(events);
|
|
|
|
// 准备返回结构
|
|
validEvents.forEach(eventName => {
|
|
scriptWrapParams += ',' + eventName;
|
|
scriptWrapResultObj[eventName] = eventName;
|
|
});
|
|
|
|
// scriptWrapResultObj是json，会包含双引号，但是后面拼接闭包函数的返回结果里面不能有双引号，因为这些值都会解析为变量
|
|
const scriptWrapResult = JSON.stringify(scriptWrapResultObj).replace(/"/g, '');
|
|
|
|
// 处理特定 UUID（热更新）
|
|
const processUuid = (uuid: string) => {
|
|
// 先卸载旧脚本
|
|
this.uninstallScriptsByUuid(uuid, filterName);
|
|
|
|
const object = this.scene.getObjectByProperty('uuid', uuid);
|
|
if (!object) {
|
|
App.log.warn(`[Script] 不存在uuid为${uuid}的对象`);
|
|
return;
|
|
}
|
|
|
|
// 一个模型允许存在多个脚本
|
|
const scripts = App.scripts[uuid] || [];
|
|
const uuidEvents = uuidEventMap.get(uuid) || new Map<string, { name: string, fn: Function }[]>();
|
|
|
|
scripts.forEach(script => {
|
|
// 如果存在需要按照name过滤
|
|
if (filterName && filterName !== script.name) return;
|
|
|
|
const functions = new Function(
|
|
scriptWrapParams,
|
|
`${script.source}\nreturn ${scriptWrapResult};`
|
|
).bind(object)(
|
|
THREE, helper, this.renderer, this.scene,
|
|
this.camera, this.modules.controls, this.timer, fns.render
|
|
);
|
|
|
|
Object.entries(functions).forEach(([name, fn]) => {
|
|
if (!fn || !validEvents.includes(name)) {
|
|
if (fn && !validEvents.includes(name)) {
|
|
App.log.warn(`[Script] 不支持的事件类型：${name}`);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const boundFn = (e: any) => {
|
|
const {type, target, ...params} = e;
|
|
|
|
// 点击事件只分发给对应模型
|
|
if (["onPick", "onDoubleClick"].includes(name)) {
|
|
const {intersect, object: _object} = params;
|
|
|
|
if (_object.uuid !== object.uuid) return;
|
|
|
|
(fn as Function).bind(object)(intersect as THREE.Intersection);
|
|
} else {
|
|
if (isEmptyObject(params)) {
|
|
(fn as Function).bind(object)();
|
|
} else {
|
|
(fn as Function).bind(object)(...Object.values(params));
|
|
}
|
|
}
|
|
}
|
|
|
|
// 添加到全局事件集合
|
|
if (!events[name][uuid]) events[name][uuid] = [];
|
|
events[name][uuid].push(boundFn);
|
|
|
|
// 添加到 UUID 事件映射
|
|
if (!uuidEvents.has(name)) uuidEvents.set(name, []);
|
|
uuidEvents.get(name)!.push({
|
|
name: script.name,
|
|
fn: boundFn
|
|
});
|
|
|
|
// 添加事件监听
|
|
this.addEventListener(name as keyof ViewerEventMap, boundFn);
|
|
});
|
|
});
|
|
|
|
// 更新 UUID 映射
|
|
uuidEventMap.set(uuid, uuidEvents);
|
|
};
|
|
|
|
// 处理指定 UUID 或全部
|
|
if (uuids) {
|
|
(Array.isArray(uuids) ? uuids : [uuids]).forEach(processUuid);
|
|
} else {
|
|
Object.keys(App.scripts).forEach(processUuid);
|
|
}
|
|
|
|
if (!Fn.keydown) {
|
|
Fn.keydown = (event: KeyboardEvent) => {
|
|
this.dispatchEvent({type: "onKeyDown", event})
|
|
}
|
|
window.addEventListener('keydown', Fn.keydown);
|
|
Fn.keyup = (event: KeyboardEvent) => {
|
|
this.dispatchEvent({type: "onKeyUp", event})
|
|
}
|
|
window.addEventListener('keyup', Fn.keyup);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 按 object UUID 卸载脚本（热更新用）
|
|
* @param uuid 传入此参数则仅卸载此Object.uuid的脚本
|
|
* @param filterName 传入此参数则仅卸载此Object.uuid的脚本中name匹配的脚本
|
|
*/
|
|
uninstallScriptsByUuid(uuid: string, filterName: string = "") {
|
|
if (!uuidEventMap.has(uuid)) return;
|
|
|
|
const uuidEvents = uuidEventMap.get(uuid)!;
|
|
|
|
const uuidEventsArray = Array.from(uuidEvents);
|
|
for (let i = uuidEventsArray.length - 1; i >= 0; i--) {
|
|
const [eventName, scripts] = uuidEventsArray[i];
|
|
|
|
// 移除事件监听
|
|
for (let i = scripts.length - 1; i >= 0; i--) {
|
|
const sc = scripts[i];
|
|
|
|
if (filterName && filterName !== sc.name) continue;
|
|
|
|
// @ts-ignore
|
|
this.removeEventListener(eventName as keyof ViewerEventMap, sc.fn);
|
|
|
|
// 从uuidEventMap 移除
|
|
scripts.splice(i, 1);
|
|
if (scripts.length === 0) {
|
|
uuidEvents.delete(eventName);
|
|
}
|
|
|
|
// 全局事件集合
|
|
const es = events[eventName][uuid];
|
|
// 移除相应函数
|
|
const ei = es.findIndex(f => f === sc.fn);
|
|
if (ei !== -1) {
|
|
es.splice(ei, 1);
|
|
}
|
|
|
|
if (es.length === 0) {
|
|
delete events[eventName][uuid];
|
|
}
|
|
}
|
|
}
|
|
|
|
// 清理 UUID 映射
|
|
if (Array.from(uuidEvents.keys()).length === 0) {
|
|
uuidEventMap.delete(uuid);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 卸载所有脚本
|
|
*/
|
|
unInstallScripts() {
|
|
if (this.enableScript) return;
|
|
|
|
// 直接遍历 UUID 映射，复杂度 O(n)
|
|
uuidEventMap.forEach((_, uuid) => {
|
|
this.uninstallScriptsByUuid(uuid);
|
|
});
|
|
|
|
// 重置数据结构
|
|
uuidEventMap.clear();
|
|
Object.keys(events).forEach(event => {
|
|
events[event] = {};
|
|
});
|
|
|
|
if (Fn.keydown) {
|
|
window.removeEventListener('keydown', Fn.keydown);
|
|
Fn.keydown = null;
|
|
|
|
window.removeEventListener('keyup', Fn.keyup);
|
|
Fn.keyup = null;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 加载离线场景包
|
|
*/
|
|
loadOfflineScene() {
|
|
// const requestConfig = App.config.getKey('request');
|
|
// const packageUrl = `${requestConfig.baseUrl}/${requestConfig.sceneId}`;
|
|
}
|
|
|
|
/**
|
|
* 计算整个场景的Box3
|
|
*/
|
|
computedSceneBox3() {
|
|
this.sceneBox3.setFromObject(this.scene);
|
|
}
|
|
|
|
/**
|
|
* 更新相机宽高比
|
|
*/
|
|
updateAspectRatio() {
|
|
for (const uuid in App.cameras) {
|
|
const camera = App.cameras[uuid];
|
|
|
|
const aspect = this.container.offsetWidth / this.container.offsetHeight;
|
|
|
|
if (camera.isPerspectiveCamera) {
|
|
(<THREE.PerspectiveCamera>camera).aspect = aspect;
|
|
}
|
|
|
|
camera.updateProjectionMatrix();
|
|
|
|
const cameraHelper = App.helpers[camera.id];
|
|
if (cameraHelper) cameraHelper.update();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取射线选中
|
|
* @param point
|
|
*/
|
|
getIntersects(point: THREE.Vector2) {
|
|
const mouse = new THREE.Vector2();
|
|
mouse.set((point.x * 2) - 1, -(point.y * 2) + 1);
|
|
this.raycaster.setFromCamera(mouse, this.camera);
|
|
|
|
const objects: THREE.Object3D[] = [];
|
|
(App.locked ? App.locked : this.scene).traverseByCondition((child) => {
|
|
this.camera.layers.test(child.layers) && objects.push(child);
|
|
}, (child) => !child.ignore && child.visible);
|
|
|
|
this.sceneHelpers.traverseVisible((child) => {
|
|
if (child.name === 'picker') {
|
|
this.camera.layers.test(child.layers) && objects.push(child);
|
|
}
|
|
});
|
|
|
|
// 粒子
|
|
this.modules.particleSystem.particlesGroup.traverse((child) => {
|
|
if (!this.camera.layers.test(child.layers)) return;
|
|
|
|
if (child.children.length === 0) {
|
|
if (App.locked) {
|
|
child.proxy?.isAncestor(App.locked) && objects.push(child);
|
|
} else {
|
|
objects.push(child);
|
|
}
|
|
}
|
|
});
|
|
|
|
return this.raycaster.intersectObjects(objects, false);
|
|
}
|
|
|
|
/**
|
|
* 处理点击
|
|
*/
|
|
handleClick() {
|
|
if (onDownPosition.distanceTo(onUpPosition) === 0) {
|
|
const intersects = this.getIntersects(onUpPosition);
|
|
useDispatchSignal("intersectionsDetected", intersects);
|
|
|
|
if (intersects.length > 0) {
|
|
let object = intersects[0].object;
|
|
|
|
if (object.proxy) {
|
|
object = object.proxy;
|
|
}
|
|
|
|
this.dispatchEvent({type: "onPick", intersect: intersects[0], object});
|
|
}
|
|
|
|
this.render();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 处理鼠标按下
|
|
* @param event
|
|
*/
|
|
onPointerDown(event: PointerEvent) {
|
|
this.dispatchEvent({type: "onPointerDown", event});
|
|
|
|
event.preventDefault();
|
|
const array = getMousePosition(this.container, event.clientX, event.clientY);
|
|
onDownPosition.fromArray(array);
|
|
Fn.pointerup = this.onPointerUp.bind(this);
|
|
document.addEventListener('pointerup', Fn.pointerup);
|
|
}
|
|
|
|
/**
|
|
* 处理鼠标抬起
|
|
* @param event
|
|
*/
|
|
onPointerUp(event: PointerEvent) {
|
|
this.dispatchEvent({type: "onPointerUp", event});
|
|
|
|
const array = getMousePosition(this.container, event.clientX, event.clientY);
|
|
onUpPosition.fromArray(array);
|
|
this.handleClick();
|
|
document.removeEventListener('pointerup', Fn.pointerup);
|
|
Fn.pointerup = null;
|
|
}
|
|
|
|
/**
|
|
* 处理鼠标移动
|
|
* @param event
|
|
*/
|
|
onPointerMove(event: PointerEvent) {
|
|
this.dispatchEvent({type: "onPointerMove", event});
|
|
}
|
|
|
|
/**
|
|
* 处理触屏按下
|
|
* @param event
|
|
*/
|
|
onTouchStart(event: TouchEvent) {
|
|
this.dispatchEvent({type: "onTouchStart", event});
|
|
|
|
const touch = event.changedTouches[0];
|
|
const array = getMousePosition(this.container, touch.clientX, touch.clientY);
|
|
onDownPosition.fromArray(array);
|
|
Fn.pointerup = this.onTouchEnd.bind(this);
|
|
document.addEventListener('touchend', Fn.pointerup);
|
|
}
|
|
|
|
/**
|
|
* 处理触屏释放
|
|
* @param event
|
|
*/
|
|
onTouchEnd(event: TouchEvent) {
|
|
this.dispatchEvent({type: "onTouchEnd", event});
|
|
|
|
const touch = event.changedTouches[0];
|
|
const array = getMousePosition(this.container, touch.clientX, touch.clientY);
|
|
onUpPosition.fromArray(array);
|
|
this.handleClick();
|
|
document.removeEventListener('touchend', Fn.pointerup);
|
|
Fn.pointerup = null;
|
|
}
|
|
|
|
/**
|
|
* 处理双击
|
|
* @param event
|
|
*/
|
|
onDoubleClick(event: PointerEvent) {
|
|
const array = getMousePosition(this.container, event.clientX, event.clientY);
|
|
onDoubleClickPosition.fromArray(array);
|
|
const intersects = this.getIntersects(onDoubleClickPosition);
|
|
if (intersects.length > 0) {
|
|
let object = intersects[0].object;
|
|
useDispatchSignal("objectFocused", object);
|
|
|
|
if (object.proxy) {
|
|
object = object.proxy;
|
|
}
|
|
|
|
this.dispatchEvent({type: "onDoubleClick", intersect: intersects[0], object});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 循环动画
|
|
*/
|
|
animate() {
|
|
this.timer.update();
|
|
|
|
const delta = this.timer.getDelta();
|
|
|
|
timeStamp += delta;
|
|
|
|
if (timeStamp < App.singleFrameTime) return;
|
|
|
|
this.dispatchEvent({type: 'beforeAnimation', delta: timeStamp});
|
|
|
|
let needRender = App.animationManager.update(timeStamp);
|
|
if (needRender) {
|
|
if (App.selected !== null && App.selected.animations.length > 0) {
|
|
// 避免某些蒙皮网格的帧延迟效应(e.g. Michelle.glb)
|
|
App.selected.updateWorldMatrix(false, true);
|
|
|
|
if (!this.modules.effect.enabled) {
|
|
// 选择框应反映当前动画状态
|
|
this.selectionBox.box.setFromObject(App.selected, true);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (this.modules.controls.enabled && !this.modules.viewHelper.animating) {
|
|
needRender = this.modules.controls.update(timeStamp) || needRender;
|
|
}
|
|
|
|
if (this.modules.weather.update(timeStamp)) {
|
|
needRender = true;
|
|
}
|
|
|
|
this.modules.shaderMaterialManager.update();
|
|
if (this.modules.shaderMaterialManager.needRender) {
|
|
needRender = true;
|
|
}
|
|
|
|
this.modules.particleSystem.update(timeStamp);
|
|
if (this.modules.particleSystem.needsUpdate) {
|
|
needRender = true;
|
|
}
|
|
|
|
if (this.modules.dragControl.isDragging) {
|
|
needRender = true;
|
|
}
|
|
|
|
if (this.renderer?.xr.isPresenting) {
|
|
needRender = true;
|
|
}
|
|
|
|
// 3dTiles渲染
|
|
if(this.modules.tilesManage.update()){
|
|
needRender = true;
|
|
}
|
|
|
|
this.dispatchEvent({type: 'afterAnimation', delta: timeStamp, toBeRender: (_needRender:boolean = false) => {
|
|
needRender = _needRender;
|
|
}
|
|
});
|
|
|
|
if (needRender) this.render(timeStamp);
|
|
|
|
this.updatePT();
|
|
|
|
// console.log(`调用.animate时间间隔${timeStamp*1000}毫秒,delta:${delta}`);
|
|
// 剩余的时间合并进入下次的判断计算
|
|
timeStamp = App.singleFrameTime ? (timeStamp % App.singleFrameTime) : 0;
|
|
}
|
|
|
|
/**
|
|
* 初始化光线路径追踪模拟
|
|
*/
|
|
initPT() {
|
|
if (App.viewportShading === 'realistic') {
|
|
this.pathtracer?.init(this.scene, this.camera);
|
|
}
|
|
}
|
|
|
|
updatePTBackground() {
|
|
if (App.viewportShading === 'realistic') {
|
|
this.pathtracer?.setBackground();
|
|
}
|
|
}
|
|
|
|
updatePTEnvironment() {
|
|
if (App.viewportShading === 'realistic') {
|
|
this.pathtracer?.setEnvironment();
|
|
}
|
|
}
|
|
|
|
updatePTMaterials() {
|
|
if (App.viewportShading === 'realistic') {
|
|
this.pathtracer?.updateMaterials();
|
|
}
|
|
}
|
|
|
|
updatePT() {
|
|
if (App.viewportShading === 'realistic') {
|
|
this.pathtracer?.update();
|
|
useDispatchSignal("pathTracerUpdated", this.pathtracer?.getSamples())
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 渲染场景帧
|
|
*/
|
|
render(delta?: number) {
|
|
if (!this.renderer) return;
|
|
|
|
if (isNil(delta)) {
|
|
delta = this.timer.getDelta();
|
|
}
|
|
|
|
const startTime = performance.now();
|
|
|
|
this.dispatchEvent({type: 'beforeRender', delta: <number>delta});
|
|
|
|
this.renderer.clearDepth();
|
|
|
|
App.csm.update();
|
|
|
|
if (this.modules.effect.enabled) {
|
|
this.modules.effect.render(<number>delta);
|
|
} else {
|
|
this.renderer.render(this.scene, App.viewportCamera);
|
|
}
|
|
|
|
// 非默认相机不渲染辅助
|
|
if (this.camera === App.viewportCamera) {
|
|
if (this.options.edit?.enabled) this.renderer.render(this.sceneHelpers, this.camera);
|
|
}
|
|
|
|
this.css2DRenderer.render(this.scene, App.viewportCamera);
|
|
this.css3DRenderer.render(this.scene, App.viewportCamera);
|
|
|
|
this.modules.viewHelper.render();
|
|
|
|
this.dispatchEvent({type: 'afterRender', delta: <number>delta});
|
|
|
|
const endTime = performance.now();
|
|
// 计算帧时
|
|
const fs = endTime - startTime;
|
|
useDispatchSignal("sceneRendered", fs);
|
|
}
|
|
|
|
/**
|
|
* 销毁
|
|
*/
|
|
dispose() {
|
|
this.dispatchEvent({type: "beforeDestroy"});
|
|
|
|
this.container.removeEventListener('mousedown', Fn.mousedown);
|
|
Fn.mousedown = null;
|
|
this.container.removeEventListener('pointermove', Fn.pointermove);
|
|
Fn.pointermove = null;
|
|
this.container.removeEventListener('touchstart', Fn.touchstart);
|
|
Fn.touchstart = null;
|
|
this.container.removeEventListener('dblclick', Fn.dblclick);
|
|
Fn.dblclick = null;
|
|
|
|
Object.keys(this.modules).forEach(key => {
|
|
if (this.modules[key].dispose) {
|
|
this.modules[key].dispose();
|
|
}
|
|
})
|
|
|
|
this.dispatchEvent({type: "afterDestroy"});
|
|
|
|
this.unInstallScripts();
|
|
}
|
|
|
|
/* -----------------暂时放在Viewer下的工具方法-------------------- */
|
|
|
|
/**
|
|
* 添加粒子
|
|
* @emitter 粒子发射器
|
|
* @body 粒子主体
|
|
*/
|
|
addParticle(emitter: Emitter, body: THREE.Sprite | THREE.Mesh, name: string = "Particles") {
|
|
const particleEmitter = new ParticleEmitter(emitter);
|
|
particleEmitter.name = name;
|
|
|
|
ParticleSystem.Body3DMap.set(particleEmitter.uuid, body);
|
|
|
|
this.modules.particleSystem.spriteSystem.addEmitter(emitter);
|
|
|
|
App.execute(new AddObjectCommand(particleEmitter));
|
|
}
|
|
|
|
/**
|
|
* 添加瓦片
|
|
* @param tiles 瓦片对象
|
|
* @param addMode 添加进场景的方式：none-不添加；command-使用记录命令添加；normal-直接添加，不会记录历史
|
|
*/
|
|
addTiles(tiles:Tiles,addMode: "none" | "command" | "normal" = "command"){
|
|
tiles.setCameraAndRenderer(this.camera, this.renderer);
|
|
|
|
this.modules.tilesManage.addTiles(tiles);
|
|
|
|
switch (addMode) {
|
|
case "command":
|
|
App.execute(new AddObjectCommand(tiles), `Add 3DTiles: ${tiles.group.name}`);
|
|
break;
|
|
case "normal":
|
|
App.addObject(tiles);
|
|
App.select(tiles);
|
|
break;
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 移除瓦片
|
|
*/
|
|
removeTiles(tiles:Tiles){
|
|
this.modules.tilesManage.removeTiles(tiles);
|
|
|
|
App.execute(new RemoveObjectCommand(tiles));
|
|
}
|
|
|
|
/**
|
|
* 获取画布的截屏图片
|
|
* @returns Promise<HTMLImageElement> 截屏的图片对象
|
|
*/
|
|
getViewportImage() {
|
|
return new Promise<HTMLImageElement>((resolve, rejcet) => {
|
|
// @ts-ignore
|
|
const _preserveDrawingBuffer = this.renderer.getContext().preserveDrawingBuffer;
|
|
// @ts-ignore
|
|
this.renderer.getContext().preserveDrawingBuffer = true;
|
|
this.modules.viewHelper.hidden = false;
|
|
this.render();
|
|
|
|
this.renderer.domElement.toBlob((blob) => {
|
|
if (blob === null) {
|
|
rejcet('Screenshots fail');
|
|
return;
|
|
}
|
|
|
|
const image = new Image();
|
|
image.src = URL.createObjectURL(blob);
|
|
|
|
// @ts-ignore
|
|
this.renderer.getContext().preserveDrawingBuffer = _preserveDrawingBuffer;
|
|
this.modules.viewHelper.hidden = true;
|
|
this.render();
|
|
|
|
resolve(image);
|
|
});
|
|
});
|
|
}
|
|
} |