three.js - ThreeJS:如何使对象与背景颜色相同?
问题描述
最终,我想让一个无定形的“球体”看起来像是在雾后面……因此,当球体靠近屏幕时,球体更加大胆。我认为这样做的一种方法是使对象和背景具有相同的颜色,然后用照明“为对象着色”。
但是,当我使球体与背景颜色相同时,球体上的照明(任何颜色或类型)不再出现。
有人可以帮忙吗?谢谢!
```
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 }}
/>
}
}
```
解决方案
推荐阅读
- spring-boot - 并行创建多个 API 调用,但不要等待使用 Spring Boot 项目反应器的任何其他响应
- go - 如何将此查询转换为 rethinkdb?
- apache - 如何使用 VirtualHost 将 http://example.com 重定向到 apache2.conf 中的 https://example.com
- java - TestNG 拦截TestClassConstructor 类比
- networking - 为什么 UDP 用于 DNS 请求而不是 TCP?
- c# - 违反 UNIQUE KEY 约束;错误号:2627;输入数据无重复
- react-router - React Router v6 从子路由器导航到绝对路径
- sql-insert - 变量托管的查询中的 INSERT INTO SELECT 错误
- machine-learning - 显示反转 ROC 曲线
- java - 打开特定活动时,Android 区域设置重置为默认语言