Three.js - appliquer différents matériaux à la forme extrudée

Question

Je Three.Shape que je peux appliquer l'extrusion Pour obtenir un plan j'ai dessiné un premier carré, puis appliquer l'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); 

maintenant un carré 3D apparaît sur mon navigateur

Ensuite, je souhaite appliquer une texture d'image de 256 x 256 sur sa face supérieure. Comment faire ça?

Answer 1

Si vous regardez src/extras/geometries/ExtrudeGeometry.js dans THREE.js, vous verrez ces commentaires.

• matériel: // index matériel pour faces avant et arrière
• extrudeMaterial: // index des matériaux pour l'extrusion et les faces biseautés

Ainsi, par exemple, vous pouvez dire (ne sera évidemment pas courir directement car il est incomplet)

// 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 }; 

Et lorsque vous créez votre maillage, vous créez 2 matériaux et vous les affectez à votre maillage.

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

Espérons que cela vous met sur la bonne voie. Sur une note de côté, liée à l'autre réponse, vous donnez envie d'utiliser extrude pour créer quelque chose qui est dimensionnellement similaire à un carré mais qui a des biseaux. Un exemple serait si vous essayiez de dessiner des dés et vouliez arrondir les bords.

Answer 2

Si tout ce que vous voulez est un cube, pourquoi expulsez-vous? Pourquoi n'utilisez-vous pas CubeGeometry.