Question

我有一个简单的Three.js场景，其中包含球面和定向光。在球体上，您可以看到它逐渐变暗。如何更快地从明暗过渡。如何使灯光“更犀利”？

var scene, camera, renderer, controls, sphere, geometry, material, light;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 3;
camera.position.z = 6;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

geometry = new THREE.SphereGeometry(1, 32, 32);
material = new THREE.MeshPhongMaterial({
  color: 0x777777
});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 10);
scene.add(light);

renderer.render(scene, camera);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>

Answer 1

实现预期效果的一种方法是通过香椿遮蔽。因此，请尝试MeshToonMaterial。您还可以定义一个gradientMap来定义材质的不同亮区。

var scene, camera, renderer, controls, sphere, geometry, material, light;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 3;
camera.position.z = 6;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

geometry = new THREE.SphereGeometry(1, 32, 32);
material = new THREE.MeshToonMaterial({
  color: 0x777777
});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 10);
scene.add(light);

renderer.render(scene, camera);

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

Answer 2

您可以设置material.shininess。 See this

var scene, camera, renderer, controls, sphere, geometry, material, light;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 1;
camera.position.z = 2;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

geometry = new THREE.SphereGeometry(1, 32, 32);
material = new THREE.MeshPhongMaterial({
  color: 0x777777,
  shininess: 400,
});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 10);
scene.add(light);

renderer.render(scene, camera);

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script>

即使不使用镜面高光，即使使用MeshToonMaterial，也需要将shininess设置为0

var scene, camera, renderer, controls, sphere, geometry, material, light;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 1;
camera.position.z = 2;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

geometry = new THREE.SphereGeometry(1, 32, 32);
material = new THREE.MeshToonMaterial({
  color: 0x777777,
  shininess: 0,

});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 10, 10);
scene.add(light);

renderer.render(scene, camera);

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

此外，除非使用gradientMap

，否则相对光量是硬编码的。

var scene, camera, renderer, controls, sphere, geometry, material, light;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 0;
camera.position.z = 2;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

geometry = new THREE.SphereGeometry(1, 32, 32);
material = new THREE.MeshToonMaterial({
  color: 'red',
  shininess: 0,
  gradientMap: new THREE.DataTexture(
    new Uint8Array([
        0,   // black (color away from light multiplied by color of material)
      255,   // white (color toward light multiplied by material
    ]),
    2, // width of texture
    1, // height of texture,
    THREE.LuminanceFormat,  // format of texture
  ),
});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(50, 50, 30);
scene.add(light);

renderer.render(scene, camera);

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

请注意，上面的gradientMap是2x1像素纹理，因此在面对光线与不面对光线之间的截止时间为50％。要移动截止点，请使gradientMap更大。例如，带有black, black, white, white, white的5x1像素纹理将为40％黑色，60％白色

var scene, camera, renderer, controls, sphere, geometry, material, light;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 0;
camera.position.z = 2;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

geometry = new THREE.SphereGeometry(1, 32, 32);
material = new THREE.MeshToonMaterial({
  color: 'red',
  shininess: 0,
  gradientMap: new THREE.DataTexture(
    new Uint8Array([
        0,   // black (color away from light multiplied by color of material)
        0,
      255,   // white (color toward light multiplied by material
      255, 
      255,
    ]),
    5, // width of texture
    1, // height of texture,
    THREE.LuminanceFormat,  // format of texture
  ),
});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(50, 50, 30);
scene.add(light);

renderer.render(scene, camera);

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

如果要显式设置2种颜色，则使gradientMap具有颜色并将材料颜色设置为白色

var scene, camera, renderer, controls, sphere, geometry, material, light;

scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 0;
camera.position.z = 2;
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);

geometry = new THREE.SphereGeometry(1, 32, 32);
material = new THREE.MeshToonMaterial({
  color: 'white',
  shininess: 0,
  gradientMap: new THREE.DataTexture(
    new Uint8Array([
        255, 0, 255,   // purple (color away from light multiplied by color of material)
        0, 255, 255,   // cyan (color toward light multiplied by material
    ]),
    2, // width of texture
    1, // height of texture,
    THREE.RGBFormat,  // format of texture
  ),
});
sphere = new THREE.Mesh(geometry, material);
scene.add(sphere);

light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(50, 50, 30);
scene.add(light);

renderer.render(scene, camera);

<script src="https://cdn.jsdelivr.net/npm/three@0.115/build/three.js"></script>

如果您想要2种以上的颜色/分区，则将2种以上的颜色放置在gradientMap中

在three.js中，如何使球体上的光更清晰？

2 个答案: