0

Tengo una ruleta básica con 6 o 7 lados, quiero saber cómo puedo cargar imágenes a cada uno de los lados de la figura.


 let material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    map: new THREE.TextureLoader().load('/images/cara1.jpg'),
});

En el código anterior se carga una sola imagen a toda la figura, lo que intento hacer es que solo quede en un lado.

threejs

Estoy usando la librería Three js, e intenté hacerlo como en el cubo pero me carga el material como la imagen anterior, ¿alguna idea de lo que me esté faltando para poder varias imágenes en cada lado de la figura?

2 respuestas 2

1

Si estas utilizando three.js, lo mejor que puedes hacer es utilizar CubeTexture. Esto también se utiliza para mapas de entorno y funciona de esta manera:

const loader = new THREE.CubeTextureLoader();
//loader.setPath( url de la carpeta ); En caso de que no tengas las imágenes en la misma carpeta

const textureCube = loader.load( [
    'px.png' -> 1, 'nx.png' -> 6,
    'py.png' -> 2, 'ny.png' -> 5,
    'pz.png' -> 3, 'nz.png' -> 4
] );

const material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube } );

Y tiene los mismos atributos y métodos que la clase textura

0

Búscate información acerca de "facevertexuvs". Con ello podrás mapear una imagen en las caras del cubo.

Te adjunto un ejemplo que hice en la universidad de poner una textura en un cubo y mapearla en las caras del cubo. (Te lo adjunto con explicación y todo).

El ejercicio lo he realizado primero cogiendo y uniendo las caras en una única imagen llamada “texture” en forma de tres filas y dos columnas.

Para dividir la imagen en las seis caras, vamos a usar las coordenadas u = 0, u= 0.5 y u = 1 al haber dos columnas de caras, y v=0, v= 1/3, v=2/3 y v=1 al haber tres filas de caras.

En la línea 60 del documento “skyboxAndFaces.js” guardamos el nombre de la textura con las seis caras juntas, y en la línea 64 creamos la textura para añadirla al material en la línea 69.

Ahora vamos a crear en la línea 76 y 77 las posiciones de las coordenadas u y v explicadas anteriormente para luego mapear la textura en la geometría de cubo.

Esta geometría de cubo creada con la librería de Three (“BoxGeometry”), hereda de “Geometry”. Leyendo dentro de la librería el objeto “Geometry” podemos ver que para acceder y mapear, tenemos que modificar el “faceVertexUvs” de la geometría.

El faceVertexUvs es una matriz donde el primer índice nos da la capa UV, y el segundo índice nos da uno de los dos triángulos que componen una cara del cubo (una cara está formada por dos triángulos, por lo que para acceder, por ejemplo, a los triángulos de la cara de delante, tenemos que usar la posición 0 y 1). Dentro de cada posición se guardan tres vectores (que hacen referencia a los tres vértices del triángulo) de dos posiciones en los que se guarda la coordenada UV.

“Geometry.faceVertexUvs[uv layer][face index][vertexA[u,v], vertexB[u,v], vertexC[u,v]]”

Sabiendo esto, vamos a modificar la coordenada UV de los tres vértices de cada triángulo de cada cara del cubo en la capa UV = 0, para después hacer el mesh de la geometría con la textura.

Desde la línea 95 hasta la 176 se realiza lo descrito anteriormente. Vamos a explicar la primera cara que es la cara de delante.

La primera cara está formada por dos triángulos, por lo que vamos a usar “geometry.faceVertexUvs[0][0]” y “geometry.faceVertexUvs0” para acceder a los dos triángulos que forman la cara. A continuación, vamos a introducir tres vectores de dos posiciones por cada triángulo.

Cada vector hace referencia al primer, segundo y tercer vértice. La normal está apuntando hacia el exterior del cubo, por lo que sabemos que los vértices están enumerados en sentido antihorario.

Teniendo determinada la cara y el triángulo que vamos a modificar, es tan sencillo como ponerle el valor de U y V en cada vértice que corresponda con los U y V de la imagen “texture” preparada anteriormente.

