时间戳

首页 > 解决方案 > 使用 BufferGeometry 的简单正方形

three.js - 使用 BufferGeometry 的简单正方形

问题描述

我曾经在我的项目中使用 THREE.Geometry 制作了一个自定义正方形。现在，在three.js 的最新更新之后，Geometry 被完全删除，我必须让我的代码与 BufferGeometry 一起使用。我有点困惑我必须如何更改代码才能使其工作。我现在并没有真正得到顶点部分。我曾经有 4 个由 Vector3 和两个面组成的顶点。

所以它看起来像这样：

let v1 = new THREE.Vector3(...,...,...)
let v2 = new THREE.Vector3(...,...,...)
let v3 = new THREE.Vector3(...,...,...)
let v4 = new THREE.Vector3(...,...,...)

obj.vertices.push(v1)
obj.vertices.push(v2)
obj.vertices.push(v3)
obj.vertices.push(v4)

let face1 = new THREE.Face3(0, 1, 2)
let face2 = new THREE.Face3(2, 3, 0)

obj.faces.push(face1)
obj.faces.push(face2)

我已经阅读了 THREE 网站上的文档，但我真的不明白如何更改它以使其与 BufferGeometry 一起使用。任何提示将不胜感激。

谢谢

标签： three.js

解决方案

像这样尝试：

let camera, scene, renderer;

init();
render();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 2;

  scene = new THREE.Scene();

  const geometry = new THREE.BufferGeometry();

  const vertices = [
    -1, -1, 0,
    1, -1, 0,
    1, 1, 0,
    -1, 1, 0
  ];

  const indices = [
    0, 1, 2, // first triangle
    2, 3, 0 // second triangle
  ];

  geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
  geometry.setIndex(indices);

  const material = new THREE.MeshBasicMaterial();

  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({antialias: true});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

}

function render() {

  renderer.render(scene, camera);

}
body {
      margin: 0;
}
<script src="https://cdn.jsdelivr.net/npm/three@0.126.1/build/three.js"></script>

推荐阅读