2012-09-27 24 views
7

Estoy construyendo una herramienta educativa usando planos, splines extruidos, y geometrías de cilindro. Los aviones tienen un mapa de textura y el resto son materiales básicos o de Lambert.canal alfa incoherente en three.js

  • Textura de mapa en planos en el único mapa y tiene un canal alfa .
  • mapa de textura ha sido probado como .GIF y .PNG
  • Todos los objetos tienen "transparente: true"
  • renderer = new THREE.WebGLRenderer ({antialias: true});

NOTA: este es exactamente el mismo problema que se detalla en el siguiente enlace. No se ha resuelto y mi representante no es lo suficientemente alto como para comentar.

in three.js, alpha channel works inconsistently

Como se señaló mmaclaurin, que podría ser un cambio basado en el orden de dibujo y ubicación de la cámara. Estoy usando THREE.TrackballControls y limitando el movimiento de la cámara a dos ejes.

Agregar o quitar el material básico para wireframe no cambia el problema.

Gracias por su tiempo leyendo esto y cualquier ayuda que pueda ofrecer!

Ejemplo de objeto plano:

var T4map = new THREE.ImageUtils.loadTexture('medium_T4.png'); 
    var T4Material = new THREE.MeshBasicMaterial({ opacity: .96, transparent:true, map: T4map }); 
    var T4Geometry = new THREE.PlaneGeometry(810, 699, 10, 10); 
    var T4 = new THREE.Mesh(T4Geometry, T4Material); 
    T4.position.y = -CNspacing; 
    T4.doubleSided = true; 
    scene.add(T4); 

Ejemplo de la geometría spline extruido donde problema es más notable:

var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [ 
new THREE.MeshLambertMaterial({ color: 0xaaff00, opacity: 0.5, transparent: true }),   
     mesh.position.set(x, y, z); 
     mesh.scale.set(s, s, s); 
     parent.add(mesh); 
+0

Nueva observación: sólo podría estar ocurriendo bajo = 0 – ChrisTalbot

+0

y todos los objetos en movimiento para y> 0 no ayudó. Sin embargo, si muevo la cámara a través de todas las posiciones y para observar la falta de alfa, el efecto finalmente se detiene. Suena como un problema de dibujo ... – ChrisTalbot

+0

El problema se detiene pero la transparencia se pierde y se pierde para siempre (hasta que se actualice) – ChrisTalbot

Respuesta

3

Trate de jugar con depthTest. Por lo general, esto ayudaría:

new THREE.MeshBasicMaterial({ side:THREE.BackSide,map:texture,transparency:true, opacity:0.9, depthWrite: false, depthTest: false }); 

Hay muchas otras preguntas relacionadas con el sujeto, por ej .: transparent bug

Cuestiones relacionadas