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?
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
Here you go: https://codepen.io/boytchev/pen/PoxVdjL
2 Likes
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 = [...];
//texture
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 );