Javascript 顶点颜色更改后如何更新颜色？_Javascript_Three.js

Javascript 顶点颜色更改后如何更新颜色？

javascript three.js

Javascript 顶点颜色更改后如何更新颜色？,javascript,three.js,Javascript,Three.js,我在这里复制并粘贴完整的html文件来说明这个问题。基本上，我创建了一个简单的三角形几何体作为全局变量。单击红色按钮时，将调用函数Red以将三角形渲染为红色。问题是，如果三角形已渲染为红色，则单击绿色不会将其渲染为绿色 <html> <body> <div id="container"></div> <button onclick="red()">Red</button>

我在这里复制并粘贴完整的html文件来说明这个问题。基本上，我创建了一个简单的三角形几何体作为全局变量。单击红色按钮时，将调用函数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>

尝试将var obj设置为全局变量，以便在程序开始时实例化它。另外，在渲染函数或其他函数中，您在哪里更改颜色？

在第一次渲染网格后，您正在更改顶点颜色

当前，一旦对象至少渲染一次，就不能在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

在第一次渲染网格后，您将更改顶点颜色

当前，一旦对象至少渲染一次，就不能在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

您是否尝试过geom.elementsNeedUpdate=true？是的。这没有帮助。您可以删除ElementsEndUpdate标志。已删除。渲染仍然不会更改颜色。请更正。您是否尝试过geom.elementsNeedUpdate=true？是。这没有帮助。您可以删除ElementsEndUpdate标志。已删除。渲染仍然不会更改颜色。请更正。它不是有意的。var obj是全局的。这没用。我在另一个函数中更改颜色。之后，我调用renderer.renderscene，camera.var obj是全局的。这没用。我在另一个函数中更改颜色。之后，我调用renderer.renderscene，camera。