three.js - 即使有阴影，渲染的对象也看起来很平坦

Question

我是three.js新手。我已经玩了几天了，还没有弄清楚如何让我的对象看起来更逼真。我怀疑这个问题没有简单的答案，但是我有什么办法可以在不深入“渲染科学”的情况下提高渲染质量？也许我错过了一些配置。感谢您的任何建议！

这是用于渲染厨柜框架的相关代码。

this.renderer = new THREE.WebGLRenderer({ antialias: true })
this.renderer.setSize(this.container.offsetWidth, this.container.offsetHeight)
this.renderer.sortObjects = false
this.renderer.setClearColor(0xf0f0f0)
this.renderer.gammaFactor = 2.2
this.renderer.gammaOutput = true
this.renderer.setPixelRatio(window.devicePixelRatio)
this.renderer.shadowMap.enabled = true
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap

const light = new THREE.AmbientLight(0xffffff, 0.8)
const light2 = new THREE.PointLight(0xffffff, 0.3)
light2.position.set(400, 400, 400)
light2.shadow.camera.near = 10
light2.shadow.camera.far = 10000
light2.shadow.mapSize.width = 2048
light2.shadow.mapSize.height = 2048
light2.castShadow = true
this.scene.add(light2)
this.scene.add(light)

const material = new THREE.MeshStandardMaterial({ color: 0xffffff, metalness: 0, roughness: 0 })

标签： three.js

Answer 1

let scene, camera, controls, ambient, point, loader, renderer, container, stats;

const targetRotation = 0;
const targetRotationOnMouseDown = 0;
const mouseX = 0;
const mouseXOnMouseDown = 0;
const windowHalfX = window.innerWidth / 2;
const windowHalfY = window.innerHeight / 2;


init();
animate();
var box, b1, b2, b3;

function init() {
  // Create a scene which will hold all our meshes to be rendered
  scene = new THREE.Scene();

  // Create and position a camera
  camera = new THREE.PerspectiveCamera(
     60, // Field of view
     window.innerWidth / window.innerHeight, // Aspect ratio
    /*window.innerWidth / -8,
    window.innerWidth / 8,
    window.innerHeight / 8,
    window.innerHeight / -8,
    */
    0.1, // Near clipping pane
    1000 // Far clipping pane
  );
scene.add(camera)
  // Reposition the camera
  camera.position.set(0, 5, 10);
  // Point the camera at a given coordinate
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  // Add orbit control
  controls = new THREE.OrbitControls(camera);
  controls.target.set(0, -0.5, 0);
  controls.update();

  // Add an ambient lights
  ambient = new THREE.AmbientLight(0xffffff, 0.2);
  scene.add(ambient);

  // Add a point light that will cast shadows
  point = new THREE.PointLight(0xffffff, 1);
  point.position.set(25, 50, 25);
  point.castShadow = true;
  point.shadow.mapSize.width = 1024;
  point.shadow.mapSize.height = 1024;
  scene.add(point);

  group = new THREE.Group();
  group.position.y = 0;
  scene.add(group);
  rotationAnchor = new THREE.Object3D()
  group.add(rotationAnchor);

  box = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({
    color: 'grey'
  }))
  b1 = box.clone();
  b2 = box.clone();
  b3 = box.clone();
  b3.material = b3.material.clone()
  b3.material.color.set('red')
  group.add(box);
  group.add(b1);
  b1.position.y += 1
  group.add(b2);
  b2.position.z += 1
  rotationAnchor.add(b3);
  rotationAnchor.position.set(0.5, 0.5, 1.5)
  b3.position.set(-.5, -.5, -.5)
  // Create a renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  // Set size
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  // Set color
  renderer.setClearColor(0xf8a5c2);
  renderer.gammaOutput = true;
  // Enable shadow mapping
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  // Append to the document
  container = document.createElement("div");
  document.body.appendChild(container);
  document.body.appendChild(renderer.domElement);
  // Add resize listener
  window.addEventListener("resize", onWindowResize, false);

  // Enable FPS stats
  stats = new Stats();
  container.appendChild(stats.dom);

  var gui = new dat.GUI({
    height: 5 * 32 - 1
  });
  let params = {
    'test': 4,
    'bevelThickness': 1,
    'bevelSize': 1.5,
    'bevelSegments': 3
  }
  gui.add(params, 'test', 0, 10).onChange(val => {
    test = val
  })
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
  rotationAnchor.rotation.z = (Math.cos(performance.now() * 0.001) * Math.PI * 0.25) + (Math.PI * 1.25)
  requestAnimationFrame(animate);
  // Re-render scene
  renderer.render(scene, camera);
  // Update stats
  stats.update();
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.2/dat.gui.min.js"></script>