CODEWITHSUNDEEP
javascriptthree.jsdrawpoint
vixenn
vixenn

Reputation: 197

Three.js - Points

When I create a point using Three.js it looks like a square. How can I make it look round? I saw in the documentation some blending factors but I did not quite understand how to use them on my points and I don't even know whether it is the right way to do it.

Upvotes: 1

Views: 2664

Answers (2)

Mouloud85
Mouloud85

Reputation: 4234

Alex Reynolds' answer is correct. I add this one to give more details : as far as I know there are two ways to customize your points' look.

  • As the docs suggets, using textures (THREE.PointsMaterial({map:texture})):

    • The most intuitive is to use an image of yours : 

      var texture=THREE.ImageUtils.loadTexture('url-to-my-image');

    • You can also draw something in a canvas and use it as a texture. This includes raw drawing in the canvas, SVG importing as Alex Reynolds suggests, or any other technique. You can check his link and look for threejs examples. This is particularly used to render 2D text on sprites, you will find more examples with that.

      var texture=THREE.Texture(canvas);

    Check three.js examples for more details on using textures on Points

  • Using shaders :

    If you know about shaders, you can write a small fragment shader that will result in the lightest and most precise of those solutions.

Upvotes: 1

Alex Reynolds
Alex Reynolds

Reputation: 96974

One trick I used is to create an SVG circle element, render it to a canvas with canvg, and render that canvas to a texture to use in a point cloud.

By applying gradients on the circle, I can give the illusion of shininess on a 3D sphere with a 2D circle.

There's too much code to post into an answer but I have a project over at Github you can look at, if interested, which demonstrates the idea. See: https://github.com/alexpreynolds/cubemaker and the associated demo at: http://alexpreynolds.github.io/cubemaker/

If you just want circles and no "shiny" effect, you could remove the gradients. Or draw a circle directly to a canvas element and skip SVG altogether.

Upvotes: 1

Related Questions