Sphere inside of a sphere threejs physijs - javascript

I'm trying to make a sort of "lottery ball" simulator.
I'm having difficulty adding an object inside an object with physijis.
Physics work when I add the sphere to the scene, but when I add the child spheres to the main "lottery" sphere, it loses the physics.
If anyone could help, that would be great.
Thanks

Related

Three js rotate mesh towards a sphere

I'm kinda new in Three js and I've been struggling with this for a while.
I have a 3d model facing a certain direction.
There is also a sphere around it and before moving the mesh, I want to animate it's rotation so it will face specified sphere.
So far I managed to get the angle of rotation but I suppose that is not the way to go
this is what I use for rotating the object towards a specified point:
if(movementTarget) { playerModel.lookAt(movementTarget); }
and this is the content of the
movementTarget = {x:154,y:55,z:35};
seems like the model is not actually orienting towards the sphere, but an empty spot, not sure what is the issue
I have managed to solve the issue, the coordinate system had a general variable which amplified the distance between the objects, by calling lookAt() function, the camera was oriented in the correct direction, but since the corrdinates Were not multiplied since they came straight from the server.

ThreeJS - Keep object in Camera view at all times

I am using threejs in a project where I need to keep a basic object in my scene just in front of the camera, whichever way the camera is pointed. I am using the Orbit Controls plugin for movement and want to move the object around the scene so it is always in the middle of the camera view (same distance away all the time).
I am a relative newcomer to threejs so am not sure how to approach this - thoughts would be appreciated!
Before rendering your scene, you need to update the position of your object by placing it in front of the camera, for that you can use camera.position and camera.getWorldDirection(), then do the math to compute what should be the position of your object.

Using ThreeJS StereoEffect and Raycaster

Has anybody used ThreeJS StereoEffect and Raycaster together for collision detection (in stereo view). In standard full screen view I can easily check if a Vector2 in the middle of the screen colides with an object in my scene. When I switch on the stereo effect I in effect get 2 scenes, and the collision detection stops working, but I am not really sure how to proceed. Should I create two new vector2d objects, one for each view - help :) ...
It's a bit late, but ...
I encountered a similar problem, I eventually found the reason. Actually in StereoEffect THREE.js displays the meshes on the two eyes, but in reality is actually adds only one mesh to the scene, exactly in the middle of the line left-eye-mesh <-> right-eye-mesh, hidden to the viewer.
So when you use the raycaster, you need to use it on the real mesh on the middle, not the illusion displayed on each eye !
I detailled here how to do it
Three.js StereoEffect displays meshes across 2 eyes
Hopes it solves your problem !
You can use my StereoEffect.js file in your project for resolving problem. See example of using.

three.js update light OrbitControls

I'm using threejs to display an object and OrbitControls to control movment of the scene with my mouse. My scene also inclues a DirectionalLight.
When the scene first renders, the DirectionalLight lights my object in the way I expect. However, when I modify the scene by rotating using my mouse the DirectionalLight source does not update and 'shine' the light from the new angle as I expect.
Can someone explain how I can update my scene so the light updates based on my rotation with OrbitControls?
If you want the relationship between the light direction and the camera view to remain constant, I suggest that you add the light to the CAMERA, not the SCENE.
So instead of, say scene.add(dirLight) you use camera.add(dirLight)

three.js issue regarding sprites, sprite materiel, and mouse clicks

Hello and thanks for your time. I have just read multiple tutorials regarding clicking objects with the mouse in three.js. Unfortunately there was no mention if this is possible with sprites. As a workaround I attempted to apply a .png image to a plane geometry. While this worked as far as click-ability is concerned it looked very sloppy and didn't auto rotate towards the camera. Dose an object have to have a mesh to be clickable and if so is there any way to apply a invisible mesh to a sprite? Or any other workaround. I assume I'm missing something.
For billboarding effects -- for the plane to face the camera -- set the rotation of the plane equal to the rotation of the camera.

Categories

Resources