Threejs - Problem with very transparent objects

2012-01-05 ~

by jj_gagnon

JavaScript

var camera, scene, renderer, geometry, material, mesh;

init();


function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.z = 40;
    scene.add(camera);

    geometry = new THREE.CircleGeometry(10);
    material = new THREE.MeshBasicMaterial();
    material.color.set(0,0,0)
    material.transparency = true
    material.opacity = 0.002

    for (let i=0; i< 1000; i++){
        mesh = new THREE.Mesh(geometry, material);
        mesh.position.x = Math.random() * 2 - 1
        mesh.position.y = Math.random() * 2 - 1
        mesh.position.z = Math.random() * 2 - 1
        scene.add(mesh);
    }
    

    renderer = new THREE.CanvasRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    
    renderer.render(scene, camera);
}