in backup/polaris/polaris-gl2/src/Polaris.GL2.ts [38:108]
constructor(props: PolarisGL2Props) {
super(props)
/**
* init html / canvas
*/
const container = this.props.container as HTMLDivElement
this.view.html.element // = document.createElement('DIV')
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)
const canvas = document.createElement('canvas')
canvas.style.position = 'absolute'
canvas.style.left = '0px'
canvas.style.top = '0px'
canvas.style.width = this.width + 'px'
canvas.style.height = this.height + 'px'
canvas.width = this.canvasWidth
canvas.height = this.canvasHeight
this.view.html.element.appendChild(canvas)
/**
* init THREE Camera
*/
const { cameraNear, cameraFar } = this.props
const camera = new THREE.PerspectiveCamera(
this.props.fov,
this.width / this.height,
cameraNear,
cameraFar
)
camera.matrixAutoUpdate = false
this.camera = camera
const syncCam = (cam) => {
camera.position.fromArray(cam.position)
camera.rotation.fromArray(cam.rotationEuler)
camera.updateMatrix()
camera.updateMatrixWorld(true)
// @TODO update cameraNear/cameraFar
}
this.cameraProxy.config.onUpdate = syncCam
this.cameraProxy['onUpdate'] = syncCam
if (this.props.cameraControl) {
if (capacity.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.renderer = new GL2Renderer({
...this.props,
canvas,
})
this.renderer.scene.add(this.view.three.groupWrapper)
}