Question

这个脚本有一个盒子和一个四面体。我希望四面体的面部像盒子的面一样点亮。但它们点亮的方式不同。

我希望它像在 http://threejs.org/docs/#Reference/Extras.Geometries/TetrahedronGeometry。
显然，我应该改变什么？

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.js"></script>
<script>
"use strict"
var scene, camera, light, mesh1, mesh2, geometry, material, renderer;
window.onload = function() {
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(800, 600);
  renderer.setClearColor(0xcccccc, 1);
  document.body.appendChild(renderer.domElement);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(30, 800/600, .1, 1000);
  camera.position.set(0, 0, 6);
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  light = new THREE.DirectionalLight(0xffffff);
  light.position.set(10, 10, 10);
  scene.add(light);
// -- box on the right
  geometry = new THREE.BoxGeometry(1, 1, 1);
  material = new THREE.MeshPhongMaterial( { color:0xccccff } );
  mesh1 = new THREE.Mesh(geometry, material);
  mesh1.translateX(1.1);
  scene.add(mesh1);
// -- tetrahedron on the left
  geometry = new THREE.TetrahedronGeometry(1);
  material = new THREE.MeshPhongMaterial( { color:0xccccff } );
  mesh2 = new THREE.Mesh(geometry, material);
  mesh2.translateX(-1.1);
  scene.add(mesh2);
  fnloop();
};
function fnloop() {
  renderer.render(scene, camera);
  mesh1.rotation.x += 6.2832/60/10; 
  mesh2.rotation.x += 6.2832/60/10; 
  requestAnimationFrame(fnloop);  
}
</script>
</head>
<body></body>
</html>

Answer 1

使用像this这样的THREE.FlatShading。

我将第23行更改为：

material = new THREE.MeshPhongMaterial( { color:0xccccff, shading: THREE.FlatShading } );

我刚刚从您关联的example的来源中提取。

四面体平面上的光线不明显

1 个答案: