如何更改THREE.js中只有一个对象的材质颜色

我在编辑Three.js和Tween.js中写入的程序。我试图在这里和网上找到解决方案，没有结果。我用THREE.Mesh创建了很多对象（锥体），并且每5秒钟有一个小脚本选择其中一个，并在几个时间内更改它的尺寸。我想改变颜色，但我有一些问题。如果我尝试更改颜色，为每个对象进行此更改，但我只希望为脚本选定的对象进行更改。如何更改THREE.js中只有一个对象的材质颜色

这是创建对象的代码：

VIS.createCityMarkers = function(cities){ 

    var material = new THREE.MeshPhongMaterial({ 
     color: 0xffdb85, 
     specular: 0xff6c00, 
     shininess: 3, 
     shading: THREE.FlatShading 
}); 

var baseMesh = new THREE.Mesh(new THREE.CylinderGeometry(0.2, 0.0, 0.4, 32, 1), material); 
baseMesh.geometry.applyMatrix(new THREE.Matrix4().makeRotationX(-Math.PI * 0.5)); 

var cityLookup = {}; 

    var group = new THREE.Group(); 
    _.each(cities, function(cc, name){ 
    var g = new THREE.Group(); 
    var m = baseMesh.clone(); 
    g.add(m); 
    var p = Coordinates.latLongToVector3(cc.lat, cc.long + 90, 10.8); 
    g.position.copy(p); 
    g.lookAt(group.position); 
    m.name = name; 
    group.add(g); 
    cityLookup[ name ] = m; 
});

这是改变所选对象的尺寸的功能（M）：

function highlightCityMesh(m){ 

    var s = { 
    scale: 1.0, 
    up: 0.0, 
    color: 0xffdb85 
    }; 
    new TWEEN.Tween(s) 
    .to({ 
    scale: 3.0, 
    up: 2.0, 
    color: 0xc00000 
    }, 2000) 
    .easing(TWEEN.Easing.Elastic.Out) 
    .onUpdate(function(){ 
    m.scale.set(s.scale, s.scale, s.scale); 
    m.position.z = -s.up; 
    m.material.color.setHex(s.color); 
    }) 
    .start(); 

    m.update = function(){ 
    this.rotation.z = Date.now() * 0.001; 
    }; 
}

谢谢

来源

2015-11-19 maniuz

你是制作一个圆锥体的克隆。在克隆过程中，网格共享链接到一个材质。如果需要分别更改形状的颜色，则还需要为每个对象克隆材质。它认为应该够了：

var m = baseMesh.clone(); 
m.material = baseMesh.material.clone();

来源

2015-11-19 14:35:54 kaigorodov

对不起，我不太清楚三。你能说我在哪里必须放这些代码行吗？ – maniuz

在代码中有'var m = baseMesh.clone（）;'行。只需在下一行放置'm.material = baseMesh.material.clone（）;'。这应该可以解决问题。 – kaigorodov

当然，我很累。谢谢，现在只有选定的对象改变颜色。只是另一件小事。颜色逐渐变化（我看到不同的颜色），我认为是因为改变颜色在补间动画中持续2秒。没有其他中间色彩，是否可以从一种颜色变为另一种颜色？ – maniuz

如何更改THREE.js中只有一个对象的材质颜色

回答

相关问题