Develop Reference

Three JS - Strange raycast behaviour when objects are moved

Version and info
THREE.ObjectLoader2: 2.4.1
THREE.LoaderSupport.MeshBuilder: 1.2.1
THREE.LoaderSupport.WorkerSupport: 2.2.0
THREE.WebGLRenderer: 93
THREE.REVISION: 93
The problem
When I raycast an object in my scene, I found that it worked perfectly down to the pixel, until I moved the object. In my program I expload the scene, so I move all the objects, and child objects away from the center of the scene.
To easily visualise the issue instead of raycasting a single point at a mouse click, I opted to raycast the entire screen, this is what I get (Figure 1)
(Figure 1)
The reason for the gaps is because it took to long to raycast every pixel, so instead I raycasted every fourth. The reason for the gap in the middle is because I zoomed away from the original position.
Now, see what happens when I expload the object (Figure 2),
(Figure 2)
As you can see, there is almost a circle. Why is this?
What I've tried
I've tried many things across the internet, and came here when I could find no more.
I've tried a range of different models, some work differently to others, strangely enough. The lamborghini-aventador which was created in Blender works the strangest.
To see if it was a problem with the exploading code, I moved the object to the right. This is where things get interesting (Figure 3).
(Figure 3)
It looks as if my outlining I put on the object (the outlines are an EdgesGeometry) is behind, the actual object is in the middle, and the raycasts are further.
What I speculate
I suspect the issue is to do with scaling. So I tried removing all scaling I did in the code, however I got the same result, unfortunately.
Apologies if this is some noobie mistake, though I do hope it is :)
The code
For those who are adventurous enough to delve into my terrible code base, here it is (the majority of the code is inside demo.js):
github
Testing it
Press G to shoot the raycasts (will freeze for a bit), press X to expload, press S to unexpload. Standard orbit controls.
What I've found
Here are some of the links I have already found and tried on this issue:
https://threejs.org/docs/#api/core/Raycaster
Three.js Raycaster not detecting scene mesh
https://github.com/mrdoob/three.js/issues/1325 (Updating the matrix)
http://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works (Followed step by step)
... and many more ...
Any ideas?

I think that your model might not have proper bounding boxes/spheres generated.
The circular shape could result from the rays passing the bounding sphere check of a bounding sphere that is too small.
You mention resizing/processing your geometries in some way... After you do that, try calling geometry.computeBoundingBox() and geometry.computeBoundingSphere() to rebuild boxes and spheres, and see if that helps?
edit: Apparently this problem was due to bounding boxes and spheres not being recomputed...
the fix was to:
scene.traverse( (o)=>if(o.geometry){o.geometry.computeBoundingBox();o.geometry.computeBoundingSphere();} );

Three.js collision detection optimization with raycasting

I'm just looking for someone to point me in the right direction. My Google-fu is failing me.
I'm working on a WebGL game, and I'm using raycasting for collision detection. I'm using Clara.io to create levels. I'm using THREE.ObjectLoader() to load the scenes. What I'd like to do is split the scenes I've made into smaller parts so as to not have to do raycasting on all vertices in the level. I'd like to not have to split the level mesh into tiny pieces inside of Clara for isolated raycasting, but instead do it within the game itself.
How do I go about only doing raycasting on a small section of a mesh? Is there a tutorial that anyone knows about or an example? I've chosen to not use heightmaps or any physics libraries.
Thank you in advance!

The problem of finding out which parts of mesh are relevant is usually solved using some sort of space partitioning algorithm. A relatively simple but effective approach for a static mesh is using an Octree.
A Three.js - specific implementation of an Octree (by Collin Hover) can be found here. You can either use it directly or take some inspiration from it to write your own.

Rounded Plane In THREE JS

THREE JS, can often seem angular and straight edged. I haven't used it for very long and thus am struggling to understand how to curve the world so to speak. I would imagine a renderer or something must be changed, but the idea is to take a 2d map and turn it into a simple three lane running game. However, if you look at the picture below from another similar game, how can i achieve the fish eye effect?

I would do that kind of effect on per-vertex base depending on the distance from the camera.
Also, maybe a bit tweaked perspective camera with bigger vertical fov would boost up the effect of the "curviness".
It's just a simple distortion effect that has been simulated in some way, it probably isn't really curved. Hope this helps.

I'm sure there are many possible different approaches... Here's one that creates nice barrel distortion effect.
You can do something like that by rendering normal wide angle camera to a texture, then project it to a lens-shaped plane (a sphere even), then the actual on-screen render is from a camera pointing to that.
I don't have the code available ATM, but I should be able to dig it up in few days if interested. Or you can just adapt from the three.js examples. Three.js includes some postprocessing examples where the scene is first rendered into a texture, that texture is applied to a a quad then photographed with ortographic camera. You can modify such an example by changing the ortographic camera to a perspective one, then distorting/changing the quad to something more appropriately shaped.
Taken to extremes, this approach can produce some pixelization / blocky artifacts.

