I have been experimenting with three.js for a website I'm making.
I came across the spline curve solution in order to make a camera follow a cinematic path, and linked it to the drei's scroll component in order to make the camera follow a cinematic path relative to the current scroll of the page.
The problem that I'm facing is that I want the camera to have smoothed out stop points, I have already successfully added stop points without the smoothing, by using the range function from the offset object from the Drei's scroll component and it works just fine.
I'm looking for a way to slow down the camera before it stops. Already tried to change the offset.range value (which is linear) to an exponential value, this partially works it slows down the camera movement until half of the function and after coming to a complete stop it turns around and goes in reverse in the path.
Related
I'm creating a game which involves one sprite bouncing around and the user controlling another sprite to avoid being hit.
I'm having two problems:
I've managed to get the first sprite to bounce within the canvas but the second one is still disappearing at the moment.
I can't seem to get the two sprites to detect collision (they are both circular).
Remarkably I can operate Github so it's there if anyone wants to cast a critical eye (please do!) https://github.com/SallyBoulton/Javascript-Game.git
I'm looking to build a tile-based javascript game that has a top-down view. Think of: Sim City Classic.
I'm wondering what the right approach is for a map that's larger than the users' viewport. Should I create a large canvas for the entire map and let the user use the browser-scroll, or should I make the canvas the size of the browser, and manually implement scrolling.
In both cases I can see that there might be performance considerations. The big map is a big canvas which can be slow, and for the small one I will need to manually scroll (and redraw a lot during scrolling?)
Best approach for maps is to keep an offscreen canvas that is slightly larger than the display. Render the map onto that and render that canvas onto the display canvas. While there is no movement you don't need to update the map, when there are only small pixel movements you only need to rerender new stuff in the direction of movement. This is done by copying what is already rendered and moving it in the opposite direction of movement and then just rendering what is new along the two edges in the direction of travel. If zooming in you can just zoom the background map and re render it in parts, rather than in one go. Same for zooming out. Just render the edges, and then re render the map in parts.
Look at google maps. This is how they do it. Of Course your mapping images will not have to wait for them to come from the server so the user will not see blank areas while the map waits for content.
This method is the best way to handle large regular and irregular tiled maps.
If the map is animated then you will just have to brute force it and rerender the map each animation frame, but still use the off screen canvas. It may pay to reduce the maps animation rate to half the frame rate. That way you can interlace the animations, spreading the half the animations to every odd frame and the other half to even.
The short story: I am trying to use THREE.TrackballControls to move the camera, but the (upside-down) x-z plane is where the x-y plane should be. Can anyone help?
The long story: I've been trying to add device orientation controls to a project. I have already used the THREE.TrackballControls to move the camera when mouse and touch are being used, and the direction the camera points feeds into other functionality. I am using v69 of three.js.
So, I have been looking into using THREE.DeviceOrientationControls to enable device orientation. Specifically, what I'm after is for rotation to be in the x-y plane when the device is upright in front of me and I turn around. Or in other words, when the device is face up on the table it is looking in the -ve z-direction, and when upside down it it looking in the +ve z-direction. Sounds fairly straightforward, right?
There are plenty of examples around to follow, but I seem to be stuck with axes incorrectly orientated, i.e. what should be my x-y plane is coming out as the x-z plane, but upside-down. I created a test page based on an example with a BoxGeometry cube I found, and then added red, yellow and blue spheres to the middle of the faces that corresponded to the +ve x-, y-, and z-directions respectively, and then pale versions of the same coloured spheres for the corresponding -ve directions. Testing this on an iPad confirmed that the scene axes and the real world axes were not lining up.
I have spent a bit of time trying to get to grips with how this Object works, and the main sticking point is in the function returned by setObjectQuaternion() which does the tricky bit:
...
return function (quaternion, alpha, beta, gamma, orient) {
euler.set(beta, alpha, -gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
quaternion.setFromEuler(euler); // orient the device
quaternion.multiply(q1); // camera looks out the back of the device, not the top
quaternion.multiply( q0.setFromAxisAngle( zee, - orient ) ); // adjust for screen orientation
}
...
where q1 is quaternion for a -pi/2 rotation around the x-axis, and zee is a unit z-axis vector.
I set up a jsfiddle here to help me debug this, but it wasn't rendering correctly on the iPad itself, so I had to add in some faking of orientation events, and plenty of logging, and continue on a normal desktop + console. This jsfiddle goes through each of the 6 basic orientations and sees whether the camera is looking in the direction I expect.
(Initially it would seem that a pi/2 rotation around the x-axis is what is required, but removing the quaternion.multiply(q1) doesn't fix it - I haven't even started looking at non-zero screen orientations yet.)
Ultimately, I'd like to make this more like the TrackballControls/OrbitControls with a target point that the camera always looks at (unless panned) and rotates around, once I've figured this "simple" stuff out.
Anybody have any ideas how I can orientate my camera properly?
How can I get the value from each angle of my perspective camera in 3D scene.
I'm using Three.js library.
To be more accurate, I shall mark what I want to get known with the next sign:
What coordinates I need to know:
It's needed for me, because I'm creating a real mode map engine with moving in 3D scene via mouse cursor.
What I'm trying to achieve is available here:
http://www.zephyrosanemos.com/windstorm/current/live-demo.html
As you could see, in this sample, new terrain is loading with intersecting the new location (which previously were not available with the garbage collection, when the camera is leaving the old viewport):
Now, I want to show a piece of screen from my three.js application:
As you are able to see, I'm loading my scene statically, where is available only one plane with buildings (buildings data are loading from my server, and the data I have token from some osm services).
And it may be controlled only with pushing the keyboard button (for e.g. the 3D scene is locating to the new location by pushing on keyboard arrows, aslo you could see the empty space in map :) this is only because of preparing the cut data in DB for testing purposes, when the application is ready - it won't me empty, it's miles easy to work with light count of records in DB ). All meshes are being deleted, and with each new movement the new data is loaded and the new building are rendered.
But I want to made them loaded dynamically with camera movement. So I want to make it be able dynamically loaded as in the example of dynamic terrain generation. I suggest, that I shall prepare a big plane matrix, which loads data only for the 8 planes (as in terrain generation sample) and to make a logic with the camera intersacting/leavaing old view for such a dynamic work.
So... I want you to help me with this piece of hard task :)
To get the field of view angle simply get the value of this field:
Three.PerspectiveCamera.fov
With that angle you should can have an imaginary cubic cone and test it for collision. For the collision part refer to this question:
How to detect collision in three.js?
I am currently working on a game (Purely a hobby) found at http://game.mersholm.dk
I got most things working out great (transformation, selection, movement, objects etc) But theres one nut of which i just cannot crack.
I am trying to add an isometric building using drawimage(experimenting). Ofcourse the image also undergoes a transformation due to the transformation matrix defined. This just makes the image twirl and rotate.
If i reset the matrix, draw the image and sets the matrix again it will break my screen to world cordinate calculations.
How would i go around adding isometric graphics to the world without twirling them with the matrix?
best regards.
Jonas
The right way to go when drawing an image with transform is this one :
save the context.
reset the context's transform.
translate to the screen point where you will start drawing the image.
apply the transform required for the image : rotate/scale/skew.
draw the image at (0,0).
restore the context.
In case you are confident with the previous state of the context, do not reset it. But, then, if you don't reset the context -which is faster- just be sure to use world OR screen coordinates according to the current scale/transform.