javascript - Three js canvas blurry

Question

How do I produce a better resolution? At the moment it is very blurry. I'm animating a cube that disassembles itself. This is using three.js. I appreciate any help. Thank you.

My js code:

canvas = document.getElementById( 'c' );

renderer = new THREE.WebGLRenderer( { canvas: canvas, antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
const scene = new THREE.Scene();
const context = canvas.getContext( '2d' );

const geometry = new THREE.BoxBufferGeometry( 10, 10, 10, 5, 5, 0);
var material = new THREE.PointsMaterial({color: 0xF3FFE2, size: 0.1, side:THREE.DoubleSide});
const camera = new THREE.PerspectiveCamera( 75, 1, 0.1, 100 );
const plane = new THREE.Points( geometry, material );

const plane1 = new THREE.Points( geometry, material );

const plane2 = new THREE.Points( geometry, material );

plane1.rotation.x = Math.PI/2;
plane2.rotation.y = Math.PI/2;


scene.add( plane );
scene.add(plane1);
scene.add(plane2);


camera.position.z = 60;


var toggle = false;
function animate() {
    requestAnimationFrame(animate);
    var t = Math.round(plane.scale.z * 100) / 100;
    if(t == 4){
        toggle = true;
    }
    if(t == 1){
        toggle = false;
    }

    if(!toggle){
        plane.scale.z += 0.01;
        plane1.scale.z += 0.01;
        plane2.scale.z += 0.01;
    }

    if(toggle){
        plane.scale.z -= 0.01;
        plane1.scale.z -= 0.01;
        plane2.scale.z -= 0.01;
    }

    plane.rotation.x += 0.005;
    plane.rotation.y += 0.005;
    plane1.rotation.x += 0.005;
    plane1.rotation.z -= 0.005;
    plane2.rotation.x += 0.005;
    plane2.rotation.y += 0.005;
    renderer.render(scene, camera);
}

animate();

Here is the link: https://jsfiddle.net/Saladmaster/697e5trx/

Thank you

Answer 1

等待大神答复