Starbursts on dodecahedron surface - three.js

I am pretty new to three js and I am trying to create some stars on Dodecahedron Surface. However, I got an errors on getRandomPointOnDodecahedron. Any help on how to create that function. Working file: https://github.com/Triple1331/Question/blob/main/Question/starsOn.js

Related

THREEJS v0.87.1: Can no longer generate tangents and binormals for use in normal mapping

I'm trying to implement normal maps in a ThreeJS fragment shader, but it seems as though a key feature, computeTangents, has been lost in recent versions.
Here is a working demo using an older version of Three:
http://coryg89.github.io/technical/2013/06/01/photorealistic-3d-moon-demo-in-webgl-and-javascript/
ThreeJS is using computeTangents() to add an attribute called "tangents" to the vertex which is sent to the shader.
So I researched as much as I could and tried using a shader only method of computing the tangent, but this requires dFdx which causes an error about GL_OES_standard_derivatives in the shader on my Macbook Pro.
Then I tried converting the geometry from a simple cube to buffer geometry for use in the BufferGeometryUtils.computeTangent() function, in order to generate the tangents there, but that requires "indexed geometry", which isn't present in basic geo created by ThreeJS.
From the original demo, this is the line I need to recreate using the latest ThreeJS:
var mesh = new THREE.Mesh(geo, mat);
mesh.geometry.computeTangents();
Repo here:
https://github.com/CoryG89/MoonDemo
Is it possible to get this demo working using the new version of Three?
I found the answer to this. For the demo above, it required changing the THREE.SphereGeometry to THREE.SphereBufferGeometry.
var geo = new THREE.SphereBufferGeometry(radius, xSegments, ySegments);
Then I had to add the BufferGeometryUtils.js file and use the following code:
THREE.BufferGeometryUtils.computeTangents( geo );
This got the demo working again.

sf::View visibility Check

Ok, so I've been working on a game with some friends for a school project. We have used SFML.
I've been working lately on the camera and a tile implementations system and now I need them to work together.
The camera works like this:
I have two different sf::View, one for the game world and one for the hud. The one for the game world follows the player in the x-axis.
The tile system works in a way where it reads in a txt file and draw sprites based on the information from the txt file.
As it is now I always draw all the tiles, even if it's outside of the cameras view. Not good. I need a way to check if the tiles are outside of the cameras view before I draw them. How do I do this?
I did find this:
Get X and Y offset of sf::View
but I can't really wrap my head around how to make this info work in my game.
Any help would be really appreciated! :)
Mvh Elis
Managed to figure it out after finding this:
http://fr.sfml-dev.org/forums/index.php?topic=10590.0

Blender MakeHuman to Three.js

I'm trying to integrate a animated 3D character in a Web navigator.
I use MakeHuman 1.02 to create a character which I import in Blender 2.74 in .mhx format.
I retarget to a BVH using the MakeWalk plugin for Blender. It's for the motion.
When I try to export the character in .json format (three.js), the following error appears :
MakeHuman is not a valid mesh object.
A mesh object is an object that we can modify properties or vertices, isn't it ?
I try others format like .dae format (collada) but it seems that the navigators doesn't find the skeleton and the textures of the character (even if they are in the same directory) necessary for the character's motion.
How to get the character like a mesh object ? Or somebody knows another process to success ?
Like Erica pointed out, you need to have a mesh selected to export it. The problem with this is it doesn't seem to work if you have multiple meshes. Only one will export. This is a problem when using MakeHuman because their clothes are separate meshes.
One way to fix this is to select all meshes and combine them into one (I believe that's CTRL + J). However, you'd have to somehow merge all your texture files into one big one and I have no idea how to do that.
What I do is to export the entire scene. Then it doesn't matter what is selected. All meshes get exported. You can load it using either the ColladaLoader, which I would recommend since you're retargeting to a BVH (worked great for me), or the new ObjectLoader.
If you have your own Scene object on the page that you want to use, you can still load the scene created by the exporter, traverse it to get the items you care about, and add those items to your scene that will display on the page.

STL rendering with threejs

I have created a 3D model for printing in 3D an industrial layout.
Because I am not used in playing with professional 3D modeler software, I used SketchUp and the result was fine !
Now, I want to reuse the 3D models to make a dynamic visit of the "to-be" installation.
I exported each object in Collada format (DAE), and then try to used the collada importer in Threejs.
I have around 130 objects that I want to be able to select interactively, but I manage only to load one ...
I then get a try with STL loader (after having converting objects with MESHLAB from DAE to STL).
And then it works without any problem... but rendering problems.
In the linked picture (sorry, not enough reputation to insert image !), you can see that some parts of the objects seem the be "transparency", even if they have not this property set ! (only the ground is).
While moving with the TrackBallControl, some parts of the objects disappear from time to time....
I try with only one object, with or without the ground,...
I took snapshots of the problem I get :
fig 1, inside the red circle, the errors appears
fig 2, without the ground, it is the same : some parts that should be hidden are not
fig 3, the wireframe rendering shows not pb in the exported model...
link >> http://stackoverflow.legrandcondor.com/photo.html
link >> http://stackoverflow.legrandcondor.com/
Any ideas ? Suggestions before I get crazy ?! (Everything else works fine!)
Thankx in advance,
Your camera near plane is 0.1 and far plane is 1000000. Small values of the near plane can lead to depth-sorting precision problems.
In your case, set your near plane to, say, 100.
ref: http://www.opengl.org/wiki/Depth_Buffer_Precision
Also consider using OrbitControls so your model remains right-side-up.
three.js r.69

Attaching child nodes/objects to an Object3D in three.js

I'm loading an .obj file into a Object3D object. That's working well and I can see it on the screen. However, I would like to create the impression of spinning sprites (fireflies, lightning globes, that sort of thing) at certain points above the object.
I've been looking over the three.js documentation on sprites and other things, and am very impressed with the capabilities. But I need a little help on how to create a standalone sprite 'globe' as it were, with sprites flying about in their own local coordinate system, then moving that standalone 'globe' to a point above the obj file. Could someone help me get started with this? (I guess it comes down to, how do you position one object relative to another in threejs?)
You should be able to simply attach the spinnning sprites to using the add() function:
//create an empty 'container'/Object3D
var spinningSprites = new Object3D();
//add elements to it:
for(var i = 0 ; i < numSprites; i++) spinningSprites.add(yourParticleObjectInstsance);
//lastly add the whole container to the loaded model:
youLoadedModel.add(spinningSprites);
The above is an example, you would proably use different variable names, etc., but the idea is simple: use add().

Resources