mrdoob/three.js — Issue #1449: Defined normals from JSON were not used
Author: JoeHH
Created: 2012-03-05 19:11:09+00:00
State: open

Hi,
I have a small JSON file with two colored triangles. Both triangles have different windings but the same normal vector. So I expect both with the same color / shading. But one triangle ist right colored, the other one is black.
It seems, that not the defined normals are used, but the normals are calculated by the winding of the vertices. What do I have to change to use the defined normals? Reason: I have a large set of triangles with switching windings. But I know the normals.

Btw: If I switch the first triangle definition from 80, 2, 1, 3, 0, 0, to 80, 2, 3, 1, 0, 0,, both windings are equal and the colors are perfect for both triangles. So I'm absolutely sure, that not the defined normals are used. How can I make three.js to use the normals from the JSON file?

Here is the JSON file:

{
"metadata":{
"formatVersion": 3
},
"materials":[],
"vertices":[
-250.000000, 250.000000, 0.000000,
-250.000000, -250.000000, 0.000000,
250.000000, -250.000000, 0.000000,
250.000000, 250.000000, 0.000000
],
"morphTargets":[],
"normals":[
0.707106, -0.707106, 0.000000
],
"colors":[
16711680
],
"uvs":[[]],
"faces":[
80, 2, 1, 3, 0, 0,
80, 1, 3, 0, 0, 0
]
}

And this is the HTML page:

var container = document.getElementById('WebGLCanvas')
var CANVAS_WIDTH = container.offsetWidth;
var CANVAS_HEIGHT = container.offsetHeight;
var stats;
var camera;
var scene;
var renderer;
var mesh;
var controls;
var directionalLight;

init();
animate();

function init(){
// SCENE
scene = new THREE.Scene();

// CAMERA
camera = new THREE.PerspectiveCamera(25, CANVAS_WIDTH / CANVAS_HEIGHT, 1, 10000);
camera.position.set(0, 0, 100);
scene.add(camera);

// RENDERER
renderer = new THREE.WebGLRenderer({
antialias	: true,	// to get smoother output
preserveDrawingBuffer: true,	// to allow screenshot
});
renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);
renderer.domElement.style.position = "relative";
renderer.autoClear = true;
container.appendChild(renderer.domElement);

// LOADED GEOMETRY
var loader = new THREE.JSONLoader();
loader.load("test.json", function(geometry){
mesh = new THREE.Mesh(geometry, new THREE.MeshPhongMaterial({
vertexColors: THREE.FaceColors,
shading : THREE.SmoothShading
}));
mesh.scale.set(0.05, 0.05, 0.05);
mesh.matrixAutoUpdate = false;
mesh.doubleSided = true;
mesh.updateMatrix();
scene.add(mesh);
});

// LIGHT
directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position = camera.position;
scene.add(directionalLight);

// CONTROLS
controls = new THREE.TrackballControls(camera, renderer.domElement);	}

function animate(){
requestAnimationFrame(animate);
render();
}

function render(){
controls.update();
renderer.render(scene, camera);
directionalLight.position = camera.position;
}