Three.js合并不同几何体与材质对象失败：一显一隐问题求助

我一看你遇到的情况就明白啦——核心问题出在Three.js里的线框对象和网格对象是完全不同的渲染类型，它们的几何体和材质根本没法直接合并到一块儿用，这才导致你总是只能看到其中一个。下面给你拆解原因和解决办法：

一、为啥会出现“一个可见一个隐藏”？ #

你尝试用THREE.Geometry合并两种几何体，但这里有两个关键误区：

1. LineBasicMaterial是专门给THREE.Line/THREE.LineSegments这类线框对象用的，不能套在网格（Mesh）上；
2. 图片材质（比如MeshBasicMaterial）只能给Mesh用，没法给线框对象用；
3. 合并后的几何体没法同时适配两种不同的渲染对象，最终只有一种材质能生效，另一种自然就被“隐藏”了。

二、最简单的正确实现：分开创建，一起展示 #

别想着合并几何体啦，直接分别做线框和图片两个独立对象，把它们加到同一个容器里就能同时显示，操作起来超简单：

代码示例（直接能用） #

// 1. 先做你的线框正方形
const squareGeometry = new THREE.Geometry();
squareGeometry.vertices.push(
  new THREE.Vector3(startX, startY, 0),
  new THREE.Vector3(endX, startY, 0),
  new THREE.Vector3(endX, endY, 0),
  new THREE.Vector3(startX, endY, 0),
  new THREE.Vector3(startX, startY, 0) // 最后加个起点，让线框闭合
);
const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff0000 }); // 红色线框
const squareLine = new THREE.Line(squareGeometry, lineMaterial);

// 2. 再做居中的图片网格
const imgTexture = new THREE.TextureLoader().load('你的图片路径.jpg');
const imgMaterial = new THREE.MeshBasicMaterial({ 
  map: imgTexture, 
  transparent: true // 如果图片有透明区域就开这个
});
const imgGeometry = new THREE.PlaneGeometry(图片宽度, 图片高度); // 用平面几何体承载图片
const imgMesh = new THREE.Mesh(imgGeometry, imgMaterial);

// 3. 把俩对象放到同一个组里（方便统一调位置）
const container = new THREE.Group();
container.add(squareLine);
container.add(imgMesh);

// 4. 最后把组加到场景里就行
scene.add(container);

三、额外要注意的小细节 #

• 要是出现互相遮挡的情况，调一下它们的z轴位置就行，比如给线框加个微小偏移：squareLine.position.z = 0.01，这样线框就会显示在图片上面；
• 旧版的THREE.Geometry已经被废弃啦，建议换成THREE.BufferGeometry，性能更好还兼容最新版本，给你个线框的BufferGeometry示例：

  const squareVertices = new Float32Array([
    startX, startY, 0,
    endX, startY, 0,
    endX, endY, 0,
    startX, endY, 0,
    startX, startY, 0
  ]);
  const squareBufferGeo = new THREE.BufferGeometry();
  squareBufferGeo.setAttribute('position', new THREE.BufferAttribute(squareVertices, 3));
  const squareLine = new THREE.Line(squareBufferGeo, lineMaterial);
  

四、如果非要“合并”成一个对象（不推荐） #

要是你执念于一个对象同时显示，也可以用Mesh的材质同时开启纹理和线框，但这种线框是跟着平面几何体的顶点走的，可能和你自定义的正方形不完全一致：

const planeGeo = new THREE.PlaneGeometry(图片宽度, 图片高度);
const combinedMaterial = new THREE.MeshBasicMaterial({
  map: imgTexture,
  wireframe: true,
  wireframeLinewidth: 2,
  transparent: true
});
const combinedMesh = new THREE.Mesh(planeGeo, combinedMaterial);
scene.add(combinedMesh);

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