# Converting Geometry to BufferGeometry using toBufferGeometry()

**URL:** <https://discourse.threejs.org/t/converting-geometry-to-buffergeometry-using-tobuffergeometry/46070>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [December 21, 2022, 11:18am UTC](https://discourse.threejs.org/t/converting-geometry-to-buffergeometry-using-tobuffergeometry/46070 "2022-12-21T11:18:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paul\_Hennessy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paul_hennessy/32/31947_2.png) [@Paul\_Hennessy](https://discourse.threejs.org/u/Paul_Hennessy)\
**Post date:** [December 21, 2022, 11:18am UTC](https://discourse.threejs.org/t/converting-geometry-to-buffergeometry-using-tobuffergeometry/46070/1 "2022-12-21T11:18:27Z")

</div>

I’m trying to replicate this codepen globe using the latest version of three.js in Angular 14 / Typescript

```
 https://codepen.io/emave/pen/RBwVpy

```

When i run the codepen above it renders like (dots in a real earth shape)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/5/55d95af54e8ac4bbc29824ab0fcccae27a9f2c73.jpeg)

but to use the latest version of Three i have to modify

```
 var point = new THREE.Vector3(0, 0, 0);
 this.geometry.vertices.push(point)

```

to

```
  this.vertices = []; (outside of loop / function)

  var point = new THREE.Vector3(0, 0, 0);
  var distance = Math.min(200, window.innerWidth / 4);
  var phi = THREE.MathUtils.randFloatSpread(360);
  point.x = distance * Math.sin(theta) * Math.cos(phi);
  point.y = distance * Math.sin(theta) * Math.sin(phi);
  point.z = distance * Math.cos(theta);
  this.vertices.push(point);

```

Then to render the points

```
this.geometry.setFromPoints(this.vertices);

```

It renders points but they do not show up like the earth above:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/5/05e2659c58a77bd14728c91108cc83b224680578.jpeg)

To try and fix this i came across this reddit post below and followed that example:

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/1/31db27ebb7340bb27e66aba5f4160cb4b8ba6330.png)

Trying the above i import:

```
import { Geometry } from 'three/examples/jsm/deprecated/Geometry.js'

```

then use the original code with “geometry.toBufferGeometry()” like:

```
this.geometry = this.geometry.toBufferGeometry()

```

or:

```
this.geometry = Geometry.createBufferGeometryFromObject( this.geometry.vertices );

```

but when i try to build Angular it get :  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/e/eef8b62b449847977adfb53d0c9188883a890839.png)

even though i can see the typing here and can click into it in vs code

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/a/4a0c4cc04a85a4fa1e3067023fdb15d711a719c4.png)

Any ideas what the best way to solve this is?