如何在 125 后使用 three.js 版本在 BuffererGeometry 中制作一个面球体

Question

代码的目的是在125

之前的旧版本three.js中制作一个面球体

// 1. the first step is Make a faceted cube
let geometry = new THREE.BoxGeometry(1, 1, 1, 64, 64, 64);

// 2. the second step is Normalize all vertices
for (var i in this.geometry.vertices) {
   geometry.vertices[i].normalize().multiplyScalar(this.radius);
}

// geometry.makeGroups();
geometry.computeVertexNormals();
geometry.computeFaceNormals();
geometry.computeMorphNormals();
geometry.computeBoundingSphere();
geometry.computeBoundingBox();
// geometry.computeLineDistances();

geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
// geometry.tangentsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.lineDistancesNeedUpdate = true;
// geometry.buffersNeedUpdate = true;
geometry.groupsNeedUpdate = true;

在版本 125 之后，几何体 class 被移除并有 BuffererGeometry，我将如何修改代码再次制作球体？

Answer 1

你可以这样把一个盒子变成一个球体：

body{
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://cdn.skypack.dev/three@0.133.1";
import {OrbitControls} from "https://cdn.skypack.dev/three@0.133.1/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, 5);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

let g = new THREE.BoxGeometry(1, 1, 1, 64, 64, 64);
let pos = g.attributes.position;
let v3 = new THREE.Vector3();
let radius = 2;
for (let i = 0; i < pos.count; i++){
  v3.fromBufferAttribute(pos, i).normalize().multiplyScalar(radius);
  pos.setXYZ(i, v3.x, v3.y, v3.z);
}
g.computeVertexNormals();
let m = new THREE.MeshNormalMaterial({wireframe: true});
let o = new THREE.Mesh(g, m);
scene.add(o);

window.addEventListener("resize", () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeihgt);
});

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});
</script>

如何在 125 后使用 three.js 版本在 BuffererGeometry 中制作一个面球体

how to make a faced sphere in BuffererGeometry with three.js version after 125

three.js