自从我看到我的这个
three.js
项目以来已经有几年了(当有人输入全名PlaneBufferGeometry
时)。它包含许多车辆,应通过 CubeCamera
反映它们周围(以及彼此之间)的环境。但是,当我激活此选项时,出现以下错误:
Uncaught TypeError: Cannot read properties of undefined (reading 'up')
at CubeCamera.updateCoordinateSystem (three.module.js:12739:13)
at CubeCamera.update (three.module.js:12803:9)
at CLASS_drone.update (blend.levels.php:2960:19)
这就是
CLASS_drone
中发生的事情:
function CLASS_drone(x,y,z,path,pts)
{
this.x = x;
this.y = y+0.25;
this.z = z;
this.path = path;
this.ptstart = pts;
this.pts = pts;
this.drone = new THREE.Group();
this.body = drone.clone();
this.bidx = 0;
this.widx = 0;
this.fps = 0;
for(var i = 0; i < this.body.children.length; i++)
{
if(this.body.children[i].name == "BODY")
this.bidx = i;
if(this.body.children[i].name == "WINDOW")
this.widx = i;
}
this.drone.add(this.body);
this.drone.position.set(this.x,this.y,this.z);
this.CRT = new THREE.WebGLCubeRenderTarget( 32, { format: THREE.RGBFormat, generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
this.cubecam = new THREE.CubeCamera(0.1, 3, this.CRT);
this.envset = document.getElementById("qcubemap").checked;
// this.drone.add(this.cubecam);
this.drone.traverse(function(item)
{
if(item.isMesh)
{
if(item.name=="WINDOW")
item.material = new THREE.MeshBasicMaterial({color:0x00FFFF,reflectivity:0.75});
else if(item.name=="LAMP")
item.material = matph_drLmp;
else if(item.name=="BODY")
item.material = new THREE.MeshBasicMaterial({color:0xFFFFFF,reflectivity:0.5});
else
item.material = matph_drBod;
item.material.needsUpdate = true;
}
});
this.body.children[this.bidx].material.envMap = this.CRT.texture;
this.body.children[this.widx].material.envMap = this.CRT.texture;
...
this.update = function(raftime)
{
if(this.active==true)
{
if(this.body.visible==true)
{
if(camera.position.distanceTo(this.drone.position)<10 && document.getElementById("qcubemap").checked==true && raftime > this.fps + (timing * 5))
{
this.cubecam.clear(renderer);
this.drone.visible = false;
this.cubecam.position.copy(this.drone.position);
>> this.cubecam.update(renderer,scene);
this.drone.visible = true;
this.fps = raftime;
}
这就是我加载的方式
three.js
:
<script type="importmap">
{
"imports":
{
"three": "https://threejs.org/build/three.module.js",
"OBJLoader": "https://threejs.org/examples/jsm/loaders/OBJLoader.js"
}
}
</script>
CubeCamera
包含 6 个 PerspectiveCamera
对象作为其 children
(children
继承自 Object3D
)。
错误来自尝试设置其中一台摄像机的
up
值的线路。这是说相机不存在。
你正在毁坏相机...
this.update = function(raftime)
{
if(this.active==true)
{
if(this.body.visible==true)
{
if(camera.position.distanceTo(this.drone.position)<10 && document.getElementById("qcubemap").checked==true && raftime > this.fps + (timing * 5))
{
this.cubecam.clear(renderer); // !!! Here !!!
clear
函数继承自Object3D
,只是删除对象的所有children
。因此,通过在 this.cubecam
上调用它,您将清空其 children
,即 6 个 PerspectiveCamera
。