I'm a beginner when it comes to three.js, so I appreciate your patience. I've been given a project that requires me to create a car body using WebGL and dent it when the mouse is clicked. My goal is to change the color of these dents from the color of the car body to yellow. Do you have any suggestions on how I can achieve this? Please note: I only want to alter the color of the dents, not the entire car.
Below is the code for the material used for the dents. Initially, I tried adding color to the shader material but that didn't yield the desired results, so I decided to comment it out.
var dentMaterial = new THREE.ShaderMaterial({
uniforms : {
size : { type: 'f', value : 20.0 },
near : { type: 'f', value : camera.near },
far : { type: 'f', value : camera.far }
//color: { type: 'v3', value: { x: 1, y: 1, z: 1 } }
// map : { type: "t", value : THREE.ImageUtils.loadTexture( 'textures/heatmap.jpg' ) } //here
},
attributes : {},
vertexColors: THREE.VertexColors,
vertexShader: vertShader,
fragmentShader: fragShader,
side: THREE.DoubleSide,
transparent: true
});
The following code snippet showcases where the dents are actually being generated.
THREE.DentModifier = function () {};
THREE.DentModifier.prototype = {
constructor: THREE.DentModifier,
set: function ( origin, direction, radius, depth, material ) {
this.origin = origin; // vec3
this.direction = direction; // vec3
this.radius = radius; // float
this.depth = depth; // float
//this.material = material // GLmaterial
return this;
},
magnitude: function(vector) {
return vector.x * vector.x + vector.y * vector.y + vector.z * vector.z;
},
linearFalloff: function (distance, radius) {
return this.clamp01(1 - distance / radius);
},
gaussFalloff:function (distance, radius) {
return this.clamp01(Math.pow(360, Math.pow(distance / radius, 2.5) - .01));
},
needleFalloff:function (distance, radius) {
return -(distance * distance / (radius * radius) + 1);
},
clamp01: function(val) {
if (val < 0) return 0;
if(val > 1) return 1;
return val;
},
modify: function ( mesh , material ) {
this.mesh = mesh;
var matrix = new THREE.Matrix4().getInverse( this.mesh.matrixWorld );
var origin = this.origin.applyMatrix4( matrix );
var normal = new THREE.Vector3();
normal.copy( this.direction );
normal.multiplyScalar( -this.radius * ( 1 - this.depth ) );
var centerSphere = new THREE.Vector3();
centerSphere.addVectors( origin, normal );
var sphere = new THREE.Sphere( centerSphere, this.radius );
this.mesh.geometry.elementsNeedUpdate = false;
var sqrRadius = 100; //this.radius*this.radius;
var sqrMagnitude; //float
for ( var i = 0, il = this.mesh.geometry.vertices.length; i < il; i++ ) {
if ( centerSphere.distanceTo( this.mesh.geometry.vertices[ i ] ) < this.radius ) {
// new - Limit depth of dent
sqrMagnitude = this.magnitude(this.mesh.geometry.vertices[i]) - this.magnitude(centerSphere);
if (sqrMagnitude > sqrRadius) {
console.log("We are too deep Scotty !!");
break;
} // end new
var ray = new THREE.Ray( this.mesh.geometry.vertices[ i ], this.direction );
var dent = ray.intersectSphere( sphere );
this.mesh.geometry.vertices[ i ] = dent;
}
};