Cómo uso la textura en una esfera en three.js

He descargado un ejemplo de esfera de: http://aerotwist.com/lab/getting-started-with-three-js/ y puedo ver la bonita esfera roja. Me gustaría usar una textura en él. He intentado esto:Cómo uso la textura en una esfera en three.js

var texture = THREE.ImageUtils.loadTexture("ball-texture.jpg"); 
texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping; 
texture.repeat.set(125, 125); 
texture.offset.set(15, 15); 
texture.needsUpdate = true; 
var sphereMaterial = new THREE.MeshBasicMaterial({ map: texture }); 
var sphere = new THREE.Mesh(new THREE.Sphere(radius, segments, rings),sphereMaterial);

pero no puedo ver nada, todo es negro. ¿Alguien tiene un ejemplo de trabajo para la textura de esfera?

Fuente

2011-08-02 Gavriel

Esto es una suposición total, ya que no sé * nada * sobre esto, pero si ha cambiado el material de un color plano a una textura, ¿podría necesitar agregar una fuente de luz? Puede ser que un sombreador de color constante no lo requiera, mientras que un objeto con textura lo haría. – Beska

Tengo una luz – Gavriel

¿Estás usando Firefox? Esto podría ser un problema en tu navegador. Firefox usa algún tipo de bloqueador de sitios cruzados para texturas. El resultado es negro en su lugar. Eche un vistazo a este sitio para obtener más información: http://hacks.mozilla.org/2011/06/cross-domain-webgl-textures-disabled-in-firefox-5/

Fuente

2011-08-04 09:16:35 musse1

no, estoy en Chrome – Gavriel

Parece que la versión actual de Chrome tiene el mismo "problema". En realidad es un problema de seguridad: http://blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html – musse1

Puede tener dos problemas.

primer lugar, tratar de cargarlo como esto:

var texture = THREE.ImageUtils.loadTexture('ball-texture.jpg', {}, function() { 
    renderer.render(scene, camera); 
}); 

texture.needsUpdate = true;

Asegúrese de que el tamaño de la textura es una potencia de dos (512x512px para IE).

Fuente

2011-10-09 12:09:23 frenski

Posponer el renderizado hasta que la imagen se haya cargado me funcionó - gracias ! – poshaughnessy

@poshaughnessy ¿Cómo eliminaste los espacios vacíos (blancos en blanco) que aparecen cuando se repite la textura? – Faizan

¿Tiene un ciclo de representación, o representó la escena solo una vez?

Necesita tener un bucle de representación para que cuando el THREE.ImageUtils cargue la imagen y actualice la textura, vuelva a representar la escena con la textura actualizada.

Todos los ejemplos de three.js parecen basarse en esta técnica. Es decir, ejecute varias operaciones asincrónicas que implican la obtención de un recurso remoto, inicie el ciclo de representación, permita que la escena se actualice a medida que lleguen recursos remotos.

En mi humilde opinión, este es el mayor descubrimiento de Three.js para los usuarios de Javascript (como yo) que no están familiarizados con el funcionamiento de las operaciones asincrónicas.

Fuente

2012-01-30 13:31:29

Tuve este problema, pero si está cargando el html como un archivo (es decir, no localmente un servidor web), muchos navegadores (cromo por ejemplo) no le permitirán cargar imágenes de la manera estándar three.js, ya que es una violación de seguridad

Fuente

2012-04-15 12:10:54 gazhay

Cómo uso la textura en una esfera en three.js

Respuesta

Cuestiones relacionadas