Загрузить одно изображение на несколько поверхностей BoxGeometry - Three. js - PullRequest
Новая
       93

Загрузить одно изображение на несколько поверхностей BoxGeometry - Three. js

0 голосов
/ 14 июля 2020

Я использую три. js для создания 3D-объектов. Я хочу создать трехмерный холст, похожий на этот в моем проекте. Я хочу отобразить одно изображение со всех сторон объекта (блока), кроме задней.

Я нашел здесь один похожий пример: https://www.geofx.com/graphics/nehe-three-js/lessons17-24/lesson17/lesson17.html.

Я Планирование до BoxGeomatry вместе с 2D faceVertexUvs (настраиваемое выравнивание) для покрытия поверхностей. Могу ли я сделать это легко, вместо того, чтобы управлять Vector2 (2D)? В любом случае я могу использовать Vector3 (3D) или предоставить пиксель для удобного управления?

Поскольку я новичок в Three js, пожалуйста, предложите лучший подход, если таковой имеется?

1 Ответ

1 голос
/ 14 июля 2020

Вариант с УФ 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>
...