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.
Related
I need to check whether a THREE.Triangle overlaps with a THREE.Box3 object. Is there an existing function in THREE.js for this purpose? If not, how could I achieve this?
Since there is no in-built function for a triangle-box-intersection test I came up implementing such an algorithm by myself. It is based on Separating-Axis-Theorem (SAT) as suggested by TheJim01. For my use case I needed a test for an axis aligned bounding box (AABB).
The following sources were especially helpful for this.
AABB Triangle intersection
Fast 3D Triangle-Box Overlap Testing (Akenine-Möller)
The book "Real-Time Collision Detection (Christer Ericson), pp. 169-172 (found online Google Book)
Using these sources, it wasn't that hard to implement this test. However, during my research I figured out that such an AABB-Triangle test is a quite common operation in 3D graphics. Hence, I guess it would make sense having such a testing function in THREE.js. I will suggest this as a feature request.
In working with Three.js and I’ve run across several useful Helper classes that really make displaying and or modifying the scene much easier. There is one tool out there that I can’t seem to find again. It is kind of like the AxisHelper however it has a plane between the axis when you mouse over that area allowing the user to move the object along the xy, xz, or yz plane depending on what you pick. I’ve drawn an example of what it adds to the object in order to help the user move the object along the plane. If anyone knows of this tool or maybe an example of something that uses a utility like this, it would be great if you could point it out to me. Thanks.
I expect you are looking for TransformControls. There is a three.js example of its use here.
TransformControls is not part of the library -- it is part of the examples. You must include it explicitly in your project.
three.js r.80
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.
Although I'm yet to touch Three.js, I know that it simply abstracts away many of the boiler-plate that comes with WebGL.
As a result of this, and a learn-by-example style documentation, what utility of Three.js should I use for displaying 4 million points which will be mostly static, but animate to a new position on an uncommon click event?
I'm assuming the use of VBO or FbO would be needed, but how are these functionalities encapsulated into Three.js, if at all?
Thank you.
I'm about to jump into some simple game development with Javascript. I would like to one day transition to 3D development but for now am only going to be doing 2D "top down" objects.
I know that this isn't ideal but I feel like it will help me get familiar with the 3D "environment".
I am using Three.js as it appears to be very well developed and I like that it can do Canvas, WebGL and SVG. However, my very first problem I've come across is, I don't know how to "move" an object. Using just Canvas I can easily take an object I have rendered and modify it's .x or .y property to "move" it. However, for Three.js objects so far all I've found is object.rotation.x, etc. I can move the camera, but this doesn't work because I need objects to move individually.
So I guess what I'm looking for is any resources into Three.js for 2D development, or developing a 2D top-down game in a 3D environment.
The Getting Started article is pretty good.
LearningThree.js got a series on "let's make a 3D Game".
There is a nice searchable reference available too.
Note that the project moves super fast so the API might change
here and there, so keep an eye out on github and when you
update always read the change log to see if you need to update your code.
Gooduck!.