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!.
Related
I am recently experimenting how to protect a 3d model for WebGL. I know it's impossible to be perfect but I still want it to have some level of security.
Let's take Sketchfab as reference. I see that there is software 3D ripper that can rips the model correctly. But not Ninja Ripper, as it only returns a broken mesh. In my own prototype, i tried to apply offset on vertice of my model, and write a simple vert/frag shader to neutralize offset. Unfortunately , this method seems not working. Ninja Ripper can rip it with no visible problem.
May i get some suggestion on this?
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.
I have visited the site https://www.collectiveip.com/ and there is a very interesting graph-like object on the homepage which responds to mouse movement.
Can somebody suggest as to what is the object and what libraries are used to create similar objects?
If you right-click and look at the source, there are plenty of hints that the graph is drawn using three.js.
three.js is a 3D drawing library that simplifies coding WebGL scenes.
If you look at the source further, you can find that all the graphics is drawn in a javascript file called threejsgraph-(some_big_random_hash).js. Paste it into a pretty printer (google "javascript pretty printer") to make it more readable.
Basically the code creates a lot of random sprites with lines (path) connecting them then animate the camera based on mouse movement.
I am developing html5 game based on hexagonal grid.
After some investigation I have used :
MelonJS + Tiled + this tricky thing. Everything seems good in this combination, until I started to think about dynamic showing some hexagons, that my player will be able to go.
There are few ideas that comes to mind:
Calculate coordinates and draw on canvas skipping melonjs, but it's bad idea from architecture point.
Adding custom property for each hexagon texture object, but it's too much manual work.
Adding some facade for melonjs in order to work with it or maybe it's already done?
So my question is:
What's the best way to solve this problem in scope of those technologies or maybe should I use another tool?
Depending on how much content you have already developed, did you consider to use a Tiled daily build with support for hexagonal maps?
Of course, since melonJS doesn't support this yet you would either need to implement the hexagonal renderer yourself or try to get the support from melonJS developers to add it. I've opened an issue about this.
I may have misunderstood your question a little, though. If you are talking about an overlay on top of the map that shows the player where he can walk to from his current position, then the way to go would be to draw this yourself after melonJS has rendered the map. I can't help you with exactly how to do this because I don't have that much experience with melonJS.
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.