This is ensured by the following code: lat = Math.max(-85, Math.min(85, lat)) įrom there, I needed to define two more variables, phi and theta, by converting lat and lon to radians. This is to make sure that the user can’t look too far up or down and flip the camera in a strange way. Before moving forward, it is ensured that the lat variable is between -85 and 85 degrees. The latitude is calculated in a similar way. This variable is the value of what the previous lon variable was after the last drag (initializing as 0). From there, downPointer.lon is added to the sum. This was tweaked as needed, but I ended up with 0.2. This is simply a factor to modify how fast the camera moves when dragging. This is then multiplied by what I call a dragFactor. To calculate the longitude, we start by calculating the difference between where the mouse was when the click happened ( downPointer.x) and where the mouse is currently in the dragging process ( event.clientX). Now, I will break down how this calculation works. Lat = (event.clientY - downPointer.y) * dragFactor + downPointer.lat lon = (downPointer.x - event.clientX) * dragFactor + downPointer.lon I also used the X and Y positions of where the mouse has moved to during the drag to determine what I am calling the latitude ( lat) and longitude ( lon). First, in the onDocumentMouseMove method, I take the starting X and Y positions of the mouse click previously mentioned and do some calculations with it. To do this, X, Y, and Z coordinates for the points in 3D space need to be calculated for each small movement of the mouse. I updated the camera logic by using Three.js’ camera.lookAt function to look at different points in 3D space as the user clicks and drags. So, the next thing that needed to be done was to rewrite the camera logic. But, since I am trying to mimic an intuitive way someone might click and drag a camera in a room (similar to Google Maps), this would not suffice. You can see an example below of this in a proof-of-concept 3D room that I set up.įor many use cases that people have using Three.js, this is perfectly acceptable. It moves up when your mouse goes up, and down when you mouse goes down. Now we can get into the logic of actually moving the camera.īy default, the camera movement in the Perspective Camera doesn’t act the way I wanted it to. Subsequently, in the onDocumentMouseMove method, nothing happens unless isUserInteracting is set to true. This variable is set to false within the onDocumentMouseUp method, thus tracking whether or not the user has the mouse held down. Within the onDocumentMouseDown function, I am noting the starting X and Y positions of the mouse for later, as well as setting a variable called isUserInteracting to true. This allowed me to call specific methods when the browser detects the mouse being pressed, being moved, and being lifted respectfully. document.addEventListener('mousedown', onDocumentMouseDown, false) ĭocument.addEventListener('mousemove', onDocumentMouseMove, false) ĭocument.addEventListener('mouseup', onDocumentMouseUp, false) In order to move the camera only when the mouse is held down, we needed to tap into the document’s mousedown, mousemove, and mouseup event listeners, as shown below. This issue was fairly easy to resolve, but in resolving it, some of the main functionality of the Perspective Camera was changed. This is a great start, but the camera needed a couple of tweaks to make it move how I wanted.įirst, out of the box the camera moves whenever the mouse moves on the page instead of when you click and drag. The one I went for was the Perspective Camera. Three.js offers a couple of base camera views to get us started. The first issue that needed to be resolved was the click and drag camera movement. Here are a few things I learned the hard way while creating this 3D house. This site was built using the Javascript library Three.js on top of a React v6 single page application. I came to realize this is no easy task, especially when it comes to camera movement. Additionally, there would be clickable hotspots that would allow the user to “walk” over and look at a specific item in the room. In this house, a user would be able to look around a room by clicking and dragging their point of view, similar to street view on Google Maps. Recently, I faced a situation where I needed to create a navigable 3D house within a website.
0 Comments
Leave a Reply. |