2

I have found an example for three.js to create a 2D plot with squares: 

// Global vars...
var container, camera, scene, geometry, mesh, renderer, controls, particles, colors;

// DOM element...
container = document.createElement('div');
document.body.appendChild(container);

// Camera...
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.set(00, 0, 75);

// Scene...
scene = new THREE.Scene();
scene.add(camera);

// Renderer...
renderer = new THREE.WebGLRenderer({
    clearAlpha: 1
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xffffff, 1);
document.body.appendChild(renderer.domElement);                 

// Scatter plot...
scatterPlot = new THREE.Object3D();
scene.add(scatterPlot);

// Make grid...
xzColor = 'black';
xyColor = 'black';
yzColor = 'black';

// Plot some random points...
geometry = new THREE.Geometry();
colors = [];

for (var i = 0; i < 50; i++) {

    colors[i] = new THREE.Color(1, 1, 1);
    colors[i].setHSL(1000 / 2000, 1, 0.5);

    var material = new THREE.PointCloudMaterial({
        size: 5,
        vertexColors: THREE.VertexColors,
        transparent: true,
        useScreenCoordinates: false
    });

    material.color.setHSL(1.0, 0.2, 0.7);

    var vertex = new THREE.Vector3();

    var max = 50;
    var min = -50;

    vertex.x = Math.random() * (max - min) + min;
    vertex.y = Math.random() * (max - min) + min;
    vertex.z = Math.random() * (max - min) + min;

    geometry.vertices.push(vertex);

}

particles = new THREE.PointCloud(geometry, material);
particles.sortParticles = true;
scatterPlot.add(particles);

geometry.colors = colors;

animate();

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

It plots squares on the web page, but I want to plot circles instead. However, I do not see any place in the code that draws the squares. My 'guess' would be that the shape is set by THREE.PointCloudMaterial, but this does not seem to be documented in the three.js documentation.

So any ideas how I can draw circles, and where to find the documentation...?

juanferrer
  • 1,192
  • 1
  • 16
  • 29
Alex
  • 41,580
  • 88
  • 260
  • 469
  • Does this resolve it? https://stackoverflow.com/questions/13756112/draw-a-circle-not-shaded-with-three-js – itsmichaelwang Jul 20 '17 at 06:40
  • Not really. I get an error "Error: WebGL: drawArrays: Bound vertex attribute buffers do not have sufficient size for given first and count" – Alex Jul 20 '17 at 06:49
  • I replaced `geometry = new THREE.Geometry();` with `geometry = new THREE.CircleGeometry( 50, 64 );`. – Alex Jul 20 '17 at 06:50

0 Answers0