渲染一个场景

import * as THREE from 'three'
export default  class ViewPort{
    constructor(container,config){
        this.container = container
        this.config = config
        this.devicePix = window.devicePixelRatio
        
        return this.initScene()
    }
    
    // 初始化场景的方法必要的元素
    initScene(){
       // 1.场景
        const scene = new THREE.Scene()
       // 2.相机
       const camera = new THREE.PerspectiveCamera(
            60,
            this.container.clientWidth / this.container.clientHeight,
            0.1,
            1000
        )
         // 2.1 相机的位置
         camera.position.copy(this.config.cameraPosition)
         // 2.2相机加入场景
         scene.add(camera)
       // 3.渲染器
       const renderer = new THREE.WebGL1Renderer({
       // 表示是否可以设置背景色透明
           alpha:true,
           antialias:true
       })
         // 3.1渲染器的大小
         renderer.setSize(this.container.clientWidth, this.container.clientHeight)
         // 3.2渲染器的像素比
         renderer.setPixelRatio(this.devicePix)
         // 3.3将渲染器加入dom
         this.container.appendChild(renderer.domElement)
         function render(){
             window.requestAnimationFrame(render)
             // 传入渲染的场景，以及投射的相机
             renderer.render(scene, camera)

         }
         render()
       // 4.坐标轴辅助器
       const axes = new THREE.AxesHelper(5)
       scene.add(axes)
       // 5.轨道控制器 参数1为投射的相机，参数2为被监听事件的dom
       const orbitControls = new OrbitControls(camera, renderer.domElement)
       scene.add(orbitControls)
         // 返回scene
         return scene
    }
    
    
}