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

How to draw simple square using BufferGeometry?

本文关键字：正方形 简单 绘制 何使用 BufferGeometry      更新时间：2023-09-26

如何使用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>

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

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 ) );

以下是您的问题的解决方案：由于您的相机远近视角在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/

相关文章：