Three.js - применять различные материалы для экструдированной формы

Question

У меня есть Three.Shape, которые я могу применить Extrusion Чтобы получить плоскость я нарисовал квадрат, а затем применить выдавливание

var squareShape = new THREE.Shape(); 
squareShape.moveTo(0,0); 
squareShape.lineTo(0, sqLength); 
squareShape.lineTo(sqLength, sqLength); 
squareShape.lineTo(sqLength, 0); 
squareShape.lineTo(0, 0); 

var geometry = new THREE.ExtrudeGeometry(squareShape,extrudeSettings); 

теперь 3D квадрат появляется в моем браузере.

Далее Я хочу применить текстуру изображения 256x256 на ее верхней грани. Как это сделать?

Answer 1

Если вы посмотрите на src/extras/geometries/ExtrudeGeometry.js в THREE.js, вы увидите эти комментарии.

• материал: // Материал индекс для передней и задней части лица
• extrudeMaterial: // индекс материала для экструзии и скошенных граней

Так, например, вы можете сказать (очевидно, не будет работать напрямую потому что он является неполным)

// The face material will be index #0. The extrusion (sides) will be #1. 
var extrudeSettings = { amount: 10, bevelEnabled: true, bevelSegments: 3, steps: 4, bevelThickness: 8, material: 0, extrudeMaterial: 1 }; 

и при создании сетки вы создаете 2 материалы и назначать их меш.

var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [ new THREE.MeshLambertMaterial({ color: color }), new THREE.MeshBasicMaterial({ color: 0x000000, wireframe: true, transparent: true }) ]); 

Надеюсь, это поможет вам на правильном пути.

На боковой ноте, относящейся к другому ответу, вы хотите использовать экструзию для создания чего-то, что по размеру похоже на квадрат, но имеет скосы. Один пример был бы, если бы вы пытались нарисовать кости и хотели обойти края.

Answer 2

Если все, что вам нужно, это куб, почему вы выдавливаете? Почему бы вам не использовать CubeGeometry.