three.js项目CubeCamera调用update时出现'Cannot read properties of undefined (reading 'up')'错误求助

错误信息 #

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到场景层级：取消注释this.drone.add(this.cubecam);这行代码。CubeCamera内部包含6个相机用于渲染六面立方图，这些相机需要正确的场景层级上下文来初始化up向量等坐标属性，未添加到任何父对象（如drone组）会导致内部坐标系初始化失败，触发"reading 'up'"错误。
• 优化相机位置设置：将CubeCamera添加到drone组后，可将其本地位置设为(0,0,0)，这样它会自动继承drone的世界位置，无需手动copy位置，代码可修改为：

  this.cubecam.position.set(0,0,0);
  this.drone.add(this.cubecam);
  

  这样反射相机的位置会始终与载具中心保持一致，反射效果更准确。
• 验证材质兼容性：确保使用的材质支持环境贴图（envMap），当前代码中使用的MeshBasicMaterial是支持的，若后续更换材质需确认材质类型是否兼容。

内容的提问来源于stack exchange，提问作者Edward