Question

我在这里复制并粘贴整个（简短的）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>

Answer 1

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

目前，一旦对象至少呈现一次，您就无法在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

Answer 2

尝试将var obj设为全局变量，以便在程序开头实例化它。您还在渲染功能或其他功能中更改颜色的位置？

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

2 个答案: