constructor()

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)
	}