Al haber hecho el ejercicio voluntario antes que este, sabemos que el segundo índice de faceVertexUvs va desde 0 hasta 11 (12 triángulos, 2 por cara), y sabemos que el orden es el siguiente:

0. Primer triángulo de la cara de delante.
1. Segundo triángulo de la cara de delante.
2. Primer triángulo de la cara de detrás.
3. Segundo triángulo de la cara de detrás.
4. Primer triángulo de la cara de arriba.
5. Segundo triángulo de la cara de arriba.
6. Primer triángulo de la cara de abajo.
7. Segundo triángulo de la cara de abajo.
8. Primer triángulo de la cara de izquierda.
9. Segundo triángulo de la cara de izquierda.
10. Primer triángulo de la cara de derecha.
11. Segundo triángulo de la cara de derecha.

Cuando hacemos referencia a una cara y decimos que es la de la izquierda o la de arriba, lo decimos tomando como punto de referencia la posición inicial de la cámara. La cara que se ve justo al cargar la página y la que muestra la cámara antes de moverla, es la cara de delante.

Una vez que escogemos una cara, existen dos triángulos. Los triángulos vienen definidos por los siguientes vértices.

Primer triángulo
    Primer vértice: Vértice superior izquierdo.
    Segundo vértice: Vértice inferior izquierdo.
    Tercer vértice: Vértice superior derecho.
Segundo triángulo
    Primer vértice: Vértice inferior izquierdo.
    Segundo vértice: Vértice inferior derecho.
    Tercer vértice: Vértice superior derecho.

Podemos ver que estamos en la cara de delante por el segundo índice de faceVertexUvs. En el primer triángulo de la cara podemos ver que se pone en el primer vértice (superior izquierdo) el valor de U=u[0]=0 y V=v[3]=1. Con esto vemos que la esquina superior izquierda de la primera cara se ha mapeado la esquina superior izquierda de la foto de Mr. Bean.

En el segundo vértice que corresponde al vértice inferior izquierdo de la cara, se ha mapeado la esquina inferior izquierda de la imagen de Mr. Bean, que corresponde con U=u[0]=0 y V=v[2]=2/3.

Si hacemos este mismo proceso con los seis vértices que forman los dos triángulos de la cara, podemos ver que terminamos mapeando toda la textura de la imagen de Mr. Bean en la cara de delante del cubo por completo. Y repitiendo todo este proceso para las seis caras del cubo, terminamos completando todo el mapeado de la textura en el cubo.

Lo único que falta por hacer es realizar el mesh de la textura y de la geometría, que se hace en la línea 180 y añadirlo a la escena en la línea 181. Con esto tendríamos el cubo con la textura lista para mostrar

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <title>Three.js: Example 10 - Texturing faces on cube using array of materials and a skybox background</title>
      </head>
      <body>
        <script src="SkyboxAndFaces.js" type="module"></script>
      </body>
</html>

(SkyboxAndFaces.js)

