Question

我在为网格添加纹理方面遇到了一些麻烦。

我总是得到错误：

[.WebGLRenderingContext] GL错误：GL_INVALID_OPERATION：glDrawElements：尝试访问属性1中超出范围的顶点

我无法理解问题是什么......

粘贴代码，希望有人能给我一个解决方案。

如果插入变形的形状，我想检查纹理是如何变形的。

代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>three.js webgl - cameras</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                color: #808080;
                font-family:Monospace;
                font-size:13px;
                text-align:center;

                background-color: #000;
                margin: 0px;
                overflow: hidden;
            }

            #info {
                position: absolute;
                top: 0px; width: 100%;
                padding: 5px;
                z-index: 100;
            }

            a {

                color: #0080ff;
            }

            b { color: lightgreen }

            #stats { position: absolute; top:0; left: 0 }
            #stats #fps { background: transparent !important }
            #stats #fps #fpsText { color: #777 !important }
            #stats #fps #fpsGraph { display: none }
        </style>
    </head>

    <body>
        <div id="container"></div>
        <div id="info"><a href="http://threejs.org" target="_blank">three.js</a> - cameras<br/>
        <b>O</b> orthographic <b>P</b> perspective
        </div>

        <script src="../build/three.min.js"></script>
        <script src="js/libs/stats.min.js"></script>

        <script>
            var scene;
            var camera;

            var Zinc = 0;
            var texture, material, plane;
            var materials = [];

            texture = THREE.ImageUtils.loadTexture( "adidas.gif",{}, function(){

                // assuming you want the texture to repeat in both directions:
                texture.wrapS = THREE.RepeatWrapping;
                texture.wrapT = THREE.RepeatWrapping;

                texture.repeat.set( 1, 1 );

                material = new THREE.MeshBasicMaterial({ map : texture });

                init();
                animate();
            });

            function drawSquare(x1, y1, x2, y2) {

                var square = new THREE.Geometry();

                // Set four points
                square.vertices.push( new THREE.Vector3( x1,y2,0) );
                square.vertices.push( new THREE.Vector3( x1,y1,0) );
                square.vertices.push( new THREE.Vector3( x2,y1,0) );
                square.vertices.push( new THREE.Vector3( x2,y2,0) );

                //Push one triangle
                square.faces.push( new THREE.Face3( 0,1,2) );

                // Push another triangle
                square.faces.push( new THREE.Face3( 0,3,2) );

                // Return the square object with BOTH faces
                return square;
            }

            function init() {

                renderer = new THREE.WebGLRenderer({antialias:true});
                renderer.setClearColor(0x000000, 1);

                canvasWidth = window.innerWidth;
                canvasHeight = window.innerHeight;

                renderer.setSize(canvasWidth, canvasHeight);

                document.getElementById("container").appendChild(renderer.domElement);

                scene = new THREE.Scene();
                camera = new THREE.PerspectiveCamera(45, canvasWidth / canvasHeight, 1, 100);
                camera.position.set(0, 0, 20);
                camera.lookAt(scene.position);
                scene.add(camera);

                var squareGeometry = drawSquare(1, 1, 3, 3);
                var squareGeometry2 = drawSquare(3, 3, 5, 1);

                squareGeometry.vertices[3].z = 2;
                squareGeometry2.vertices[1].z = 2;

                /*var squareMaterial = new THREE.MeshBasicMaterial({
                    color:0xff0000,
                    side:THREE.DoubleSide
                });*/

                var squareMaterial2 = new THREE.MeshBasicMaterial({
                    color:0xffffff,
                    side:THREE.DoubleSide
                });

                var squareMesh = new THREE.Mesh(squareGeometry, material);
                var squareMesh2 = new THREE.Mesh(squareGeometry2, squareMaterial2);

                squareMesh.position.set(1.5, 0.0, 4.0);
                scene.add(squareMesh);

                squareMesh2.position.set(1.5, 0.0, 4.0);
                scene.add(squareMesh2);

                renderScene();
            }

            //
            function onKeyDown (event) {

            };

            //
            function onWindowResize(event) {

            }

            //
            function animate() {
                //requestAnimationFrame(animate);

                //Zinc++;

                //renderScene();
            }

            function renderScene() {
                renderer.render(scene, camera);
            }

        </script>
    </body>
</html>

Answer 1

这是你用UVs绘制方形函数：

function drawSquare(x1, y1, x2, y2)
{
    var square = new THREE.Geometry(); 

    //set 4 points
    square.vertices.push( new THREE.Vector3( x1,y2,0) );
    square.vertices.push( new THREE.Vector3( x1,y1,0) );
    square.vertices.push( new THREE.Vector3( x2,y1,0) );
    square.vertices.push( new THREE.Vector3( x2,y2,0) );

    var uvs = [];
    uvs.push( new THREE.Vector2( 0.0, 0.0 ) );
    uvs.push( new THREE.Vector2( 1.0, 0.0 ) );
    uvs.push( new THREE.Vector2( 1.0, 1.0 ) );
    uvs.push( new THREE.Vector2( 0.0, 1.0 ) );

    // generate faces

    //push 1 triangle
    square.faces.push( new THREE.Face3( 0, 1, 2 ) );
    square.faceVertexUvs[ 0 ].push( [ uvs[0], uvs[1], uvs[2] ] );

    //push another triangle
    square.faces.push( new THREE.Face3( 0, 2, 3 ) );
    square.faceVertexUvs[ 0 ].push( [ uvs[0], uvs[2], uvs[3] ] );

    //return the square object with BOTH faces
    return square;
}

还修正了面部索引。

在three.js中添加纹理

代码

1 个答案: