threeJscamera

本文记录threeJscamera的使用，简单封装为vue组件，供参考。然后逐步完善这篇文章。1、立方体相机cubeCameracubeCamera构造一个包含6个PerspectiveCameras（透视相机）的立方体相机，将其拍摄的场景渲染到一个WebGLCubeRenderTarget生成目标贴图（WebGLCubeRenderTarget.texture）。渲染目标是一个缓冲区，用于缓存显卡为后台渲染场景绘制的像素。用于不同的效果，例如在将图像渲染到屏幕之前对图像进行一些后期处理。这里WebGLCubeRenderTarget.texture作为一个envMap属性material模型的环境贴图，即这个模型所反映的环境模式。CubeCamera.vue注：光源与两个模型的位置关系效果图：2.阵列相机1.ArrayCamera.vue2.@/composables/threejs/camera.jsimport*asTHREEfrom'three'//创建透视相机函数usePerspectiveCamera(width,height,position={x:0,y:0,z:0},lookPos={x:0,y:0,z:0},fov=75,near=0.1,far=1000){constcamera=新三。PerspectiveCamera(fov,width/height,0.1,1000)相机。位置。set(position.x,position.y,position.z)//设置相机位置camera.lookAt(lookPos.x,lookPos.y,lookPos.z)//设置相机方向（指向场景对象）returncamera}//2.创建相机数组//Canvaswidth,heightfunctionuseArrayCamera(cameras,width,height,colNum){constrowNum=Math.ceil(cameras.length/colNum)constcameraArrs=[]for(leti=0;i