2016-04-28 51 views
0

該腳本有一個框和一個四面體。我希望四面體的表面像盒子的表面一樣點亮。但他們點燃不同。四面體平面上的光線不平坦

我想要它在
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> 

回答

0

使用THREE.FlatShading like this

我改線23本:

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

我剛剛從example您鏈接的來源拉動。

+0

非常感謝你 - 答案和你從哪裏得到答案。 – dcromley