我有一个带有几个物体和一些物体的场景,在这种情况下,球体我想受到粉红色和蓝色的灯光的影响。但我也有一个管道几何形状,只应受到白光的影响,不受粉红色和蓝色灯光的影响。
请看下面的图片以示问题:现在发生了什么:但是我希望管子不是粉红色和蓝色而是灰色:
目前我使用meshBasicMaterial
这样做,但这可以防止管看3D。
那么我如何使用不受粉红色和蓝色灯光影响的MeshLambertMaterial
创建这个灰色管?
请参阅下面的代码,了解我现在如何生成场景:
# Generating of spheres:
for (var i = 0; i < 5; i++) {
var SphereGeometry = new THREE.SphereGeometry(2, 20, 20);
var SphereMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
var Sphere = new THREE.Mesh(SphereGeometry, SphereMaterial);
Sphere.position.set(i * 7 -14, 0 + Math.random() * 5 - 2.5, 2);
spheresArray.push(Sphere);
scene.add(Sphere);
}
#Generation of tubes:
for (var i = 0; i < CurvesArray.length; i++) {
var geometry = new THREE.TubeGeometry( CurvesArray[i], 20, 0.5, 8, false );
var material = new THREE.MeshBasicMaterial( { color: 0xe3e3e3 } );
var mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
}
#and these are my lights:
var spotLight = new THREE.SpotLight( 0xff00cc );
spotLight.position.set( -10, 3, 30, 100 );
lightsArray.push(spotLight);
scene.add(spotLight);
var spotLight2 = new THREE.SpotLight( 0xaa99cc );
spotLight2.position.set( 5, 15, 10, 100 );
lightsArray.push(spotLight2);
scene.add(spotLight2);
var spotLight3 = new THREE.SpotLight( 0x0022bb );
spotLight3.position.set( 2, -15, 10, 100 );
lightsArray.push(spotLight3);
scene.add(spotLight3);
var light = new THREE.AmbientLight( 0x5f5f5f );
scene.add( light );
如果需要任何其他信息或某些内容不明确,请告诉我,以便我澄清!
使用图层:https://threejs.org/docs/#api/en/core/Object3D.layers
示例:https://jsfiddle.net/mmalex/1xr356zf/
分配对象和灯光层:
for (var i = 0; i < 5; i++) {
var SphereGeometry = new THREE.SphereGeometry(2, 20, 20);
var SphereMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
var Sphere = new THREE.Mesh(SphereGeometry, SphereMaterial);
Sphere.position.set(i * 7 -14, 0 + Math.random() * 5 - 2.5, 2);
// set layers to Spheres
Sphere.layers.set(i%3); // <<=== check here!
spheresArray.push(Sphere);
scene.add(Sphere);
}
将图层指定给灯光:
var spotLight = new THREE.SpotLight( 0xff00cc );
spotLight.position.set( -10, 3, 30, 100 );
spotLight.layers.set(0); // << === layer 0 is by default
lightsArray.push(spotLight);
scene.add(spotLight);
var spotLight2 = new THREE.SpotLight( 0xaa99cc );
spotLight2.position.set( 5, 15, 10, 100 );
spotLight2.layers.set(1); // << === layer 1 set to spotLight2
lightsArray.push(spotLight2);
scene.add(spotLight2);
var spotLight3 = new THREE.SpotLight( 0x0022bb );
spotLight3.position.set( 2, -15, 10, 100 );
spotLight3.layers.set(2); // << === layer 2 set to spotLight3
lightsArray.push(spotLight3);
scene.add(spotLight3);
并逐层渲染图层:
let animate = function() {
requestAnimationFrame(animate);
controls.update();
renderer.autoClear = true;
camera.layers.set(0); // << == switch camera between layers
renderer.render(scene, camera);
renderer.autoClear = false; // don't remove previous layer results
camera.layers.set(1); // << == switch camera between layers
renderer.render(scene, camera);
camera.layers.set(2); // << == switch camera between layers
renderer.render(scene, camera);
};