Trying to recreate IcosahedronGeometry blob but struggling

Questions
1

Hello all. I’m trying to recreate the following blob scene for one of my vuejs components. Codepen: https://codepen.io/Sidechain_Studio/pen/VxdgMX

Even if I follow everything and npm install r83, I still get error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘length’)
So, I changed things, and this is my final code. Codepen: https://codepen.io/Damian-Ray/pen/wvxPGeq
This renders the blob in my vuejs component but no movement or rotation :frowning:
Does anyone know how to recreate this blob, according to more recent changes in threejs??
Thanks!

2

@S_Khan –

It looks like you have version mixing. The old Three.js had one type of geometry structure, the more recent Three.js has another type of geometry structure. Your code tries to use the new type of geometry (the one with buffer attributes) onto the old type of geometry (the one without buffer attributes).

– Pavel

1 Like
3

Also, keep in mind, that IcosahedronGeometry is non-indexed, like any PolyhedronGeometry.

4

Here is a rough example with merged vertices of IcosahedronGeometry.

1 Like
5

Hello Pavel, thanks for your response. I’m actually not familiar with three.js at all. I’ve been given a task to convert an html project to a laravel/vue project. One of the html pages is utilizing three.js that too a minified version, so it’s hard to tell which version it is actually. However, this codepen is pretty much the same as the html page’s three.js animation so I tried to npm install this version r83 but got the undefined length error. After I read that it’s deprecated, I tried to change it to new code without success.

1 Like
6

Hello there! Thank you so much for your submission, it means a lot! I’ll try this, but if you do not mind me asking, do you know how to do this with perlin and tween max?
I’m actually not familiar with three.js at all. I’ve been given a task to convert an html project to a laravel/vue project. One of the html pages is utilizing three.js that too a minified version so it’s hard to tell which version it is actually.
However, this codepen is pretty much the same as the html page’s three.js animation so I tried to npm install this version r83 but got the undefined length error. They’re also using perlin and TweenMax which are currently loading fine for me so I kind of, do not want to go with something new like simplex-noise or three/addons, I have to check if that breaks or works well.
I am still suprised why the code runs fine for html project but not in my vue component, its the exact same version with same code from the codepen, same dependencies! Maybe something to do with vue’s way of rendering code or something.
Thank you so much for your time to code this for me :smiley: Really appreciate.