Javascript 基于.obj模型的颜色

我想根据我的模型（一个.obj文件）的高度设置颜色。我希望颜色从绿色变为红色，取决于高度，绿色表示最小点，红色表示最大点。这是我目前的代码：

loader.load(nombreMapa, function (object) {
    loader.setMaterials(material);
    escena.add(object);
    object.position.y = -10;
    if (object instanceof THREE.Object3D)
    {
    object.traverse (function (mesh)
    {
        if (! (mesh instanceof THREE.Mesh)) return;
        mesh.material = new THREE.MeshNormalMaterial();
        mesh.material.side = THREE.DoubleSide;
        var geometry = new THREE.EdgesGeometry( mesh.geometry );
        var material1 = new THREE.LineBasicMaterial( { color: 0x000000, linewidth: 1000 } );
        var edges = new THREE.LineSegments( geometry, material1 );
        mesh.add( edges );
    });
}});

---

可以使用

THREE.Color（）

的

THREE.Box3（）

和

lerp（）

方法来设置每个子网格几何体中每个顶点的颜色

var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（60，window.innerWidth/window.innerHeight，11000）；
摄像机位置设置（0,60,250）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
渲染器.setClearColor（0x404040）；
document.body.appendChild（renderer.doElement）；
var controls=新的三个.OrbitControls（摄影机、渲染器.doElement）；
控制目标设定（0,60,0）；
控件更新（）；
var mat=新的三网格基本材料({
线框：对，
顶点颜色：三。顶点颜色
}); // 对象的所有子对象使用相同的材质
var loader=new THREE.OBJLoader（）；
loader.load（'https://threejs.org/examples/models/obj/male02/male02.obj，函数（obj）{
var size=new-THREE.Vector3（）；
var box3=new THREE.box3（）.setFromObject（obj）；
框3.getSize（尺寸）；
控制台日志（大小）；
var v3=new THREE.Vector3（）；//供重用
变量c=[
新三种颜色（0x00ff00），
新三种颜色（0xff0000）
];
var cTemp=new THREE.Color（）；//供重复使用
对象遍历（子对象=>{
if（child.isMesh）{
让颜色=[]；//当前网格几何体颜色值的数组
设pos=child.geometry.attributes.position；
for（设i=0；i{
渲染器。渲染（场景、摄影机）
});
正文{
溢出：隐藏；
保证金：0；
}
我这样做了，效果很好，但渲染自定义.obj需要很长时间。我尝试使用您在示例中提供的模型，并以正常速度进行渲染，但对于我拥有的模型（1 MB），渲染时间太长。为什么会这样？有什么想法吗？@Gjaa看看这个，了解更多关于梯度的想法。