我将整个(短)html 文件复制并粘贴到此处以说明问题。基本上，我创建了一个简单的三 Angular 形几何体作为全局变量。当您单击“红色”按钮时，将调用函数 red() 将三 Angular 形渲染为红色。问题是如果三 Angular 形已经呈现为红色，则单击“绿色”不会将其呈现为绿色。
<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>
最佳答案
您在第一次渲染网格后更改顶点颜色。
目前，一旦对象至少被渲染一次，您就不能在 three.js 中使用以下模式。
geometry.faces[ i ].vertexColors[ 0 ] = color; // assigning a Color object
你必须改用这个模式:
geometry.faces[ i ].vertexColors[ 0 ].copy( color ); // or use set()
当顶点颜色更改时，您还必须设置 needsUpdate 标志。
geometry.colorsNeedUpdate = true;
因此，在您的程序中，您需要在创建几何体时为其添加顶点颜色。然后只需更改颜色值即可。
three.js r.77
关于javascript - 如何在更改顶点颜色后更新颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37358419/