Three.js 如何在threeJS中向对象模型添加着色？_Three.js

Three.js 如何在threeJS中向对象模型添加着色？

three.js

Three.js 如何在threeJS中向对象模型添加着色？,three.js,Three.js,我有一个定制的对象，一个方尖碑，旁边是一个立方体。方尖碑由THREE.Geometry（手动添加每个顶点和面）构成，而立方体由THREE.BoxGeometry构成。它们都使用THREE.MeshNormalMaterial 那么为什么立方体的颜色会随着旋转而改变，而方尖碑只是灰色的呢？我已经设法让其他网格为方尖碑添加颜色，但不知道如何让侧面在旋转过程中更改颜色 <!DOCTYPE html> <html> <head> <title>Washin

我有一个定制的对象，一个方尖碑，旁边是一个立方体。方尖碑由

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>


华盛顿纪念碑
html，正文{
边距：0；填充：0；
溢出：隐藏；
}
帆布{
宽度：100%；高度：100%；
}
var scene=new THREE.scene（）；
var-fieldOfView=45；
var aspect=window.innerWidth/window.innerHeight；
var nearClippingPlane=0.01；
var FarcippingPlane=1000；
var摄像机=新的三视角摄像机（视野、纵横比、近剪裁平面、远剪裁平面）；
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var obeliskmatary=新的三个.MeshNormalMaterial（）；
var obeliskGeometry=新三点几何（）；
方尖碑几何.顶点.推力（新的三矢量3（8.40，-80,8.40））；
方尖碑几何.顶点.推力（新的三矢量3（8.40，-80，-8.40））；
方尖碑几何.顶点.推力（新的三矢量3（-8.40，-80，-8.40））；
方尖碑几何.顶点.推力（新的三矢量3（-8.40，-80,8.40））；
方尖碑几何.顶点.推力（新的三矢量3（5.25,72.36,5.25））；
方尖碑几何.顶点.推力（新的三矢量3（5.25,72.36，-5.25））；
方尖碑几何.顶点.推力（新的三矢量3（-5.25,72.36，-5.25））；
方尖碑几何.顶点.推力（新的三矢量3（-5.25,72.36,5.25））；
方尖碑几何。顶点。推（新三。矢量3（0，89.29，0））；
方尖碑几何面推（新三面3（0，1，5），新三面3（0，5，4））；
方尖碑几何面推（新三面3（1，2，6），新三面3（1，6，5））；
方尖碑几何面推（新三面3（2，3，7），新三面3（2，7，6））；
方尖碑几何面推（新三面3（3，0，4），新三面3（3，4，7））；
方尖碑几何面推（新三面3（4，5，8））；
方尖碑几何面推（新三面3（5，6，8））；
方尖碑几何面推（新三面3（6，7，8））；
方尖碑几何面推（新三面3（7，4，8））；
var obeliskMesh=新的三网格（方尖碑几何、方尖碑材料）；
场景。添加（方尖碑）；
var material=新的三个.MeshNormalMaterial（）；
var geom=新的三箱几何结构（16,16,8）；
var cube=新的三个网格（几何图形、材质）；
立方体位置x=40；
场景.添加（立方体）；
摄像机位置z=320；
var render=函数（）{
请求动画帧（渲染）；
方尖碑轴线旋转y+=0.01；
立方体旋转y+=0.01；
渲染器。渲染（场景、摄影机）；
};
render（）；

如果要在自定义几何体中使用

MeshNormalMaterial

，则必须在创建网格之前计算几何体的法线：

obeliskGeometry.computeFaceNormals();

在您的示例中：

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