AnsweredAssumed Answered

How to make material opacity and transparent in ExternalRenderer with three.js?

Question asked by beginor on Oct 21, 2019
Latest reply on Oct 25, 2019 by beginor

Hello, I am doing some webgl extensions with three.js following the ExternalRenderer sample,  I have created a CustomRenderer like this:

 

public setup(context: __esri.RenderContext): void {
    // Setup webgl renderer
    this.renderer = new WebGLRenderer({
        context: context.gl,
        alpha: true,
        antialias: true
    });
    this.renderer.autoClear = false;
    // this.renderer.setPixelRatio(window.devicePixelRatio);
    this.renderer.setViewport(0, 0, this.view.width, this.view.height);
    this.scene = new Scene();
    this.camera = new PerspectiveCamera();
}

 

Then load a texture from a url, and add it to scene, the code looks like this:

 

const extent = this.properties.extent;
const elevation = this.properties.elevation;
const unit = Math.PI / 180.0 * (EarthRadius + elevation);
const width = (extent.xmax - extent.xmin) * unit;
const height = (extent.ymax - extent.ymin) * unit;
const segs = 36;
const geometry = new PlaneBufferGeometry(width, height, segs, segs);
const textureLoader = new TextureLoader();

const texture = textureLoader.load(this.properties.url);

const material = new MeshBasicMaterial({
    // color: 0xffff00,
    map: texture,
    wireframe: false,
    opacity: 0.5,
    transparent: true,
    alphaTest: 0.05,
    side: DoubleSide
});
this.plane = new Mesh(geometry, material);
const srcCoord = [
    (extent.xmin + extent.xmax) / 2,
    (extent.ymin + extent.ymax) / 2,
    elevation
];
const destCoord = [0, 0, 0];
externalRenderers.toRenderCoordinates(
    this.view,
    srcCoord,
    0,
    SpatialReference.WGS84,
    destCoord,
    0,
    1
);
const transform = new Matrix4();
transform.fromArray(
    externalRenderers.renderCoordinateTransformAt(
        this.view,
        srcCoord,
        SpatialReference.WGS84,
        new Float32Array(16)
    )
);
transform.decompose(
    this.plane.position,
    this.plane.quaternion,
    this.plane.scale
);
this.scene.add(this.plane);

 

I have set transparent to true, and opacity to 0.5 , but the texture loaded looks not transparent, but it it looks transparent in three.js.

 

So, how to make texture loaded transparent in external renderer?

Outcomes