color(normal)

by Ting-Yuan Chang

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  overflow: hidden;
  margin: 0;
  font-family: Monospace;
  font-size: 8pt;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 10, 20);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x999999);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.AmbientLight(0x404040));

var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(5, 10, 10);
scene.add(light);

var sphereGeom = new THREE.SphereGeometry(5, 32, 24);
sphereGeom.faces.forEach(function(face){
	if (face.normal.y > 0)
  	face.color.setHex(0xFF0000);
    else
    face.color.setHex(0x000000);
})

var sphere = new THREE.Mesh(sphereGeom, new THREE.MeshStandardMaterial({vertexColors: THREE.FaceColors}));
sphere.position.set(-7, 0, 0);
scene.add(sphere);


render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}