How to control three.js player mesh (md2) when using cannon.js physics?

here is a demo
i have recently started using three.js (i am familiar with OpenGL and C++ so doing this in javascript is not a huge learning curve) i have looked through a lot of the three.js examples to understand how to set things up and i saw this video [xttp://www.youtube.com/watch?v=1ENVYLp_NgY] explaining how to include cannon.js and i wanted to experiment with that also :)
my goal is to have a 3D world with shadows and physics with an animated player that can interact with the other objects. I chose this example [xttp://threejs.org/examples/webgl_morphtargets_md2_control.html] as a starting point because it already had the animated player mesh and the player controls were also about right, i added OrbitControls to the camera so that it can look around.
everything seems to work well except whenever i try to link the player mesh to any kind of object that exists in the physics world (so that he can repel / push the stone blocks), i wanted to start simple to avoid any confusion because of the player mesh being a compound object (imported md2), so i just use a basic sphere shape, but if i try to update the coordinates of the object in the physics world so that it will follow whenever the player mesh moves, the player mesh animates but does not move (so i uncommented those lines in the update() function).
/**
* Problem: This prevents player from moving :(
**/
player.position.copy( playerMesh.root.position );
player.quaternion.copy( playerMesh.root.quaternion );
player.velocity.copy( new THREE.Vector3() );
there is also something called a "gyro" involved in the md2 player mesh object which seems to move the light position so that it coordinates with player movement but i'm not sure how that happens (the gyroscope part is not something i understand but i'm not sure if thats part of the problem either).
the code repo is hosted on github
UPDATE: Fixed, please see the commit on github :)

commited and pushed the fix: here (i needed to stabilize the sphere and i updated the position with x, y & z floats instead of using the vector3.copy method), might not be the correct way to implement this but it works for now.

three.js outer glow for sphere object?

I'm building some sort of planetary system in three.js and I spent couple of hours looking for a decent solution to get an outer glow on one planet - a sphere object with a texture.
I came across this example http://stemkoski.github.io/Three.js/Selective-Glow.html which kind of does the trick, but the thing is - this form of glow also affects the main 3D object resulting in color change (as seen there).
Another nice glow example can be found here http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html but again it glows the entire region, not only "outer" thing.
I've been reading some discussion thread about "overrideMaterial" property on GitHub but this seems experimental, unused and undocumented... not even sure if this could solve my problem.
Please share your ideas, thanks!

I've worked a bit on separating out the part of the WebGL Globe code (linked to above) that produces the atmospheric effect. A preliminary working version is here:
http://stemkoski.github.io/Three.js/Atmosphere.html
To the best of my understanding, there are a few interesting things going on in the original code to create the atmospheric effect. First, the glowing texture is placed on another sphere -- let's call it the Atmo Sphere :) -- that surrounds the sphere with the image of earth on it. The Atmosphere material is flipped so that the front side does not render, only the back side, thus it does not obscure the earth sphere even though it surrounds it. Second, the gradient lighting effect is achieved by using a fragment shader rather than a texture. However, the atmosphere will change its appearance if you zoom in and out; this was not evident in the WebGL Globe experiment because zooming was disabled.
[updated April 30th]
Next, similar to the source code from
http://stemkoski.github.io/Three.js/Selective-Glow.html
the sphere with the gradient lighting texture (and another black-textured sphere) are placed in a second scene, and then the results from that scene are composed with the original scene using an additive blender. And just so you can experiment with the parameters used to create the glow effect, I have included a couple of sliders so that you can change the values and see the different glow effects that result.
I hope this helps you get started. Good luck!
[updated June 11]
I have a new example which achieves the same effect in a much simpler way, rather than using post-processing and additively blending two scenes, I just changed some of the parameters in the customized material. (It seems obvious in retrospect.) For an updated example, check out:
http://stemkoski.github.io/Three.js/Shader-Halo.html
Still haven't figured out the pan/zoom issues though.
[Updated July 24]
I figured out the pan/zoom issues. It requires using a shader; for details about the complexities, see the related question Three.js - shader code for halo effect, normals need transformation and for the final working example, see:
http://stemkoski.github.io/Three.js/Shader-Glow.html.
I'm pretty happy with the final result, so I will not be updating this answer any more :)

In the example you are referring to, I used a blue glow with additive blending -- if you used a white color instead maybe that would produce the effect you want.