最终,我想使一个无定形的“球体”看起来像是在雾的后面...因此,当朝向屏幕时,该球体变得更大胆。我认为,这样做的一种方法是使对象和背景具有相同的颜色,然后用照明“给对象着色”。
但是,当我将球体设置为与背景相同的颜色时,球体上的(任何颜色或类型的)照明不再出现。
有人可以帮忙吗?谢谢!
```
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 }}
/>
}
}
```