Question

如何使用BufferGeometry绘制简单的方块？例如BufferGeometry绘制120000个三角形，我想把它击倒成两个形成一个简单正方形的三角形。

<html>
<head>
    <title>test app</title>
    <style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
    <script src="three.min.js"></script>
    <script>
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //var geometry = new THREE.CubeGeometry(1,1,1);
        var triangles = 2;

        var geometry = new THREE.BufferGeometry();
        geometry.attributes = {
            index: {
                itemSize: 1,
                array: new Uint16Array( triangles * 3 ),
                numItems: triangles * 3
            },
            position: {
                itemSize: 3,
                array: new Float32Array( triangles * 3 * 3 ),
                numItems: triangles * 3 * 3
            },
            normal: {
                itemSize: 3,
                array: new Float32Array( triangles * 3 * 3 ),
                numItems: triangles * 3 * 3
            },
            color: {
                itemSize: 3,
                array: new Float32Array( triangles * 3 * 3 ),
                numItems: triangles * 3 * 3
            }
        }

        var color = new THREE.Color();

        var indices = geometry.attributes.index.array;
        var positions = geometry.attributes.position.array;
        var normals = geometry.attributes.normal.array; //not setting normals - is it relevant if there is no light defined?
        var colors = geometry.attributes.color.array;

        for ( var i = 0; i < indices.length; i ++ ) {

                indices[ i ] = i % ( 3 * 1 ); // How to set indices????

        }

        for ( var i = 0; i < positions.length; i += 9 ) {

            //I know these will make two triangles at same position, but i want to see them appear first..
            positions[ i ]     = 0;
            positions[ i + 1 ] = 0;
            positions[ i + 2 ] = 0;

            positions[ i + 3 ] = 0;
            positions[ i + 4 ] = 1;
            positions[ i + 5 ] = 0;

            positions[ i + 6 ] = 1;
            positions[ i + 7 ] = 0;
            positions[ i + 8 ] = 0;

            color.setRGB( 55, 202, 55 );

            colors[ i ]     = color.r;
            colors[ i + 1 ] = color.g;
            colors[ i + 2 ] = color.b;

            colors[ i + 3 ] = color.r;
            colors[ i + 4 ] = color.g;
            colors[ i + 5 ] = color.b;

            colors[ i + 6 ] = color.r;
            colors[ i + 7 ] = color.g;
            colors[ i + 8 ] = color.b;
        }           

        var material = new THREE.MeshBasicMaterial({color: 0x00ff00});
        var square = new THREE.Mesh(geometry, material);
        scene.add(square);

        camera.position.z = -5;

        var render = function () {
            requestAnimationFrame(render);

            square.rotation.x += 0.1;
            square.rotation.y += 0.1;

            renderer.render(scene, camera);
        };

        render();
    </script>
</body>

Answer 1

在最新的三个js版本中，你无法设置索引，就像@calvin-sydney在他的回答中所写的那样。您必须使用setIndex中的THREE.BufferGeometry方法。

geometry.addAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2));
geometry.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3));
geometry.addAttribute('normal', new THREE.BufferAttribute(new Float32Array(normals), 3));
geometry.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));

geometry.setIndex( new THREE.BufferAttribute( new Uint32Array( indices ), 1 ) );

Answer 2

以下是您的问题的解决方案：由于您的相机近视和远视在0.1到1000之间

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

然后你的顶点z位置必须在该范围之间。因此，请更改您的代码来自

positions[ i + 2 ] = 0;

到

positions[ i + 2 ] = 1;

此外，您的代码似乎缺少这些部分：

geometry.addAttribute( 'index', new THREE.BufferAttribute( indices, 3 ) );
geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

有关完整的固定代码，请在此处参阅： http://learn-daily.com/three-js-drawing-flying-triangle-using-buffergeometry/

如何使用BufferGeometry绘制简单的方形？

2 个答案: