D3 Examples - threejs scatterplot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://threejs.org/build/three.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
    var data = [[10,0,0],[0,10,0],[0,0,10]]
        var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 500);
    camera.position.set(0, 0, 100);
    camera.lookAt(0, 0, 0);
    
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    var material = new THREE.LineBasicMaterial({color: 0x0000ff});
    
    var geometry = new THREE.Geometry();
    geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
     geometry.vertices.push(new THREE.Vector3(0, 10, 0));
     geometry.vertices.push(new THREE.Vector3(10, 0, 0));
    var line = new THREE.Line(geometry, material);
    scene.add(line);
    
    var pointGeometry = new THREE.Geometry();
    data.forEach(function(d){
      var point = new THREE.Vector3(d[0], d[1], d[2]);
      pointGeometry.vertices.push(point);
    })
    
    var pointsParameters = {
      color: 0x88888888,
      size: 2
    }
    var pointMaterial = new THREE.PointsMaterial(pointsParameters);
    var pointField = new THREE.Points(pointGeometry, pointMaterial);
    scene.add(pointField);    
​
    
    renderer.render(scene, camera);
​
  </script>
</body>
​
    