立方体到球体以获得平滑的纹理

Question

我的目标是从立方体创建一个球体以应用 6 个纹理。每张脸一张。使用 three.js 的旧核心，这是一件容易的事。这里 link 我想用 three.js 的实际核心做什么。

https://blogg.bekk.no/procedural-planet-in-webgl-and-three-js-fc77f14f5505

新核心让这个目标比我想象的更重。我怎样才能用新核心中的立方体制作一个边缘有光滑纹理的球体？

Answer 1

正如所提供的文章中所述，它非常简单明了。归一化顶点，乘以所需的半径：

body{
  overflow: hidden;
  margin: 0;
}

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

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.setScalar(10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

const r = 7;
let g = new THREE.BoxGeometry(1, 1, 1, 10, 10, 10);
let v = new THREE.Vector3(); // temp vector, for re-use
for(let i = 0; i < g.attributes.position.count; i++){
  v.fromBufferAttribute(g.attributes.position, i);
  v.normalize().multiplyScalar(r); // or v.setLength(r); 
  g.attributes.position.setXYZ(i, v.x, v.y, v.z);
}
g.computeVertexNormals();

let m = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});
let cube = new THREE.Mesh(g, m);
scene.add(cube);

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

立方体到球体以获得平滑的纹理

Cube to Sphere for smooth texturing

three.js