此篇将threeJs相机的应用做一下记录，简略的封装为vue组件，以备参考。
之后缓缓欠缺此文。
一、立方相机cubeCamera
cubeCamera，结构一个蕴含6个PerspectiveCameras（透视摄像机）的立方摄像机，并将其拍摄的场景渲染到一个WebGLCubeRenderTarget上，生成指标纹理(WebGLCubeRenderTarget.texture)。
render target是一个缓存，缓存显卡为正在后盾渲染的场景绘制的像素。被用于不同的成果，例如用在一个图像渲染到屏幕上之前先做一些前期解决。
此处，将WebGLCubeRenderTarget.texture作为某个具备envMap属性材质的模型的环境贴图，即此模型反射的环境图案。
CubeCamera.vue
<template> <div> <div id="canvasContainer" style="width: 900px; height: 800px"></div> </div></template><script setup>import { onMounted } from 'vue'import * as THREE from 'three'import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'let scene, camera, renderer, width, height, controlsonMounted(() => { init()})function init() { const canvasContainer = document.querySelector('#canvasContainer') width = canvasContainer.clientWidth height = canvasContainer.clientHeight // 1、创立场景 scene = new THREE.Scene() // 2、创立渲染器 renderer = new THREE.WebGLRenderer() // renderer.setClearColor('#FFFFFF') // 设置渲染器的背景色 renderer.setClearColor('#88b4e1') renderer.setSize(width, height) // 设置渲染区域尺寸 canvasContainer.appendChild(renderer.domElement) // 将渲染器创立的canvas元素增加到容器元素 // 3、创立透视相机，用于拍摄主场景 camera = new THREE.PerspectiveCamera(fov, width / height, 0.1, 1000) camera.position.set(100, 50, 200) // 设置相机地位 camera.lookAt(scene.position) // 设置相机方向(指向的场景对象) // 4、创立立方相机 cubeCamera() // 为具备镜面反射成果的模型A拍摄反射的图形，而后作为A的环境贴图 // 要先创立renderer， 因为cubeCamera.update(renderer, scene) // 5、其余 pointLight() // 点灯光 initControls() // 用鼠标管制透视相机的拍摄角度 axisHelper() // 坐标辅助器 animate() }// 循环动画渲染function animate() { requestAnimationFrame(animate) renderer.render(scene, camera)}// 轨道控制器，使得相机围绕指标进行轨道静止function initControls() { controls = new OrbitControls(camera, renderer.domElement)}// 辅助三维坐标系function axisHelper() { const axis = new THREE.AxesHelper(250) scene.add(axis)}// 创立一个虚构的球形网格Mesh的辅助对象来模仿点光源PointLightfunction pointLight() { const pointLight = new THREE.PointLight(0xffffff, 1, 1000) pointLight.position.set(100, 150, 100) //点光源地位 scene.add(pointLight) // 创立点光源辅助对象模仿点光源 const pointLightHelper = new THREE.PointLightHelper(pointLight, 1) scene.add(pointLightHelper)}let sphere, box// 创立立方相机function cubeCamera() { // 创立cube相机的渲染指标 const cubeRenderTarget = new THREE.WebGLCubeRenderTarget(128, { format: THREE.RGBAFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter }); // 创立cube相机 const cubeCamera = new THREE.CubeCamera(1, 100000, cubeRenderTarget) scene.add(cubeCamera) // 创立具能反射环境的模型 const sphereGeometry = new THREE.SphereGeometry(50) const sphereMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000, envMap: cubeRenderTarget.texture }); sphere = new THREE.Mesh(sphereGeometry, sphereMaterial) sphere.position.set(80, -50, 0) scene.add(sphere) // 创立被反射的模型 const boxGeometry = new THREE.BoxGeometry(20, 20, 20) const boxMaterial = new THREE.MeshPhongMaterial({ color: 0x00ff00 }) box = new THREE.Mesh(boxGeometry, boxMaterial) box.position.set(80, 100, 0) scene.add(box) // 更新渲染指标对象 sphere.visible = false cubeCamera.position.copy(sphere.position) cubeCamera.update(renderer, scene) // 能够渲染场景了 sphere.visible = true}</script>效果图：