import * as THREE from './lib/Three/three.module.js';
import { GUI } from './lib/Three/dat.gui.module.js';
import { TrackballControls } from './lib/Three/controls/TrackballControls.js';

 function draw_scene(){
  
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight ); 
  document.body.appendChild( renderer.domElement );
  renderer.setClearColor(0xEEEEEE);

  var scene = new THREE.Scene(); 
  var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 3000); 
  var mouseControls = new TrackballControls(camera, renderer.domElement);
  mouseControls.staticMoving = true;
  
  var controls = new function(){
        this.visibleamb = true;
        this.coloramb = 0xffffff;
        this.camerax = 40;
        this.cameray = 0;
        this.cameraz = 0;
        this.camerax_prev = 40;
        this.cameray_prev = 0;
        this.cameraz_prev = 0;
        this.cameratargetx = 0;
        this.cameratargety = 0;
        this.cameratargetz = 0;
        this.cameratargetx_prev = 0;
        this.cameratargety_prev = 0;
        this.cameratargetz_prev = 0;
    
        this.updateCamx = function (e){
            camera.position.x = e;  
        }
        this.updateCamy = function (e){
            camera.position.y = e;
        }
        this.updateCamz = function (e){
            camera.position.z = e;      
        }
        this.updateCamtargetx = function (e){
            cameraTarget.position.x = e;  
        }
        this.updateCamtargety = function (e){
            cameraTarget.position.y = e;  
        }
        this.updateCamtargetz = function (e){
            cameraTarget.position.z = e;  
        }
        this.updateLightambcolor = function (e) {               
            ambientLicht.color.setHex(e);
        }
        this.visibleAmbient = function (e){
            ambientLicht.visible = e;
        }
    }
  

    //Cargamos textura nueva
    var urls = "texture.jpg";
    var urls2 = ["starsmap.png", "starsmap.png", "starsmap.png", "starsmap.png", "starsmap.png", "starsmap.png"];

    //Pasamos textura nueva para crear el map.
    var maptext = new THREE.TextureLoader().load( urls );
    var textureBackground = new THREE.CubeTextureLoader().load( urls2 );
    scene.background = textureBackground;

    //Cargamos el map al material que luego será cargado a la primitiva.
    var matcubo = new THREE.MeshBasicMaterial( { map: maptext} );
    var geometry = new THREE.BoxGeometry (20, 20, 20);

    //La textura tiene 6 imágenes con 4 esquinas cada una, por lo que tenemos que definir los texels para saber esas esquinas.
    //u = [0,0.5,1]
    //v = [0,0.3,0.6,1]
    
    var u = [0, 1/2, 1];
    var v = [0, 1/3, 2/3, 1];

    /*
    Orden de caras:
        Delante,
        Detras,
        Arriba,
        Abajo,
        Izquierda,
        Derecha
    
    Orden de vertices:
        Primer triangulo: top-left, bottom-left, top-right.
        Segundo triangulo: bottom-left, bottom-right, top right.
    */
    
    //Cara de delante
    //Triángulo 1
    geometry.faceVertexUvs[0][0]=[ 
        new THREE.Vector2(u[0],v[3]),
        new THREE.Vector2(u[0],v[2]),
        new THREE.Vector2(u[1],v[3])
    ];
    //Triángulo 2
    geometry.faceVertexUvs[0][1]= [
        new THREE.Vector2(u[0],v[2]),
        new THREE.Vector2(u[1],v[2]),
        new THREE.Vector2(u[1],v[3])
    ];
  
    //Cara de detrás
    //Triángulo 1
    geometry.faceVertexUvs[0][2]=[
        new THREE.Vector2(u[1],v[3]),
        new THREE.Vector2(u[1],v[2]),
        new THREE.Vector2(u[2],v[3])
    ];
    //Triángulo 2
    geometry.faceVertexUvs[0][3]= [
        new THREE.Vector2(u[1],v[2]),
        new THREE.Vector2(u[2],v[2]),
        new THREE.Vector2(u[2],v[3])
    ];

    //Cara de arriba
    //Triángulo 1
    geometry.faceVertexUvs[0][4]=[
        new THREE.Vector2(u[0],v[2]),
        new THREE.Vector2(u[0],v[1]),
        new THREE.Vector2(u[1],v[2])
    ];
    //Triángulo 2
    geometry.faceVertexUvs[0][5]= [
        new THREE.Vector2(u[0],v[1]),
        new THREE.Vector2(u[1],v[1]),
        new THREE.Vector2(u[1],v[2])
    ];

    //Cara de abajo
    //Triángulo 1
    geometry.faceVertexUvs[0][6]=[ 
        new THREE.Vector2(u[1],v[2]),
        new THREE.Vector2(u[1],v[1]),
        new THREE.Vector2(u[2],v[2])
    ];
    //Triángulo 2
    geometry.faceVertexUvs[0][7]= [
        new THREE.Vector2(u[1],v[1]),
        new THREE.Vector2(u[2],v[1]),
        new THREE.Vector2(u[2],v[2])
    ];

    //Cara de la izquierda
    //Triángulo 1
    geometry.faceVertexUvs[0][8]=[ 
        new THREE.Vector2(u[0],v[1]),
        new THREE.Vector2(u[0],v[0]),
        new THREE.Vector2(u[1],v[1])
    ];
    //Triángulo 2
    geometry.faceVertexUvs[0][9]= [
        new THREE.Vector2(u[0],v[0]),
        new THREE.Vector2(u[1],v[0]),
        new THREE.Vector2(u[1],v[1])

    ];

    //Cara de la derecha
    //Triángulo 1
    geometry.faceVertexUvs[0][10]=[
        new THREE.Vector2(u[1],v[1]),
        new THREE.Vector2(u[1],v[0]),
        new THREE.Vector2(u[2],v[1])
    ];
    //Triángulo 2
    geometry.faceVertexUvs[0][11]= [
        new THREE.Vector2(u[1],v[0]),
        new THREE.Vector2(u[2],v[0]),
        new THREE.Vector2(u[2],v[1])
    ];
  
  
  //Introducimos el material creado al cubo.
  var cubo = new THREE.Mesh( geometry, matcubo ); 
  scene.add(cubo);
  
  var cameraTarget = new THREE.Mesh( new THREE.SphereGeometry(2), new THREE.MeshBasicMaterial( { color: 0xff0000 } ));
  scene.add(cameraTarget);
  
  var gui = new GUI();
 
  var f5 = gui.addFolder('Camera');
  var controlx = f5.add(controls, 'camerax', -200,200).onChange(controls.updateCamx);
  var controly = f5.add(controls, 'cameray', -200,200).onChange(controls.updateCamy);
  var controlz = f5.add(controls, 'cameraz', -200,200).onChange(controls.updateCamz);
  var controltargetx = f5.add(controls, 'cameratargetx', -200,200).onChange(controls.updateCamtargetx);
  var controltargety = f5.add(controls, 'cameratargety', -200,200).onChange(controls.updateCamtargety);
  var controltargetz = f5.add(controls, 'cameratargetz', -200,200).onChange(controls.updateCamtargetz);
  
  f5.open();
  
  var f6 = gui.addFolder('Ambient Light');
  f6.addColor(controls, 'coloramb').onChange(controls.updateLightambcolor);
  f6.add(controls, 'visibleamb').onChange(controls.visibleAmbient);
 
  var ambientLicht = new THREE.AmbientLight(controls.coloramb);
  scene.add(ambientLicht);
  
  camera.position.set(controls.camerax,controls.cameray,controls.cameraz);
  
    function render() { 
    
        mouseControls.update();
        if (controls.camerax_prev != camera.position.x){
            controls.camerax = camera.position.x;
            controls.camerax_prev = camera.position.x;
            controlx.updateDisplay();
        }
        if (controls.cameray_prev != camera.position.y){
            controls.cameray = camera.position.y;
            controls.cameray_prev = camera.position.y;
            controly.updateDisplay();
        }
        if (controls.cameraz_prev != camera.position.z){
            controls.cameraz = camera.position.z;
            controls.cameraz_prev = camera.position.z;
            controlz.updateDisplay();
        }
        if (controls.cameratargetx_prev != cameraTarget.position.x){
            controls.cameratargetx = cameraTarget.position.x;
            controls.cameratargetx_prev = cameraTarget.position.x;
            controltargetx.updateDisplay();
        }
        if (controls.cameray_prev != camera.position.y){
            controls.cameray = camera.position.y;
            controls.cameray_prev = camera.position.y;
            controltargety.updateDisplay();
        }
        if (controls.cameraz_prev != camera.position.z){
            controls.cameraz = camera.position.z;
            controls.cameraz_prev = camera.position.z;
            controltargetz.updateDisplay();
        }
      
        requestAnimationFrame( render );
        camera.lookAt(cameraTarget.position);
        renderer.render( scene, camera ); 
    } 
      
render();
}
    
draw_scene();

Enlace: Ejercicio.

1
  • genial, lo seguiré al pie de la letra.
    – Dave
    Commented el 17 ene. 2021 a las 23:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.