如何在點擊事件中動態添加顏色？

Question

如何使用三個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 );

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