peterqliu / threebox

A three.js plugin for Mapbox GL JS, with support for basic animation and advanced 3D rendering.
MIT License
526 stars 320 forks source link

Transparency example #58

Closed bennlich closed 5 years ago

bennlich commented 5 years ago

I'd love an example with a transparent object :)

bennlich commented 5 years ago

Here's a gist based on the basic cube example where I try to make the red cube transparent (to no avail):

https://gist.github.com/bennlich/6c8282c9429f3342eb645a4575b6b536

Screenshot from 2019-05-10 10-21-06

bennlich commented 5 years ago

I think I just don't understand how to use alphaMaps properly. Using the transparent and opacity properties seems to work as expected. E.g.:

var redMaterial = new THREE.MeshPhongMaterial({
    color: 0x660000,
    transparent: true,
    opacity: 0.5
});

Screenshot from 2019-05-10 13-45-38

peterqliu commented 5 years ago

@bennlich yes, THREE requires transparent: true whenever you want to render things that aren't fully opaque. this enables it to skip depth testing behind opaque things.