在three.js中如何使球体锐利？

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 种颜色/分区，则在 gradientMap 中放置超过 2 种颜色