| | |
| | | |
| | | constructor(dom) { |
| | | this.dom = dom; |
| | | this.fullWidth = dom.offsetWidth; |
| | | this.fullHeight = dom.offsetHeight; |
| | | |
| | | this.objects = []; |
| | | } |
| | |
| | | this.controls.autoRotateSpeed = 2; |
| | | } |
| | | |
| | | getFullWidth = () => { |
| | | return this.dom.offsetWidth; |
| | | } |
| | | |
| | | getFullHeight = () => { |
| | | return this.dom.offsetHeight; |
| | | } |
| | | |
| | | addObject = (object) => { |
| | | this.scene.add(object); |
| | | this.objects.push(object); |
| | |
| | | } |
| | | |
| | | initCamera = () => { |
| | | const camera = new THREE.PerspectiveCamera(70, this.fullWidth / this.fullHeight, 1, 60000); |
| | | const camera = new THREE.PerspectiveCamera(70, this.getFullWidth() / this.getFullHeight(), 1, 60000); |
| | | camera.position.set(-300, 300, 300); |
| | | this.scene.add(camera); |
| | | return camera; |
| | |
| | | // this.renderer.toneMapping = THREE.ReinhardToneMapping; |
| | | renderer.toneMapping = THREE.ACESFilmicToneMapping; |
| | | renderer.setPixelRatio(window.devicePixelRatio); |
| | | renderer.setSize(this.fullWidth, this.fullHeight); |
| | | renderer.setSize(this.getFullWidth(), this.getFullHeight()); |
| | | this.dom.appendChild(renderer.domElement); |
| | | return renderer; |
| | | } |
| | |
| | | |
| | | windowResize = () => { |
| | | this.resizeHandler = () => { |
| | | this.camera.aspect = this.fullWidth / this.fullHeight; |
| | | this.camera.aspect = this.getFullWidth() / this.getFullHeight(); |
| | | this.camera.updateProjectionMatrix(); |
| | | this.renderer.setSize(this.fullWidth, this.fullHeight); |
| | | this.renderer.setSize(this.getFullWidth(), this.getFullHeight()); |
| | | }; |
| | | window.addEventListener('resize', this.resizeHandler, false); |
| | | } |