in backup/polaris/polaris-gsi/src/PolarisGSI.ts [69:171]
constructor(props: PolarisGSIProps) {
const mergedProps = {
...DefaultPolarisGSIProps,
...props,
}
super(mergedProps)
this.props = mergedProps
this.view = {
html: new HtmlView(),
gsi: new GSIView(),
}
for (const key in this.view) {
this.view[key].init(this)
}
/**
* init html / canvas
*/
const container = this.props.container as HTMLDivElement
// render html view
this.view.html.element
this.view.html.element.style.position = 'relative'
this.view.html.element.style.width = this.width + 'px'
this.view.html.element.style.height = this.height + 'px'
this.view.html.element.style.overflow = 'hidden'
this.view.html.element.className = 'polaris-wrapper'
container.appendChild(this.view.html.element)
// pointer 事件
this._initPointerEvents()
// 相机控制事件
if (this.props.cameraControl) {
if (isTouchDevice) {
this.cameraControl = new TouchControl({
camera: this.cameraProxy,
element: this.view.html.element as HTMLElement,
})
} else {
this.cameraControl = new PointerControl({
camera: this.cameraProxy,
element: this.view.html.element as HTMLElement,
})
}
this.cameraControl.scale = 1.0 / (this.ratio ?? 1.0)
}
/**
* Props listener
*/
// Renderer props update listener
const rendererProps = [
'background',
'cameraNear',
'cameraFar',
'fov',
'viewOffset',
'lights',
'postprocessing',
] as const
this.watchProps(rendererProps, (e) => {
// const changedProps = e.props
const newProps = {}
for (let i = 0; i < rendererProps.length; i++) {
const key = rendererProps[i]
newProps[key] = this.getProp(key)
}
if (this.renderer) {
this.cameraProxy.fov = newProps['fov']
this.renderer.updateProps(newProps)
}
})
// Responsive for container resize
this.watchProps(['autoResize'], () => {
const autoResize = this.getProp('autoResize')
if (autoResize) {
if (!this._resizeListener) {
this._resizeListener = setInterval(() => {
const width = container.clientWidth
const height = container.clientHeight
if (width !== this.width || height !== this.height) {
this.resize(width, height, this.ratio)
this.dispatchEvent({
type: 'viewChange',
cameraProxy: this.cameraProxy,
polaris: this,
})
}
}, 200)
}
} else if (this._resizeListener) {
clearInterval(this._resizeListener)
this._resizeListener = undefined
}
})
}