How to draw multiple Circles on top of a Buffer Geometry?

Having a buffer geometry with polygons normals and colors. but that model looks like some ups and downs on its layer like earth. On top of it want to add multiple circle based on its x and y coordinates and if that model bends somewhere then that circle should bend same like it. Any idea how to achieve this?

Any reference picture of the desired result?

Yes, use a texture:

1 Like

Using of shaders is an option too :thinking:

1 Like

This is what I need, if possible can you share code snippet for this or any example link?

Yes, this result is related for my scenario. is it possible to draw more circles with different radius and coordinates with this?

As your task involes the using of specific coords and radii, I doubt, that my approach is acceptable in your scenario.
I’m still curious, how the desired result has to look like :thinking:

Here you go:


This is what I need exactly. I am already having buffer geometry with polygons normals and colors on top of it trying to apply this random circles, but for that getContext(‘2d’) getting null.

 @ViewChild('canvasElement', {static: true}) canvasElementRef:
  ElementRef<HTMLCanvasElement> | undefined;

const container = this.canvasElementRef?.nativeElement;
const width = container?.clientWidth;
const height = container?.clientHeight;

const renderer = new THREE.WebGLRenderer({
      canvas: this.canvasElementRef?.nativeElement,
      antialias: true
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( width, height );

//create buffergeometry
    let geometry = new THREE.BufferGeometry();
    const positions = [...];
    const colors = [...];
    const context = container.getContext('2d');
		for( var i=0; i<10; i++ )
				context.beginPath( );
    		context.arc( 1024*Math.random(), 1024*Math.random(), 20+30*Math.random(), 0, 2*Math.PI );
        context.fillStyle = 'white';
				context.fill( );

    const texture = new THREE.CanvasTexture(container);

    //setting bufferattributes
    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ));      
    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ));
    geometry = BufferGeometryUtils.toCreasedNormals(geometry);

    const material = new THREE.MeshLambertMaterial( {
      color: 0xfefefe, vertexColors: true, side: THREE.DoubleSide, map: texture
    } );
    const mesh = new THREE.Mesh( geometry, material );