admin管理员组文章数量:1327524
I'm editing a program wrote in Three.js and Tween.js. I try to find the solution here and on the web, without results. I have a lot of object (cones) create by THREE.Mesh and there is a little script that every 5 second select one of these and change, for few time, its dimension. I would like change also the color, but i have some problems. If i try to change the color, this change for every object, but i want that change only for the object selected by the script.
this is the code to create the objects:
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;
});
This is the function that change the dimension of selected object (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;
};
}
Thank you
I'm editing a program wrote in Three.js and Tween.js. I try to find the solution here and on the web, without results. I have a lot of object (cones) create by THREE.Mesh and there is a little script that every 5 second select one of these and change, for few time, its dimension. I would like change also the color, but i have some problems. If i try to change the color, this change for every object, but i want that change only for the object selected by the script.
this is the code to create the objects:
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;
});
This is the function that change the dimension of selected object (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;
};
}
Thank you
Share Improve this question edited Nov 20, 2015 at 9:08 asked Nov 19, 2015 at 14:27 user4878632user48786322 Answers
Reset to default 5You are making clones of one cone. During cloning meshes share link to one material. If you need to change colors of shapes separately then you need to clone a material for each object also. It think that should be enough:
var m = baseMesh.clone();
m.material = baseMesh.material.clone();
If you have different children with the same material color and you'd like to change the material color of only one selected mesh, this is how i would do it:
var cloned = selectedMesh.material.clone()
cloned.emissive.r = 0.92; // or cloned.color
cloned.emissive.g = 0.92;
cloned.emissive.b = 1;
selectedMesh.material = cloned;
本文标签: javascriptHow to change material color for only one object in THREEjsStack Overflow
版权声明:本文标题:javascript - How to change material color for only one object in THREE.js - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742191966a2430381.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论