顶点颜色改变后如何更新颜色? [英] How to update colors after vertex colors are changed?
问题描述
我在这里复制并粘贴整个(短)html 文件来说明问题.基本上，我创建了一个简单的三角形几何作为全局变量.当您单击红色"按钮时，会调用函数 red() 将三角形呈现为红色.问题在于，如果三角形已呈现为红色，则单击绿色"不会将其呈现为绿色.
I copy and paste the whole(short) html file here to illustrate the problem. Basically, I create a simple triangle geometry as a global variable. When you click the "Red" button, function red() is called to render the triangle as red. The problem is that clicking "Green" does not render it as green if the triangle has already been rendered as red.
<html>
<body>
<div id="container"></div>
<button onclick="red()">Red</button>
<button onclick="green()">Green</button>
<script src="http://threejs.org/build/three.js"></script>
<script>
//Boilerplate stuff
var w=300;
var h=300;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(w, h);
document.getElementById('container').appendChild( renderer.domElement );
var scene = new THREE.Scene();
var light = new THREE.DirectionalLight(0xffffff);
light.position.z = 10;
scene.add(light);
var camera = new THREE.PerspectiveCamera( 20, w / h, 1, 1000 );
camera.position.z = 10;
var materials = [new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading, vertexColors: THREE.VertexColors, shininess: 0 } )];
//Make a geometry
var shape = new THREE.Shape();
shape.moveTo( 0,0 );
shape.lineTo( 0, 1 );
shape.lineTo( 1, 0);
var geometry = new THREE.ShapeGeometry([shape]);
var obj = THREE.SceneUtils.createMultiMaterialObject(geometry, materials);
scene.add(obj);
//
function red()
{
change_color(new THREE.Color(0xff0000));
renderer.render(scene, camera);
}
//
function green()
{
change_color(new THREE.Color(0x00ff00));
renderer.render(scene, camera);
}
//
function change_color(color)
{
geometry.colorsNeedUpdate = true;
for(var i=0;i<geometry.faces.length;i++)
{
if(geometry.faces[i].vertexColors[0]==undefined)
{
geometry.faces[i].vertexColors[0]=color;
}
else
{
geometry.faces[i].vertexColors[0].copy(color);
}
if(geometry.faces[i].vertexColors[1]==undefined)
{
geometry.faces[i].vertexColors[1]=color ;
}
else
{
geometry.faces[i].vertexColors[1].copy(color);
}
if(geometry.faces[i].vertexColors[2]==undefined)
{
geometry.faces[i].vertexColors[2]=color;
}
else
{
geometry.faces[i].vertexColors[2].copy(color);
}
}
}
</script>
</body>
</html>
推荐答案
您正在第一次渲染网格后更改顶点颜色.
You are changing vertex colors after the first render of a mesh.
目前，一旦对象至少被渲染一次，就不能在three.js中使用以下模式.
Currently, you can't use the following pattern in three.js once the object has been rendered at least once.
geometry.faces[ i ].vertexColors[ 0 ] = color; // assigning a Color object
你必须改用这个模式:
geometry.faces[ i ].vertexColors[ 0 ].copy( color ); // or use set()
您还必须在更改顶点颜色时设置 needsUpdate 标志.
You must also set the needsUpdate flag when the vertex colors are changed.
geometry.colorsNeedUpdate = true;
因此，在您的程序中，您需要在创建几何图形时为其添加顶点颜色.然后只需更改颜色值.
Consequently, in your program, you need to add vertex colors to your geometry when you create it. Then just change the color values.
three.js r.77
three.js r.77
这篇关于顶点颜色改变后如何更新颜色?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
