在 BoxGeometry 的多个表面上加载单个图像 - Three.js

Question

我正在使用 three.js 创建 3D 对象。我想在我的项目中创建类似于 this 的 3d canvas。我想在对象（框）的所有侧面（背面除外）渲染单个图像。

我在这里找到了一个类似的例子： https://www.geofx.com/graphics/nehe-three-js/lessons17-24/lesson17/lesson17.html.

我计划 BoxGeomatry 与 2D faceVertexUvs（自定义对齐）一起覆盖 surfaces.Is 有什么方法可以轻松完成而不是管理 Vector2 (2D)？有什么方法可以使用 Vector3 (3D) 或提供像素来轻松管理？

由于我是 Threejs 的新手，如果有更好的方法，请提出建议？

Answer 1

uv 为 BoxBufferGeometry 的选项：

body {
  overflow: hidden;
  margin: 0;
}

<script type="module">
import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

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

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

var g = new THREE.BoxBufferGeometry(10, 5, 1);
var uv = g.getAttribute("uv");

// +x
uv.setXY(0, 1, 1);
uv.setXY(1, 0.9, 1);
uv.setXY(2, 1, 0);
uv.setXY(3, 0.9, 0);

// -x
uv.setXY(4, 0.1, 1);
uv.setXY(5, 0, 1);
uv.setXY(6, 0.1, 0);
uv.setXY(7, 0, 0);

// +y
uv.setXY(8,  0, 0.8);
uv.setXY(9,  1, 0.8);
uv.setXY(10, 0, 1);
uv.setXY(11, 1, 1);

// -y
uv.setXY(12, 0, 0);
uv.setXY(13, 1, 0);
uv.setXY(14, 0, 0.2);
uv.setXY(15, 1, 0.2);

// -z ("back") - white area from 0,0 of map
uv.setXY(20, 0, 0);
uv.setXY(21, 0, 0);
uv.setXY(22, 0, 0);
uv.setXY(23, 0, 0);

var m = new THREE.MeshBasicMaterial({map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg")});
var o = new THREE.Mesh(g, m);
scene.add(o);

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

在 BoxGeometry 的多个表面上加载单个图像 - Three.js

Load single image on multiple surface of BoxGeometry - Three.js

javascript

3d

three.js