javascript - 如何在 Three.js 中向 ShaderMaterial 添加颜色？

Question

我对 Three.js 还很陌生，所以请耐心等待。因此，我被分配了一个项目，其中涉及使用 WebGL 创建车身并在鼠标按下时将其压凹。我正在尝试将凹痕的颜色从车身颜色更改为黄色。知道该怎么做吗？注意:我只想更改凹痕的颜色，而不是整个汽车。

这是凹痕 Material 的代码。我的第一个想法是为着色器 Material 添加颜色，但这不起作用，所以我将其注释掉。

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
});

这段代码是实际创建凹痕的地方。

 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;                

        }

    };

Answer 1

dentMaterial.uniforms.diffuse = { 类型:“c”，值:{ r:1, g:0, b:0 } };

或者当使用默认的phongShader制服时，这有效:

dentMaterial.uniforms.diffuse.value.setHex (0xFF0000);

Three.js r.71