maximeq / three-js-capsule-geometry

A CapsuleBufferGeometry as a new geometry primitive for THREE.JS
MIT License
33 stars 3 forks source link

Help need #4

Closed maxmeli123 closed 2 years ago

maxmeli123 commented 2 years ago

Hi, many thanks for posting this library, sorry this is not an issue but just I need some help using this library. I wrote here because I do not know how contact you. I'm new to JS and threejs, just use it from one week, I do not know what is npm, I just import three.js on my project (inside an HTML as plain text), even imported orbitcontrols.js and all works well. Because I need to simulate a 3D printer filament I need a cylinder with round cups and I've two options, or use a cylinder with two spheres or use a capsule object. Because I load big files with a lot of filament segments (from 50.000 to 1.000.000) I think this class is what I need (if Android device RAM permits it) but I do not know if I can just import it as JS file like others I already imported. I read it has some external dependences and not sure how I can use it. I've another option, the threejs documentation has a CapsuleGeometry too, but using threejs 138 it do not contain the class, I've searched it with a text editor and nothing found. Please can you help me figure how to make it work? Please feel free to move this discussion in the right place and sorry another time. Many thanks

maximeq commented 2 years ago

Hello, If you need the 2 spheres to have the same radius, Three.js CapsuleGeometry should do the job, it's included in the core src folder under geometries.

Otherwise I must admit I did not update this folder to depend on the last three revision. It's probably not much to do though. Easiest way for you is to just copy the source I believe, if you use it as a package or just use the dist files, it will not depend on the proper three revision and may break.

maximeq commented 2 years ago

I'm not sure it will run smooth with 50k to 1000k objects. At least you will need to merge that into a single object. Depending on your specific usecase, you could also use a raytracing shader to limit the number of polygons, and reach per pixel accuracy, like in https://capsulesketch.org/, but this one is a proprietary shader. May not work on some older mobile though.

maxmeli123 commented 2 years ago

Hi maximeq,

many thanks for your replies and suggestions.

Yes I only need 2 spheres to have the same radius, it simulate the plastic filament extruded by nozzle of a static size, by default it is 0.4 mm, but can be changed to 0.2. 0.3. 0.5, 0.6, 0.8, 1.0 mm.

Now I updated my theejs 138 to latest 139, the CapsuleGeometry do not exists on 138, it was added in 139.

I've tried it and worked well, I've tried to simulate an extrusion and looks good as I expected, so I created one capsule geometry with 0.4 mm diameter, using a for loop I've created more than one to simulate a piece extrusion, here I see that depending on resolution I set for a capsule and radials threejs slow down with just a couple of these (50-100). I'm not sure if it is possible.

This on Android devices, in past I had the same problem on desktop devices (PC and Raspberry) using Java3D, I need to balance the resolution not too high, eg. 8 segments for radials and 8 for cups and search to optimize it.

Note that I only use one geometry (and material) instance for all segments this way: //// FILAMENT TEST //// const filamentSize = 0.4; const radius = filamenSize / 2;

const capGeo = new THREE.CapsuleGeometry(radius, 10, 8, 8); const capMat = new THREE.MeshPhongMaterial({color: 0x00FF1F});

var x = 0.0; var y = radius; for (let pY = 0; pY < 3; pY++) { for (let pX = 0; pX < 30; pX++) { capsule = new THREE.Mesh(capGeo, capMat); capsule.rotation.x = THREE.Math.degToRad(90); capsule.position.x = x; capsule.position.y = y; capsule.position.z = -15.0; //capsule.position.set(x, radius, -10.0); scene.add(capsule); x += filamentSize; } x = 0.0; y += filamentSize; }

I've attached a screenshot so you can see what I do.

Because I'm very new on JS and even on threejs (I use it from 2 weeks) I have another question not related to a capsule if possible....

In my project I recreate the threejs HTML template, import on it a three.js and orbitbehaviors.js as plain text, then insert in the Githubissues.

  • Githubissues is a development platform for aggregating issues.