如何动态添加点击事件的颜色?

时间:2016-08-25 09:26:01

标签: javascript three.js

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

1 个答案:

答案 0 :(得分:-1)

您需要在color处理程序中的网格材质的onclick属性中指定一种新颜色。例如,要使其变为红色,只需在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 );
}