three.js几何体位置、大小是怎么算的呀？

Question

几何体位置、大小是怎么算的呀？

import {

WebGLRenderer,

PerspectiveCamera,

Scene,

BoxGeometry,

MeshBasicMaterial,

Mesh,

AxesHelper,

AmbientLight

} from'../lib/three.module.js'

exportclassapp {

constructor(selector,op) {

this.op=op

this.init(selector)

    }

init(selector) {

this.container=this.getContainer(selector)

this.render=this.initRender()

this.scene=this.initScene()

this.camera=this.initCamera()

this.initBoxGeometry()

this.render.render(this.scene,this.camera)

    }

/**

     * 

     * @param{*}selector 承载元素

     * 返回承载对象和承载对象的宽高左右位置(width\height\left\top)

     */

getContainer(selector) {

selector=_query(selector)

return_getBox(selector)

    }

/**

     * 返回渲染对象 WebGLRenderer

     */

initRender() {

constrender=newWebGLRenderer({

            antialias:true,//抗锯齿

            alpha:true,// 透明

            logarithmicDepthBuffer:true// 对数深度缓存

        })

render.setPixelRatio(window.devicePixelRatio)// 指的是物理像素和设备独立像素的比  物理像素 / 设备独立像素（dips）

render.setSize(this.container.box.width,this.container.box.height)// 渲染的canvas宽高

this.container.el.appendChild(render.domElement)//添加到指定承载元素 默认元素：body

returnrender

    }

/**

     * PerspectiveCamera：透视摄像机 

     * 返回摄像机对象

     */

initCamera() {

constcamera=newPerspectiveCamera(

45,// 可视角度

this.container.box.width/this.container.box.height,// width / height,通常设置为canvas元素的高宽比

.1,// 近端距离

1000// 远端距离

)

camera.position.set(0,0,500)// camera所在位置

camera.lookAt(this.scene.position)// camera 看向场景中心的位置

returncamera

    }

/**

     * 返回场景对象

     */

initScene() {

returnnewScene()

    }

initBoxGeometry() {

constboxBuffer=[]

for(leti=0; i<1000; i++) {

constbox=newBoxGeometry(

Math.random()*20,

Math.random()*20,

Math.random()*20

)

constmaterial=newMeshBasicMaterial({

                color:Math.random()*0xffffff

            })

constcube=newMesh(box,material)

cube.position.x=Math.random()*800-400

cube.position.y=Math.random()*800-400

cube.position.z=Math.random()*800-400

boxBuffer.push(cube)

        }

this.scene.add(...boxBuffer)

    }

}

/**

 * 

 * @param{*}selector  element

 * return element or elements

 */

exportfunction_query(selector) {

if(!selector)returndocument.querySelector('body')

if(!typeofselector==='string')returnselector

if(selector.startsWith('#'))returndocument.querySelector(selector)

returnArray.from(document.querySelectorAll(selector))

}

/**

 * 

 * @param{*}container element

 * 

 *return container width\ height\ left\ top

 */

exportfunction_getBox(container) {

if(!container)return

if(!Array.isArray(container))return {

        el:container,

        box:container.getBoundingClientRect()

    }

returncontainer.map((

el=>({

el,

            box:el.getBoundingClientRect()

        })

))

}