Divisez la texture three.js en morceaux

Question

J'ai besoin de projeter une grande image sur un groupe de petits plans (comme un puzzle). Cependant, je ne veux pas charger les morceaux de l'image indépendamment. Y a-t-il un moyen de charger une seule texture et d'envelopper chaque plan avec une région différente de la texture d'origine?

Answer 1

Vous pouvez faire en sorte que chaque maillage de plan partage le même matériau (et donc partage une seule texture composite), mais chaque maillage de plan doit avoir une géométrie différente. Les géométries diffèreront dans leurs UVs. Utilisez un schéma comme celui-ci :

var geometry1 = new THREE.PlaneGeometry(10, 10);
var geometry2 = new THREE.PlaneGeometry(10, 10);

geometry1.faceVertexUvs[0][0][0].set(0.0, 1.0); // quart supérieur gauche
geometry1.faceVertexUvs[0][0][1].set(0.0, 0.5);
geometry1.faceVertexUvs[0][0][2].set(0.5, 0.5);
geometry1.faceVertexUvs[0][0][3].set(0.5, 1.0);

geometry2.faceVertexUvs[0][0][0].set(0.5, 0.5); // quart inférieur droit
geometry2.faceVertexUvs[0][0][1].set(0.5, 0.0);
geometry2.faceVertexUvs[0][0][2].set(1.0, 0.0);
geometry2.faceVertexUvs[0][0][3].set(1.0, 0.5);

mesh1 = new THREE.Mesh(geometry1, material);
mesh2 = new THREE.Mesh(geometry2, material);

Utilisez également WebGLRenderer pour éviter la distorsion. Si vous avez besoin d'utiliser CanvasRenderer, vous devrez tesselliser vos géométries de plan.

var geometry1 = new THREE.PlaneGeometry(10, 10, 4, 4);

L'approche serait la même -- juste plus fastidieuse car il y a plus de faces impliquées.

three.js r.58