13 曲线画椭圆 - Threejs入门

使用曲线画一个椭圆，并将其添加到场景中。 [ 练一练 ] [ 看一看 ]

EllipseCurve，参数如下：
aX – 椭圆的中心的 X 坐标，默认值为 0。
aY – 椭圆的中心的 Y 坐标，默认值为 0。
xRadius – X 轴向上椭圆的半径，默认值为 1。
yRadius – Y 轴向上椭圆的半径，默认值为 1。
aStartAngle – 以弧度来表示，从正 X 轴算起曲线开始的角度，默认值为 0。
aEndAngle – 以弧度来表示，从正 X 轴算起曲线终止的角度，默认值为 2 x Math.PI。

示例代码

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 = 50

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

// 曲线画椭圆
const arc = new THREE.EllipseCurve(0, 0, 25, 15, 0, Math.PI * 2)
const geo = new THREE.BufferGeometry()
geo.setFromPoints(arc.getPoints(50))
const mat = new THREE.LineBasicMaterial()
const line = new THREE.Line(geo, mat)
scene.add(line)

const controls = new OrbitControls(camera, app)

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

演示效果