| | |
| | | import { Scene, GridHelper,AxesHelper } from 'three'; |
| | | import { Scene, GridHelper, AxesHelper } from 'three'; |
| | | import Stats from "three/examples/jsm/libs/stats.module"; |
| | | |
| | | import World from "./world/world"; |
| | | import Camera from "./camera"; |
| | | import Renderer from "./renderer"; |
| | | import CSSRenderer from './cssRenderer'; |
| | | |
| | | // 工具类 |
| | | import Sizes from "./utils/sizes"; |
| | |
| | | export default class Experience { |
| | | constructor(canvas) { |
| | | this.canvas = canvas; |
| | | this.sizes = new Sizes(); |
| | | this.container = canvas.parentElement; |
| | | this.sizes = new Sizes(this.canvas); |
| | | this.time = new Time(); |
| | | this.scene = new Scene(); |
| | | this.camera = new Camera(this); |
| | | this.renderer = new Renderer(this); |
| | | this.cssRenderer = new CSSRenderer(this); |
| | | this.world = new World(this); |
| | | |
| | | // const size = 200; |
| | | // const divisions = 200; |
| | | // const size = 100; |
| | | // const divisions = 100; |
| | | |
| | | // const gridHelper = new GridHelper(size, divisions); |
| | | // this.scene.add(gridHelper); |
| | | |
| | | this.stats = new Stats(); |
| | | document.querySelector('.map-container').appendChild(this.stats.dom); |
| | | // this.stats = new Stats(); |
| | | // document.querySelector('.map-container').appendChild(this.stats.dom); |
| | | |
| | | |
| | | |
| | | |
| | | // 帧 |
| | | this.time.on('tick', () => { |
| | |
| | | this.camera.update(); |
| | | this.world.update(); |
| | | this.renderer.update(); |
| | | this.stats.update(); |
| | | this.cssRenderer.update(); |
| | | // this.stats.update(); |
| | | } |
| | | |
| | | /** |
| | | * 销毁场景 |
| | | */ |
| | | destroy() { |
| | | this.disposeObject(); |
| | | this.resetObject(); |
| | | } |
| | | |
| | | disposeObject() { |
| | | this.time.destroy(); |
| | | this.world.destroy(); |
| | | this.camera.destroy(); |
| | | this.renderer.destroy(); |
| | | this.cssRenderer.destroy(); |
| | | this.scene.traverse((child) => { |
| | | if (child.material) { |
| | | // 可能存在材质为数组的情况 |
| | | if (child.material instanceof Array) { |
| | | child.material.forEach((item) => item.dispose()); |
| | | } else { |
| | | child.material.dispose(); |
| | | if (child.material.map) { |
| | | child.material.map.dispose(); |
| | | } |
| | | } |
| | | } |
| | | if (child.geometry) { |
| | | child.geometry.dispose(); |
| | | child.geometry.attributes = null; // 这些属性包括position, normal, uv等等 |
| | | } |
| | | child = null; |
| | | }); |
| | | } |
| | | |
| | | resetObject() { |
| | | this.world = null; |
| | | this.camera = null; |
| | | this.renderer = null; |
| | | this.cssRenderer = null; |
| | | this.scene = null; |
| | | this.canvas = null; |
| | | this.container = null; |
| | | this.time = null; |
| | | this.sizes = null; |
| | | } |
| | | } |