Rotating the camera around the origin in Three.js

Hey, I'm having some trouble with what I thought would be a simple task. I have a group of objects at the origin, and I'm trying to rotate a camera around them while always facing the origin. According to the documentation, this code should work:

camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 500;
camera.position.x = 0;
camera.position.y = 0;
scene.add(camera);

var spin = Tween.create().time(5000).from( {angle:0}).to({angle:2 * Math.PI})
  .apply( function (v) {
    camera.position.x = 500 * Math.cos(v.angle);
    camera.position.z = 500 * Math.sin(v.angle);
    camera.lookAt(0, 0, 0);
});
spin.chain(spin);
spin.start();

However, the objects at the origin quickly move off screen and then return intermittently. I must be missing something here. I assumed that since there is a box at 0,0,0 and the camera is looking at 0,0,0, it shouldn't be possible for the camera to be positioned where I can't see the box, right?

Answer №1

Perhaps what you need is the Orbit Control feature.

Take a look at this demo: OrbitControl Demo

The Orbit Control offers a range of useful properties for managing the camera's orbit around a THREE.Vector3 (in this case, 0,0,0)

UPDATE:

Below is an example of using the Orbit Control to create an orbit camera around the origin:

orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.target = new THREE.Vector3(0,0,0); // set the center
orbit.maxPolarAngle =  Math.PI/2; // prevents the camera from going below ground level
orbit.minDistance = 140; // sets the minimum distance the camera can be from the center
orbit.maxDistance = 250; // sets the maximum distance the camera can be from the center
orbit.zoomSpeed = 0.3; // controls the speed of zooming in and out
orbit.rotateSpeed = 0.3; // controls the rotation speed

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Node gRPC for seamless transmission of server metadata to clients without any issues

When working from the client side, adding metadata for the server is a simple process: const meta = new grpc.Metadata(); meta.add('xyz', 'okay'); stub.service.Rpc(request, meta, (err, response) => { }); To access the above on the ...

Vue.js versatile form for both adding and editing

As a newcomer to the world of vue.js, I am currently working on expanding some tutorials that I have completed. After struggling with this for three hours now, I must admit that I am feeling quite frustrated. Just to give you a heads up, I am using firebas ...

Struggling to properly parse JSON data using jQuery

I am a beginner in jquery and have a php script that returns JSON data. However, I am facing an issue while trying to fetch and process the result using jquery. Below is the code snippet: calculate: function(me, answer, res_id, soulmates) { conso ...

Acquiring the safe area of the iPhone X through JavaScript

The CSS properties safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom are available, but is there a way to retrieve these values using JavaScript? ...

BottomNavigation wrapping React Router is failing to load the updated component

I'm struggling to understand why I can't seem to load the DMO page from a BottomNavigation component. Navigating to "/dom" works fine, but clicking the buttons doesn't do anything. The initial "/" loads perfectly. Any ide ...

Prevent the form from refreshing while still allowing for submission

I'm currently working on a radio website that features a player and several banners that can be clicked on to play different radios. In my opinion, the ideal behavior would be that when I click on a button to play a radio, it should smoothly transiti ...

What is the best way to implement conditional hook usage in React?

Having two hooks at my disposal, useLocalStorage and useQuery, I find myself wondering about conditionally utilizing one of them based on an input prop. I'm considering writing the following: const [value, setValue] = localStorage ? useLocalStorage() ...

Modify the array dynamically within the Factory

I am currently working on a simple app where I want to display embed videos with the click of a button. It was quite challenging for me to dynamically bind my embed players, but I managed to do it successfully. I created a factory that contains my data in ...

The error message "TypeError: undefined is not an object (evaluating '_reactNative.Stylesheet.create')" occurred in a React Native environment

I've been working on a project in React Native and have successfully installed all the necessary dependencies. However, upon running the code, I encounter the following error message: TypeError: undefined is not an object (evaluating '_reactNativ ...

How can you update an image's source when hovering over it?

My goal is to switch the image source upon mouseover using a combination of asp.net and javascript. Here is the code I am currently using: <asp:ImageButton id="button" runat="server" Height="65px" ImageUrl="~/images/logo.png" OnMouseOver="src='~ ...

Using wildcard in Angular app for MQTT observation

My curiosity lies in MQTT wildcards and how they function, specifically while utilizing the mosqitto broker. Let's say I have around 1-2k topics. In my frontend, I am observing them with a single-level wildcard using ngx-mqtt. Will there be a separat ...

Encountering a MiniCssExtractPlugin error while trying to build with npm

I have encountered an issue while trying to execute "Npm Run Build" on my reactjs website. The error message I keep receiving is as follows: /usr/local/lib/node_modules/react-scripts/config/webpack.config.js:664 new MiniCssExtractPlugin({ ^ TypeErr ...

Struggling with showcasing Trips in my React Native project and looking for guidance on the best approach to implement it beautifully

API: app.get('/trip', async (req, res) => { try { const employeeId = req.query.user; const empId = new ObjectID(employeeId); // Retrieving Fleet associated with the driver's ID const fleet = await Fleet.findOne({ a ...

I am facing an issue in JavaScript where one of my two timers is malfunctioning

While working on my tank game, similar to Awesome Tanks, I encountered an issue with the AI tank shooting mechanic. I set up a separate timer for the AI tank to shoot a bullet, but when I attempt to run it, I receive an error stating that AItimer is not de ...

"Incorporating a hyperlink into a newly added table row with the help

When utilizing jQuery, I am able to dynamically add rows to a table with each row containing an anchor tag. However, when attempting to populate the anchor tags with links using jQuery, the links do not appear as expected. Strangely enough, the other data ...

I am experiencing difficulties connecting my webRTC app to the remote system

I've set up my webRTC app on an HTTPS server and it's working fine. However, I'm facing an issue where the Remote system details (SDP) are not being captured. Both the Local system (PC1) and Remote system (PC2) are unable to establish connec ...

What could be the reason behind PHP not picking up my AJAX request string?

I'm encountering an issue where PHP is not recognizing my request string as defined. When I include $_GET['ask'] in my PHP file, it triggers the error message - Notice: Undefined index: ask. Interestingly, when I manually input the query in ...

Send the data to the web form along with the JSON information

I find myself in a situation where I am looking for alternative ways to pass data to a redirect page without using querystrings. Here is the current implementation on the Source Page: window.location = "invaliduser.aspx?u=" + encodeURI(username); Consi ...

Uploading files in javascript and PHP

I am currently utilizing an audio recorder provided by this source , However, instead of storing the file locally, I am interested in uploading it back to the server. My attempt involved adjusting the Recorder.setupDownload function within the recording. ...

Storing data on the server for your Cocos2d JavaScript game

I've been struggling with implementing a savegame option for my cocos2d JavaScript game. After following a tutorial from Ray Wenderlich (thanks, Ray!), I gave up on trying to do it client-side and am now looking into saving XML files to a web server w ...