Текстура с одной стороны куба

Question

У меня вопрос, как возможно наложить текстуру, только на одну сторону куба

var texture = new THREE.TextureLoader().load( 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1CXtan-QIqqACjx0xQz3e6XrdZwBSedb7Hw&usqp=CAU' );
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set( 10, 5 );

const material3 = new THREE.MeshLambertMaterial({
    color: 0x909090
});
const material4 = new THREE.MeshLambertMaterial({
    map: texture
});

const cube = new THREE.Mesh(geometry, material3);
const cube1 = new THREE.Mesh(geometry, material4);
const cube2 = new THREE.Mesh(geometry, material4);
const cube3 = new THREE.Mesh(geometry, material4);
const cube4 = new THREE.Mesh(geometry, material4);
scene.add(cube);
scene.add(cube1);
scene.add(cube2);
scene.add(cube3);
scene.add(cube4);

Answer 1

Пример с простейшим вариантом (массив материалов):

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";

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

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

let light = new THREE.DirectionalLight(0xffffff, 1);
light.position.setScalar(10);
scene.add(light);
scene.add(new THREE.AmbientLight(0xffffff, 0.5));

let matBase = new THREE.MeshLambertMaterial({color: "magenta"});
let matTex = new THREE.MeshLambertMaterial({map: new THREE.TextureLoader().load("https://threejs.org/examples/textures/uv_grid_opengl.jpg")});

let mats = [
  matBase,
  matBase,
  matBase,
  matBase,
  matTex,
  matBase  
];

let g = new THREE.BoxBufferGeometry(5, 5, 5);

let box = new THREE.Mesh(g, mats);
scene.add(box);

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

БЛОГ НА HUSL

Текстура с одной стороны куба

Ответы (1 шт):