Is there a way to maintain consistent colors on a rectangle while rotating around it? The colors currently change based on the normals when using the orbitcontrols library addon.
Check out the jsfiddle and code below:
/* import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/build/three.module.js'; */
import {OrbitControls} from 'https://threejsfundamentals.org/threejs/resources/threejs/r110/examples/jsm/controls/OrbitControls.js';
let camera, scene, renderer, controls;
init();
render();
function init() {
let width = $('#container').width();
let height = $('#container').height();
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width,height);
$("#container").html(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
camera.position.z = 4;
scene = new THREE.Scene();
const geometry = new THREE.BufferGeometry();
const vertices = [
-2, -1, 0,
2, -1, 0,
2, 1, 0,
-2, 1, 0
];
const indices = [
0, 1, 2, // first triangle
2, 3, 0 // second triangle
];
const normals = [
1,0,0, // bottom left
0,0,1, // bottom right
0,0,1, // top right
1,0,0 // top left
];
geometry.setIndex(indices);
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
const material = new THREE.MeshNormalMaterial({vertexColors:true,flatShading:false});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
controls = new OrbitControls( camera, renderer.domElement );
controls.target.set(0, 0, 0);
controls.update();
animate();
}
function animate() {
requestAnimationFrame( animate );
controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
render();
}
function render() {
renderer.render(scene, camera);
}
https://jsfiddle.net/ZQVerse/2an9edhL/
While attempting to display multiple colors on the rectangle faces by setting the normals attribute, the colors change depending on the camera's orbit. How can I keep the colors consistent regardless of rotation?
I've searched online for solutions to this issue but have found no helpful examples. I suspect the normals are being altered during camera movement, and that I might need to update the normals to maintain correct colors based on rotation, but I'm unsure how to solve this.