ThreeJS：如何使一个物体和背景颜色相同？

Question

最终，我想使一个无定形的“球体”看起来像是在雾的后面...因此，当朝向屏幕时，该球体变得更大胆。我认为，这样做的一种方法是使对象和背景具有相同的颜色，然后用照明“给对象着色”。

但是，当我将球体设置为与背景相同的颜色时，球体上的（任何颜色或类型的）照明不再出现。

有人可以帮忙吗？谢谢！

```

class Blob extends Component {
 constructor(props){
  super(props);
  this.state = {

}

}

componentDidMount(){
const width = this.mount.clientWidth;
const height = this.mount.clientHeight;

this.scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(75, width/height, 0.8, 1000);
this.camera.position.z = 20;
this.scene.add(this.camera);

this.renderer = new THREE.WebGLRenderer({ antialias: true});
this.renderer.setClearColor('rgb(255,255,255)');
this.renderer.setSize(width, height);
this.mount.appendChild(this.renderer.domElement);

this.light = new THREE.AmbientLight('white');
this.scene.add(this.light);

this.pointLight = new THREE.DirectionalLight(0xf442b6, 1, 150);
this.pointLight.position.set(50, 50, -50);
this.pointLight.castShadow = true; 
this.scene.add(this.pointLight);

this.spotLight = new THREE.SpotLight(0xFFF);
this.spotLight.position.set(-40, 110, 20);
this.spotLight.castShadow = true;
this.spotLight.shadow.mapSize = new THREE.Vector2(1024,1024);
this.spotLight.shadow.far = 120;
this.spotLight.shadow.near = 40;
this.scene.add(this.spotLight);

this.geometry = new THREE.SphereGeometry(8, 7, 20);
this.material = new THREE.MeshPhongMaterial({ color: 'rgba(255,70,111,0.5)'});
this.sphere = new THREE.Mesh(this.geometry, this.material);
this.scene.add(this.sphere);

this.start();
}

componentWillUnmount(){
  this.stop();
  this.mount.removeChild(this.renderer.domElement);
 }

 start = () => {
  if (!this.frameId) {
    this.frameId = requestAnimationFrame(this.animate);
  }
}

stop = () => {
  cancelAnimationFrame(this.frameId);
}

animate = () => {
 this.sphere.rotation.x += 0.01
  this.sphere.rotation.y += 0.01
 this.renderScene()
 this.frameId = window.requestAnimationFrame(this.animate);
}

 renderScene = () => {
  this.renderer.render(this.scene, this.camera);
 }


 render(){
   return <div
     style={{ width: `${window.innerWidth}px`, height: `${window.innerHeight}px` }}
     ref={(mount) => { this.mount = mount }}
   />
 }

}

```