使用BufferGeometry实现简单的正方形

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const vertices = [
  -1, 1, 0,  // 左上角顶点
  -1, -1, 0, // 左下角顶点
  1, -1, 0,  // 右下角顶点
  1, 1, 0    // 右上角顶点
];

const geometry = new THREE.BufferGeometry();
const positionAttribute = new THREE.BufferAttribute(new Float32Array(vertices), 3);
geometry.setAttribute('position', positionAttribute);

const indices = [
  0, 1, 2,  // 第一个三角形的顶点索引
  0, 2, 3   // 第二个三角形的顶点索引
];

const indexAttribute = new THREE.BufferAttribute(new Uint16Array(indices), 1);
geometry.setIndex(indexAttribute);

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

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  square.rotation.x += 0.01;
  square.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();