在 threejs 中只有边框的圆圈

Question

我想创建一个圆，只有边框，CircleGeometry。下面是我使用的代码

const geometry = new THREE.CircleGeometry( 5, 32 );
const material = new THREE.MeshBasicMaterial( { color: 0xffff00 } );
const circle = new THREE.Mesh( geometry, material );
scene.add( circle );

我使用了代码

geometry.vertices.shift();

但它在 "three": "^0.132.2", 中不起作用，显示为顶点不存在。请帮我解决这个问题 problem.below 是图像面临的问题

Answer 1

作为一个选项，将 THREE.Path 与 absarc() 和 .getSpacedPoints() 方法结合使用：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.132.2";
import {
  OrbitControls
} from "https://cdn.skypack.dev/three@0.132.2/examples/jsm/controls/OrbitControls.js";

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 10);
camera.lookAt(scene.position);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
renderer.setClearColor(0x404040);
document.body.appendChild(renderer.domElement);

let controla = new OrbitControls(camera, renderer.domElement);

let g = new THREE.BufferGeometry().setFromPoints(
    new THREE.Path().absarc(0, 0, 5, 0, Math.PI * 2).getSpacedPoints(50)
);
let m = new THREE.LineBasicMaterial({color: "aqua"});
let l = new THREE.Line(g, m);
scene.add(l);


window.addEventListener("resize", onResize);

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

function onResize(event) {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
}
</script>

在 threejs 中只有边框的圆圈

circle with only border in threejs

three.js