"The transparency of the three-js canvas texture is compromised when using the WebGL renderer, unlike the Canvasrenderer which maintains

Question

"The transparency of the three-js canvas texture is compromised when using the WebGL renderer, unlike the Canvasrenderer which maintains

I am attempting to display a CircleGeometry over a cube from the camera view. The cube has a solid color, while the circle contains just an arc on a canvas with no background color.

When using CanvasRenderer, the transparency of the canvas is retained and only the arc is visible.
However, when switching to WebGL renderer, the entire circle is filled with the page's background color, causing the transparency to be lost except for the arc.

To demonstrate this issue, I have created a test here: http://jsfiddle.net/f4u7s/6/. You can switch between WebGL and CanvasRendering to observe the problem. (look for

// ------------> Switch HERE
    //renderer = new THREE.CanvasRenderer();
    renderer = new THREE.WebGLRenderer();

)

This issue seems similar to the one discussed in this three.js textures working with CanvasRenderer but show up as black with WebGLRenderer thread. Despite trying the proposed solution (mesh.dynamic = true), the problem persists.

Could I be overlooking something?

javascript canvas webgl three.js

Answer 1

Answer №1

To make the material transparent, you must set material.transparent to true.

plane = new THREE.Mesh(
    new THREE.CircleGeometry( 50, 50 ),
    new THREE.MeshBasicMaterial( {
        map: texture,
        transparent: true
    } )
);

This code snippet is for three.js version r.144.

Answer 2

To make the material transparent, you must set material.transparent to true.

plane = new THREE.Mesh(
    new THREE.CircleGeometry( 50, 50 ),
    new THREE.MeshBasicMaterial( {
        map: texture,
        transparent: true
    } )
);

This code snippet is for three.js version r.144.

"The transparency of the three-js canvas texture is compromised when using the WebGL renderer, unlike the Canvasrenderer which maintains

Answer №1

Similar questions

Using JQuery to compare duplicate values within the same input name

updating the name of an HTML element with jQuery

In JavaScript, the gallery feature with Lightbox effect creates a unique touch as only half of the screen fades to black in

Tips for implementing autocomplete functionality in AngularJS input fields

What is the best way to incorporate a class creation pattern in Typescript that allows one class to dynamically extend any other class based on certain conditions?

using single quotation marks for string keys in a JavaScript object

The lookAt method in THREE.js is not functioning properly when called after the rendering process

Definition of Stencil Component Method

Resolving Undefined Vue Props Issue (handling props from Laravel blade)

Issue encountered while retrieving the initial element using .parent().search('img').eq(0)

Utilize a WCF Service with HTML and JavaScript

Is there a way to retrieve MongoDB count results in Node.js using a callback function?

Issue encountered when attempting to remove an element from an array using the delete method

The waypoints.js snippet seems to be malfunctioning in this specific context

What is the best way to combine two arrays while ensuring the elements of the second array appear before the elements of the first

HTML form submission with a grid of multiple choice options

What is the best way to invoke a function only once in typescript?

Enhancing my Javascript code by adjusting the styling of a link within the page navigation bar

Encountered a Soundcloud embedded javascript issue: Unable to execute the 'createPattern' function on 'CanvasRenderingContext2D' due to the canvas width being 0

Array specifically designed for replacing strings, but it only works with the final element