Three.js问题：线框未拾取正确颜色，绿色线框显示为白色

嘿，我来帮你排查这个问题～你遇到的情况其实挺常见的，核心原因出在材质选择和光照设置上，我给你拆解清楚：

问题根源 #

你用的THREE.MeshLambertMaterial是依赖光照的漫反射材质，如果你的场景里没有添加任何光源，这种材质没办法正确计算颜色，就会默认显示成白色（或者偏暗的色调，取决于Three.js的默认渲染逻辑）。哪怕你开启了wireframe: true，这个材质的颜色渲染还是和光照绑定的，没光照就没法正常显示你设置的绿色。

两种可行的解决方案 #

方案1：改用不依赖光照的基础材质（最简单快捷） #

直接把MeshLambertMaterial换成MeshBasicMaterial，这种材质不受光照影响，会直接渲染你设置的颜色，非常适合线框的快速展示：

var cubeGeometry = new THREE.BoxGeometry( 3, 6, 1 );
// 替换为MeshBasicMaterial
var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0x00FF00, wireframe: true } );
var cube = new THREE.Mesh( cubeGeometry, cubeMaterial );

方案2：保留Lambert材质，给场景添加光源 #

如果你之后需要Lambert材质的光照效果（比如要加阴影、模拟自然光变化），那必须给场景至少添加一个光源，比如环境光+方向光的组合：

// 先确保你有创建场景的代码
var scene = new THREE.Scene();

// 你的立方体原有代码
var cubeGeometry = new THREE.BoxGeometry( 3, 6, 1 );
var cubeMaterial = new THREE.MeshLambertMaterial( { color: 0x00FF00, wireframe: true } );
var cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
scene.add(cube);

// 添加环境光（基础补光，避免物体完全黑暗）
var ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

// 添加方向光（模拟太阳光，产生自然的明暗变化）
var directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);

添加光源后，Lambert材质的绿色就会正常显示出来了。

小额外提示 #

如果之后你想要更纯粹的线框效果，还可以试试LineBasicMaterial配合EdgesGeometry来生成仅线框的立方体，但对于你当前的需求来说，上面两个方案已经完全够用啦～

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