javascript - Creating a transparent cylinder - Stack Overflow

admin管理员组

文章数量:1356142

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

Share Improve this question Follow edited Jul 19, 2012 at 18:03 mrdoob 19.6k44 gold badges6666 silver badges6262 bronze badges asked Jul 17, 2012 at 15:11 user1518845user1518845 16511 gold badge22 silver badges1313 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Shouldn't it be this instead?

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

本文标签： javascriptCreating a transparent cylinderStack Overflow