The lookat() function in three.js isn't functioning according to my requirements

Here is the code snippet I am working with: http://codepen.io/usf/pen/pGscf

This is the specific section of interest:


function animate() {   
   //sun.rotation.x = t/1000;
    sun.rotation.y += 0.01;

    t  += 0.1;
    earth.position.x = Math.sin((2*Math.PI/24*60*60)*timeScale*t)*300;
    earth.position.z = Math.cos((2*Math.PI/24*60*60)*timeScale*t)*200;

    camera.position.set(sun.position);
    camera.lookAt(earth.position);

    renderer.clear();
    renderer.render(scene, camera);        
    window.requestAnimationFrame(animate, renderer.domElement);
};

I am trying to view Earth from the perspective of the Sun (lol), but for some reason, I am unable to see anything. What could be causing this issue? I feel like it might be a small mistake somewhere in the code that I just can't seem to pinpoint.

javascriptcamerathree.js

Answer №1

Here's a common mistake: 

camera.position.set(sun.position);

To correctly use the set method, follow this pattern: 

set: function ( x, y, z ) {
    this.x = x;
    this.y = y;
    this.z = z;

    return this;
}

Instead of using 

camera.position.copy(sun.position)
, it is recommended to use 
camera.position.copy(sun.position)
.

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 Various Styles within a single Google Sheets Cell

In Cell A1, I have a challenge where I need to merge 4 different arrays of names, separated by commas. Each name should have its own styling based on the array it belongs to - red for array1, green for array2, orange for array3, and gray with a strike-th ...

javascriptgoogle-sheets

Is there a method in Angular to refresh or recompile a specific section or entire page that utilizes one-time bindings?

With numerous lists on our page containing potentially hundreds of items, we prioritize performance by implementing one-time bindings to update only when necessary and minimize the number of watchers. If we decide to utilize one-time bindings, is there a ...

javascriptangularjs

ways to make a list element inaccessible by using either Javascript or jQuery

When the user clicks on my eraser, I want the color to be hidden or not display its dropdown elements. I attempted this with the following code snippet. $('#chooseEraser').mousedown(function(e){ curTool = "eraser"; checkEraser ...

javascriptjquery

Questions about setting up a controller in AngularJS

As I dive into my first AngularJS controller within a test application, I am encountering some challenges. I am retrieving a list of items from a RESTful web service and working on implementing basic CRUD logic for these items. The item list is displayed ...

javascriptangularjsmodel-view-controllercontroller

retrieve a string value from a function within a ReactJS component

I am facing an issue with returning a string from a function. Here is the function I am using: const getImage = (name) => { const imageRef = ref(storage, name); getDownloadURL(imageRef).then((url) => { return url; }); }; Even tho ...

javascriptreactjsfirebase-storage

Show a collection of files in a table format

Here is the current code I have: index.html <!DOCTYPE html> <html> ... </form> </div> </body> </html> And here is my code.gs function doGet() { return HtmlService.createHtmlOutputFromFile('index'); } ...

javascripthtmlweb-applicationsgoogle-apps-scriptgoogle-drive-api

How to Implement Multi Select Drag and Drop Feature in Angular 4?

Currently, I am implementing Angular 2 Drag-and-Drop from this library to enable the selection of list items using a drag and drop method. However, I have encountered issues with its functionality on touch devices and when attempting to perform multiple it ...

javascripthtmlangulardrag-and-drop

When should we utilize the React.Children API in React applications?

Exploring the potential use cases of the React.Children API. The documentation is a bit confusing for me (Using React v.15.2.0). https://facebook.github.io/react/docs/top-level-api.html#react.children According to the documentation, this.props.children ...

javascriptreactjs

Rendering an Angular page with data using Node.js

I have a scenario for my website where users need to input a URL with a parameter (an ID) and receive back the corresponding page containing information from the database. I am using Angular4 but I am unsure of how to achieve this. It's straightforwa ...

javascriptnode.jsangularurl-routing

How to implement an instance method within a Typescript class for a Node.js application

I am encountering an issue with a callback function in my Typescript project. The problem arises when I try to implement the same functionality in a Node project using Typescript. It seems that when referencing 'this' in Node, it no longer points ...

javascriptnode.jstypescript

What is the best way to apply a texture to a triangle using three.js?

I've been able to add textures to cubes, spheres, and other primitives in a scene I created. However, when it comes to adding a texture to a simple triangle, I'm encountering difficulties. Below is my attempt at achieving this: var texture=TH ...

javascriptthree.js

The inline HTML script was unable to execute the function as intended by Jquery

Attempting to remove the element using a custom function called within inline html on my script tag, below is the code: HTML <div id="form"> <input type="text" name="name", id="name"><br> <input type="text" name="address", id="ad ...

javascriptjqueryhtml

Submitting a form using jquery

I am working on a project that involves using a jquery fancyzoom box. Within this box, there is a contact form that should send an email upon submission. However, I am encountering issues with calling the form submit function due to the fancyzoom feature. ...

javascriptjqueryforms

Refresh database records

I am currently using grails and I am exploring ways to update my database table utility by selecting values from two drop down menus. These drop down menus are populated with values from the database based on user selections from another drop down menu. My ...

javascriptjqueryajaxgrails

Mounted class not initiating transition in Vue.js

After attempting to apply a class to an element in the mounted lifecycle, I noticed that the transition effect was not taking place. The element would immediately display in its final state: However, when I used setTimeout to delay the class change, the t ...

javascriptcssanimationvue.jscss-transitions

Tips for achieving a slow scrolling effect similar to the one displayed on these websites

I've noticed smooth slow scrolling on various websites and have been searching for React or Vue plugins to achieve this effect. However, I am interested in learning how to implement it using vanilla JavaScript. Feel free to suggest plugins, libraries, ...

javascriptreactjsvue.jsscroll

What purpose does @ViewChild serve if we are unable to modify or interact with its properties from the Parent Component?

I have two main components - home and about. Within both of these, I am including a third component called hearts. Currently, I am manipulating the value of the 'age' property in the hearts component (initially set to '23') using @ViewC ...

javascriptangularcomponentsangular-directiveviewchild

The callback function in AngularJS' $http is failing to trigger

$scope.submitNewUser = function() { $http({ method: 'POST', url: 'api/user/signup', data: {'user': $scope.user}, headers: {'Content-Type': ...

javascriptangularjs

How can I generate pure JavaScript, without using Typescript modules?

Take this scenario as an example ... index.ts import { x } from "./other-funcs"; function y() { alert("test"); } x(y); other-funcs.ts import { z } from "some-module"; export function x(callback: () => void): void { z(); callback(); } ...

javascripttypescript

Tips for making a range slider in react-native

Check out my range slider I'm having trouble with changing values by clicking on them. Is there a way to enable sliding the range slider instead? Thanks for any help. ...

javascriptreactjsreact-native