文章/答案/技术大牛

发布

社区首页 >问答首页 >具有特定光的光网格三js

问具有特定光的光网格三js
EN

Stack Overflow用户

提问于 2019-02-21 12:55:27

回答 1查看 3.5K关注 0票数 4

我有一个场景，有几个物体和一些物体，在这种情况下，球体，我想受到灯光的影响，颜色是粉红色和蓝色。但我也有一个管的几何形状，应该只受白光影响，而不受粉红色和蓝色的灯光影响。

有关问题的演示，请参见下图:现在发生了什么：

但我想要的不是粉红色和蓝色，而是灰色：

目前，我这样做的meshBasicMaterial，但这阻止了管看起来三维。

那么，如何使用不受粉红和蓝光影响的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 );

如果需要任何额外的信息或不清楚的事情，让我知道，这样我就可以澄清！

light

javascript

three.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-21 14:41:13

使用层：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);
};

票数 6

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54807618

复制

相似问题

问具有特定光的光网格三js
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有特定光的光网格三jsEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问具有特定光的光网格三js
EN