如何在点击事件上动态添加颜色？答案

【问题标题】：How to add color on click event dynamically?如何在点击事件上动态添加颜色？
【发布时间】：2023-04-04 17:28:02
【问题描述】：

如何使用三个js添加颜色onclick事件？任何人都可以帮忙吗？我有以下代码：

        var pts = [], numPts = 5;
    for ( var i = 0; i < numPts * 2; i ++ ) {
        var l = i % 2 == 1 ? 10 : 20;
        var a = i / numPts * Math.PI;
        pts.push( new THREE.Vector2 ( Math.cos( a ) * l, Math.sin( a ) * l ) );
    }

    var shape = new THREE.Shape( pts );
    var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
    var material2 = new THREE.MeshLambertMaterial( { color: 0x66CC00, wireframe: false } );
    var mesh = new THREE.Mesh( geometry, material2 );
    scene.add( mesh );

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您需要在onclick 处理程序的网格材质的color 属性中指定新颜色。例如，要使其变为红色，只需在您的 onclick 处理程序中添加以下行 -

mesh.material.color = new THREE.Color(0xff0000);
mesh.material.needsUpdate = true;

更新：

在全局空间中声明变量mesh，然后在函数中像这样启动它 -

var mesh;

function init() {

var pts = [], numPts = 5;
            for ( var i = 0; i < numPts * 2; i ++ ) {
                var l = i % 2 == 1 ? 10 : 20;
                var a = i / numPts * Math.PI;
                pts.push( new THREE.Vector2 ( Math.cos( a ) * l, Math.sin( a ) * l ) );
            }

            var shape = new THREE.Shape( pts );
            var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings );
            var material2 = new THREE.MeshLambertMaterial( { color: 0x66CC00, wireframe: false } );
            mesh = new THREE.Mesh( geometry, material2 );
            scene.add( mesh );
}

【讨论】：

我也试过这个，出现以下错误：ReferenceError: mesh is not defined
你还有其他动态颜色变化的例子。如果有请分享。
您可能在函数中声明了mesh 变量。您需要在任何函数之外的全局空间中声明变量（mesh）。然后你可以在函数中启动它。
是的，它的作品，如何同时应用正面和背面颜色？你能帮忙吗？
@RasheduzzamanSourov (1) 不要实例化新的Color。使用mesh.material.color.setHex( 0xff0000 ). (2) 不要设置needsUpdate 标志。这会不必要地重新编译着色器。