webpack配置glsl环境与封装Scene方法

配置glsl

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack:(config)=>{
    // 配置webpack,push进webpack规则
    config.module.rules.push({
      // 文件后缀
      test:/\.glsl$/,
      use:[
        {
          loader:'webpack-glsl-loader',
        }
      ]
    })
  }
})

封装Scene

export default class Scene{
    constructor(container){
        this.scene = new THREE.Scene()
        this.scene.background = new THREE.Color(0x000000)
        this.camera = CameraModule.camera
        this.camera.aspect = container.clientWidth / container.clientHeight
        this.renderer = RenderModule.renderer
        this.renderer.setSize(container.clientWidth,container.clientHeight)
        this.renderer.setPixelRatio(devicePixelRatio)
        container.appendChild(this.renderer.domElement)

        this.control = ControlModule.control
        this.axesHelper = axesHelper
        this.scene.add(this.camera)
        this.scene.add(this.axesHelper)
        this.animation()
        
      
    }   
     
    static getInstance(){
        return this.scene
    }

    animation(){
        this.renderer.render(this.scene,this.camera)
        requestAnimationFrame(this.animation.bind(this))
        this.control.update()
    }
   
}