12 画一个圆圈吧 - Threejs入门

创建一个由点组成的圆，并将其添加到场景中。 [ 练一练 ] [ 看一看 ]

根据当前点的角度 angle, 使用 cos,sin 计算点的 x,y 坐标, attribute 是一个 THREE.BufferAttribute 对象，用于描述几何体的顶点位置。它将 vertices 数组指定为 3 个值一组（x, y, z），每组表示一个顶点。geo.attributes.position = attribute 将几何体的 position 属性设为 attribute，从而定义了 geo 的形状为圆形。
还有一种方法是 geo.setFromPoints，也是赋值给 geo.attributes.position 属性。

示例代码

import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

const scene = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(
  60,
  window.innerWidth / window.innerHeight,
  0.1,
  100
)
camera.position.z = 10

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
app.appendChild(renderer.domElement)

const geo = new THREE.BufferGeometry()
const mat = new THREE.LineBasicMaterial()

const R = 5
const N = 50
const sp = (2 * Math.PI) / N

const arr = []

for (let i = 0; i < N; i++) {
  const angle = sp * i
  const x = R * Math.cos(angle)
  const y = R * Math.sin(angle)
  arr.push(x, y, 0)
  // arr.push(new THREE.Vector3(x, y, 0))
}

const vertices = new Float32Array(arr)
const attribute = new THREE.BufferAttribute(vertices, 3)
geo.attributes.position = attribute
// geo.setFromPoints(arr)

const line = new THREE.LineLoop(geo, mat)
scene.add(line)

const controls = new OrbitControls(camera, app)

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera)
})

演示效果