Is there a way to create a transparent cylinder in Three.js? I've tried using different settings like transparent or opacity but haven't had much success. Should I load a dummy texture with an alpha channel, or is there a simpler solution?
material = new THREE.MeshBasicMaterial({wireframe: true});
material.transparent = true;
mesh = new THREE.Mesh(new THREE.CylinderGeometry(4, 4, 50, 8, 1, true), material);
scene.add(mesh);
Update: I managed to make it work by using ShaderMaterial even though it feels somewhat unconventional.
material = new THREE.ShaderMaterial({wireframe: true, transparent: true});
mesh = new THREE.Mesh(new THREE.CylinderGeometry(4, 4, 50, 8, 1, true), material);
scene.add(mesh);
Update: Below are some image links for reference:
- I unfortunately can't share the images due to my lack of reputation points, so I will provide faulty links that can be fixed by adding 'h' at the beginning of each URL.
ttp://img692.imageshack.us/img692/6412/shadermaterial.png A demonstration of the use of ShaderMaterial showing a grey Sprite within a transparent cylinder.
Using MeshBasicMaterial with Opacity set to 0.0.
Using MeshBasicMaterial with Opacity set to 0.5.
Using MeshBasicMaterial with Opacity set to 1.0.