THREE.BufferGeometry、THREE.Points、THREE.PointsMaterial

In this example below you will see how to do a THREE.BufferGeometry、THREE.Points、THREE.PointsMaterial with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by takashi, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright takashi ©

Technologies

  • HTML
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>THREE.BufferGeometry、THREE.Points、THREE.PointsMaterial</title>
  
  
  
  
  
</head>

<body>

  <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body { margin: 0; overflow: hidden;}
    </style>
</head>

<body id="body">
    <div id="WebGL-output"></div>
  <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
</body>

</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/tksiiii/threebuffergeometryandx3001threepointsandx3001threepointsmaterial-WJZPmY */
var scene = void 0,
    camera = void 0,
    renderer = void 0,
    orbitControls = void 0;

var render = function render() {
    orbitControls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
};

var onResize = function onResize() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
};

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    scene.add(camera);
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 100;
    camera.lookAt(scene.position);

    renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.getElementById('WebGL-output').appendChild(renderer.domElement);

    /* OrbitControls
    --------------------------------------*/
    orbitControls = new THREE.OrbitControls(camera);
    orbitControls.autoRotate = false;

    /* Mesh
    --------------------------------------*/
    var vertices = 100000; // Number of vertices
    var axes = 3; // The number of axes
    var geometory = new THREE.BufferGeometry();
    var positions = new Float32Array(vertices * axes);
    var colors = new Float32Array(vertices * axes);
    var distance = 50;
    for (var i = 0, len = positions.length; i < len; i += 3) {
        var halfDistance = distance / 2;
        var x = distance * Math.random() - halfDistance;
        var y = distance * Math.random() - halfDistance;
        var z = distance * Math.random() - halfDistance;
        positions[i] = x;
        positions[i + 1] = y;
        positions[i + 2] = z;

        var r = Math.abs(x) / halfDistance;
        var g = Math.abs(y) / halfDistance;
        var b = Math.abs(z) / halfDistance;
        colors[i] = r;
        colors[i + 1] = g;
        colors[i + 2] = b;
    }
    geometory.addAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometory.addAttribute('color', new THREE.BufferAttribute(colors, 3));

    var pointsMaterial = new THREE.PointsMaterial({ size: 0.2, vertexColors: true });
    var points = new THREE.Points(geometory, pointsMaterial);
    scene.add(points);

    /* OrbitControls
    -------------------------------------------------------------*/
    orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
    orbitControls.autoRotate = false;
    orbitControls.enableDamping = true;
    orbitControls.dampingFactor = 0.2;

    /* resize
    -------------------------------------------------------------*/
    window.addEventListener('resize', onResize);

    /* rendering start
    -------------------------------------------------------------*/
    document.getElementById('WebGL-output').appendChild(renderer.domElement);
    render();
}

window.onload = init;

Comments