reactjscolorsthree.jsvertex-shadervertex
How to assign different color for each vertex in a buffer geometry? Three.js
I am new to Three.js and I have found a few answers on the topic but none have used buffer geometry. I am making a 3D terrain project of Europe on React and I want to be able to change the water levels depending on some values. In order to do that my coloring has to be done vertex by vertex instead of adding a texture from an image where the coloring will not change if I change the vertices' values. So, depending on the "height" of the vertex I want to assign different colors.
Here's my componentDidMount function:
const SIZE_AMPLIFIER = 15;
var container = document.getElementById("main_map");
var scene, camera, renderer, controls;
var data, plane;
//load map data from bin file
function loadTerrain(file) {
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.open('GET', file, true);
xhr.onload = function (evt) {
if (xhr.response) {
data = new Uint16Array(xhr.response)
init()
}
};
xhr.send(null);
}
loadTerrain('stats.bin');
function init() {
// initialize camera
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, .1, 100000);
camera.position.set(10000, 4000, 0);
// initialize scene
scene = new THREE.Scene();
// initialize directional light (sun)
var sun = new THREE.DirectionalLight(0xFFFFFF, 1.0);
sun.position.set(300, 400, 300);
sun.distance = 1000;
scene.add(sun);
var frame = new THREE.SpotLightHelper(sun);
scene.add(frame);
// initialize renderer
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x000000);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.append(renderer.domElement);
//initialize controls
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 1;
controls.rotateSpeed = .8;
controls.maxPolarAngle = Math.PI / 2 - .3;
// initialize plane
plane = new THREE.PlaneBufferGeometry(1500 * SIZE_AMPLIFIER, 1500 * SIZE_AMPLIFIER, 999 , 999);
plane.castShadow = true;
plane.receiveShadow = true;
var vertices = plane.attributes.position.array;
console.log(data)
// apply height map to vertices of plane
// assign different color depending on the value??
for (let i = 0, j = 2; i < data.length; i += 1, j += 3) {
if(data[i] == 0){
vertices[j] = 0
}else {
vertices[j] = data[i] / 65535 * 325 + 10
}
}
// Add texture image
var material = new THREE.MeshLambertMaterial({
map:THREE.ImageUtils.loadTexture('stats_color.png')
})
var mesh = new THREE.Mesh(plane, material);
mesh.rotation.x = - Math.PI / 2;
mesh.matrixAutoUpdate = false;
mesh.updateMatrix();
plane.computeFaceNormals();
plane.computeVertexNormals();
scene.add(mesh);
animate();
}
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
//controls.update();
}
The result after this (it is satisfying for me but unfortunately not effective for the purpose of the application):
Solution
Here is an article on how to use BufferGeometry
To add colors you make a Float32Array of colors and add it as an attribute called 'color'.
geometry.setAttribute(
'color',
new THREE.BufferAttribute(new Float32Array(colors), uvNumComponents));
You then set material.vertexColors to true;
const material = new THREE.MeshPhongMaterial({
vertexColors: true,
});
body {
margin: 0;
}
#c {
width: 100vw;
height: 100vh;
display: block;
}<canvas id="c"></canvas>
<script type="module">
import * as THREE from 'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
function main() {
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas});
const fov = 75;
const aspect = 2; // the canvas default
const near = 0.1;
const far = 100;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
camera.position.z = 3;
const scene = new THREE.Scene();
{
const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
}
// NOT A GOOD EXAMPLE OF HOW TO MAKE A CUBE!
// Only trying to make it clear most vertices are unique
const vertices = [
// front
{ pos: [-1, -1, 1], norm: [ 0, 0, 1], uv: [0, 1], },
{ pos: [ 1, -1, 1], norm: [ 0, 0, 1], uv: [1, 1], },
{ pos: [-1, 1, 1], norm: [ 0, 0, 1], uv: [0, 0], },
{ pos: [-1, 1, 1], norm: [ 0, 0, 1], uv: [0, 0], },
{ pos: [ 1, -1, 1], norm: [ 0, 0, 1], uv: [1, 1], },
{ pos: [ 1, 1, 1], norm: [ 0, 0, 1], uv: [1, 0], },
// right
{ pos: [ 1, -1, 1], norm: [ 1, 0, 0], uv: [0, 1], },
{ pos: [ 1, -1, -1], norm: [ 1, 0, 0], uv: [1, 1], },
{ pos: [ 1, 1, 1], norm: [ 1, 0, 0], uv: [0, 0], },
{ pos: [ 1, 1, 1], norm: [ 1, 0, 0], uv: [0, 0], },
{ pos: [ 1, -1, -1], norm: [ 1, 0, 0], uv: [1, 1], },
{ pos: [ 1, 1, -1], norm: [ 1, 0, 0], uv: [1, 0], },
// back
{ pos: [ 1, -1, -1], norm: [ 0, 0, -1], uv: [0, 1], },
{ pos: [-1, -1, -1], norm: [ 0, 0, -1], uv: [1, 1], },
{ pos: [ 1, 1, -1], norm: [ 0, 0, -1], uv: [0, 0], },
{ pos: [ 1, 1, -1], norm: [ 0, 0, -1], uv: [0, 0], },
{ pos: [-1, -1, -1], norm: [ 0, 0, -1], uv: [1, 1], },
{ pos: [-1, 1, -1], norm: [ 0, 0, -1], uv: [1, 0], },
// left
{ pos: [-1, -1, -1], norm: [-1, 0, 0], uv: [0, 1], },
{ pos: [-1, -1, 1], norm: [-1, 0, 0], uv: [1, 1], },
{ pos: [-1, 1, -1], norm: [-1, 0, 0], uv: [0, 0], },
{ pos: [-1, 1, -1], norm: [-1, 0, 0], uv: [0, 0], },
{ pos: [-1, -1, 1], norm: [-1, 0, 0], uv: [1, 1], },
{ pos: [-1, 1, 1], norm: [-1, 0, 0], uv: [1, 0], },
// top
{ pos: [ 1, 1, -1], norm: [ 0, 1, 0], uv: [0, 1], },
{ pos: [-1, 1, -1], norm: [ 0, 1, 0], uv: [1, 1], },
{ pos: [ 1, 1, 1], norm: [ 0, 1, 0], uv: [0, 0], },
{ pos: [ 1, 1, 1], norm: [ 0, 1, 0], uv: [0, 0], },
{ pos: [-1, 1, -1], norm: [ 0, 1, 0], uv: [1, 1], },
{ pos: [-1, 1, 1], norm: [ 0, 1, 0], uv: [1, 0], },
// bottom
{ pos: [ 1, -1, 1], norm: [ 0, -1, 0], uv: [0, 1], },
{ pos: [-1, -1, 1], norm: [ 0, -1, 0], uv: [1, 1], },
{ pos: [ 1, -1, -1], norm: [ 0, -1, 0], uv: [0, 0], },
{ pos: [ 1, -1, -1], norm: [ 0, -1, 0], uv: [0, 0], },
{ pos: [-1, -1, 1], norm: [ 0, -1, 0], uv: [1, 1], },
{ pos: [-1, -1, -1], norm: [ 0, -1, 0], uv: [1, 0], },
];
const positions = [];
const normals = [];
const uvs = [];
const colors = [];
for (const vertex of vertices) {
positions.push(...vertex.pos);
normals.push(...vertex.norm);
uvs.push(...vertex.uv);
colors.push(Math.random(), Math.random(), Math.random());
}
const geometry = new THREE.BufferGeometry();
const positionNumComponents = 3;
const normalNumComponents = 3;
const uvNumComponents = 2;
const colorNumComponents = 3;
geometry.setAttribute(
'position',
new THREE.BufferAttribute(new Float32Array(positions), positionNumComponents));
geometry.setAttribute(
'normal',
new THREE.BufferAttribute(new Float32Array(normals), normalNumComponents));
geometry.setAttribute(
'uv',
new THREE.BufferAttribute(new Float32Array(uvs), uvNumComponents));
geometry.setAttribute(
'color',
new THREE.BufferAttribute(new Float32Array(colors), colorNumComponents));
const material = new THREE.MeshPhongMaterial({
vertexColors: true,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
function resizeRendererToDisplaySize(renderer) {
const canvas = renderer.domElement;
const width = canvas.clientWidth;
const height = canvas.clientHeight;
const needResize = canvas.width !== width || canvas.height !== height;
if (needResize) {
renderer.setSize(width, height, false);
}
return needResize;
}
function render(time) {
time *= 0.001;
if (resizeRendererToDisplaySize(renderer)) {
const canvas = renderer.domElement;
camera.aspect = canvas.clientWidth / canvas.clientHeight;
camera.updateProjectionMatrix();
}
cube.rotation.x = time;
cube.rotation.y = time;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
main();
</script>