I'm trying to create a transparent cylinder. I've tried setting transparent, opacity, etc., but can't seem to get it to work. Is there any way to do this? Do I need to load a dummy texture with an alpha channel? Is there a simpler way?

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've changed the code to the following, but it seems wrong to use ShaderMaterial in this way. But it works...

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: Here are the images.

• I can't add the images properly or add links, since I need a reputation of 11, and only have 10, so I've added broken links instead. Add 'h' in front of each url.

ttp://img692.imageshack.us/img692/6412/shadermaterial.png Using ShaderMaterial you see the rectangular grey Sprite surrounded by a transparent cylinder.

.png Using MeshBasicMaterial with Opacity 0.0.

.png Using MeshBasicMaterial with Opacity 0.5.

.png Using MeshBasicMaterial with Opacity 1.0.

I'm trying to create a transparent cylinder. I've tried setting transparent, opacity, etc., but can't seem to get it to work. Is there any way to do this? Do I need to load a dummy texture with an alpha channel? Is there a simpler way?

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've changed the code to the following, but it seems wrong to use ShaderMaterial in this way. But it works...

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: Here are the images.

• I can't add the images properly or add links, since I need a reputation of 11, and only have 10, so I've added broken links instead. Add 'h' in front of each url.

ttp://img692.imageshack.us/img692/6412/shadermaterial.png Using ShaderMaterial you see the rectangular grey Sprite surrounded by a transparent cylinder.

http://img855.imageshack.us/img855/3988/opacity00.png Using MeshBasicMaterial with Opacity 0.0.

http://img27.imageshack.us/img27/6087/opacity05.png Using MeshBasicMaterial with Opacity 0.5.

http://img837.imageshack.us/img837/8043/opacity10.png Using MeshBasicMaterial with Opacity 1.0.

• javascript
• webgl
• three.js

1 Answer 1

Shouldn't it be this instead?

material = new THREE.MeshBasicMaterial( { wireframe: true, opacity: 0.5 } );