threejs物体内部的贴图如何透视

Question

如图，有两个物体，矩形在球体内部，球体半透明，矩形显示公司logo。现在的问题是内部立方体的贴图无法呈现，如果内部设置transparent:true内部就变成全透明的了，如下图：

如果内部把transparent关掉，里面矩形的背景就变成黑色的了。。

想要实现的效果是：球体半透明可以显示球体内部的立方体的半透明贴图。已经尝试过各种搜索还是未果，希望可以得到解答，谢谢！

具体代码如下：

geometry部分

const Geometry = {
    sphere: (num = 60, scale = false) => {
        const geometry = new THREE.SphereGeometry(num, 40, 40);
        if (!scale) return geometry;
        const s = Math.random().toFixed(2);
        geometry.scale(s, s, s);
        return geometry;
    },
    innerCube2: (img, r, p, angle = 60, ) => {
        const width = Maths.sin(angle) * r * 2
        const height = Maths.cos(angle) * r * 2
        const depth = 1
        const geometry = new THREE.BoxGeometry(width, height, depth)
        const [x, y, z] = p;
        const mesh = new THREE.Mesh(geometry, Material.imgMaterial(img)); //网格模型对象Mesh
        mesh.position.set(x, y, z);
        return mesh;
    },
    }

material部分：

const Material = {
transparent: new THREE.MeshLambertMaterial({
        color: "purple",
        opacity: 0.1,
        transparent: true,
        side: THREE.DoubleSide,
    }),
  imgMaterial: (IMG) => {
        const texture = new THREE.TextureLoader().load(IMG);
        console.log("IMG", IMG);
        return new THREE.MeshBasicMaterial({
            //side: THREE.DoubleSide, //两面可见
            // transparent: true,
            //lights: true,
            map: texture,
            //opacity: 0.4,
            color: '#fff',
        });
    },
}

main.js

const mesh = new THREE.Mesh(
      Geometry.sphere(LONG, false),
      Material.transparent
    ); //网格模型对象Mesh
const innerCube = Geometry.innerCube2(pics[0], LONG, [
      x * 100,
      y * 100,
      z * 100,
    ]);
scene.add(innerCube);
scene.add(mesh);

Answer 1

在这上找到答案了，内部渲染顺序的问题。看来得好好学学webgl了。https://stackoverflow.com/questions/15994944/transparent-objects-in-threejs?noredirect=1&lq=1

最简单的方式是写这一句：
renderer.sortObjects = false;