极客观点
项目管理
HarmonyOS
几何体位置、大小是怎么算的呀？
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()
})
))
}