如何在threeJS中为对象模型添加阴影？答案

【问题标题】：How to add shading to object model in threeJS?如何在threeJS中为对象模型添加阴影？
【发布时间】：2016-03-14 02:20:09
【问题描述】：

我有一个定制的对象，一个方尖碑，旁边是一个立方体。方尖碑是用THREE.Geometry 制作的（每个顶点和面都是手动添加的），而立方体是用THREE.BoxGeometry 制作的。他们都使用THREE.MeshNormalMaterial。

那么为什么立方体的颜色会随着旋转而变化，而方尖碑只是灰色的呢？我已经设法让其他网格为方尖碑添加颜色，但不知道如何在旋转过程中让侧面改变颜色。

<!DOCTYPE html>
<html>
<head>
<title>Washington Monument</title>
<style>
html, body {
  margin: 0; padding:0;
  overflow: hidden;
  }
canvas {
  width: 100%; height: 100%;
  }
</style>
</head>
<body>
<script src="../../lib/three.min.js"></script>
<script>
var scene = new THREE.Scene();
var fieldOfView = 45;
var aspect = window.innerWidth/window.innerHeight;
var nearClippingPlane = 0.01;
var farClippingPlane = 1000;
var camera = new THREE.PerspectiveCamera(fieldOfView, aspect, nearClippingPlane, farClippingPlane);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var obeliskMaterial = new THREE.MeshNormalMaterial();
var obeliskGeometry = new THREE.Geometry();
obeliskGeometry.vertices.push(new THREE.Vector3( 8.40, -80,     8.40));
obeliskGeometry.vertices.push(new THREE.Vector3( 8.40, -80,    -8.40));
obeliskGeometry.vertices.push(new THREE.Vector3(-8.40, -80,    -8.40));
obeliskGeometry.vertices.push(new THREE.Vector3(-8.40, -80,     8.40));
obeliskGeometry.vertices.push(new THREE.Vector3( 5.25,  72.36,  5.25));
obeliskGeometry.vertices.push(new THREE.Vector3( 5.25,  72.36, -5.25));
obeliskGeometry.vertices.push(new THREE.Vector3(-5.25,  72.36, -5.25));
obeliskGeometry.vertices.push(new THREE.Vector3(-5.25,  72.36,  5.25));
obeliskGeometry.vertices.push(new THREE.Vector3( 0,     89.29,  0));
obeliskGeometry.faces.push(new THREE.Face3(0, 1, 5), new THREE.Face3(0, 5, 4));
obeliskGeometry.faces.push(new THREE.Face3(1, 2, 6), new THREE.Face3(1, 6, 5));
obeliskGeometry.faces.push(new THREE.Face3(2, 3, 7), new THREE.Face3(2, 7, 6));
obeliskGeometry.faces.push(new THREE.Face3(3, 0, 4), new THREE.Face3(3, 4, 7));
obeliskGeometry.faces.push(new THREE.Face3(4, 5, 8));
obeliskGeometry.faces.push(new THREE.Face3(5, 6, 8));
obeliskGeometry.faces.push(new THREE.Face3(6, 7, 8));
obeliskGeometry.faces.push(new THREE.Face3(7, 4, 8));
var obeliskMesh = new THREE.Mesh(obeliskGeometry, obeliskMaterial);
scene.add(obeliskMesh);
var material = new THREE.MeshNormalMaterial();
var geom = new THREE.BoxGeometry(16, 16, 8);
var cube = new THREE.Mesh(geom, material);
cube.position.x = 40;
scene.add(cube);
camera.position.z = 320;
var render = function () {
  requestAnimationFrame(render);
  obeliskMesh.rotation.y += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
  };
render();
</script>
</body>
</html>

【问题讨论】：

标签： three.js

【解决方案1】：

如果您想在自定义几何体中使用MeshNormalMaterial，则必须在创建网格之前计算几何体的法线：

obeliskGeometry.computeFaceNormals();

在你的例子中：

[...]
obeliskGeometry.faces.push(new THREE.Face3(7, 4, 8));
obeliskGeometry.computeFaceNormals();
var obeliskMesh = new THREE.Mesh(obeliskGeometry, obeliskMaterial);
[...]

【讨论】：