The processes of setting and copying operate in distinct ways

I have some questions regarding Set and clone in Three.js. I am attempting to create a scene where a sphere moves along the x-axis and the camera follows the movement using lookAt. I tried replicating an example from a book on learning Three.js, however, without using the clone method, my scene behaved the same way but I couldn't see the sphere. By using the clone method, I was able to see the sphere. Can someone please explain why this happens?

Here are the two different code snippets:

sphere.position.copy(new THREE.Vector3(x,10,0));


sphere.position.set(new THREE.Vector3(x,10,0));

The first one displays the sphere, while the second one does not :S

javascriptthree.js

Answer №1

Expanding on Derte's previous explanation - the concept of set functions similarly to the following:

function set(_x,_y,_z){
    this.x = _x;
    this.y = _y;
    this.z = _z;
}

On the other hand, copy operates as shown below:

function copy(v3){
    this.x = v3.x;
    this.y = v3.y;
    this.z = v3.z;
}

If you're providing incorrect arguments to the set function, it will likely result in an internal error. To verify this, you can press ctrl+shift+i in Chrome to inspect the console. Chances are, you'll see that the code executes smoothly with copy, but encounters issues when trying to use set with (THREE.Vector3) instead of (float,float,float).

Answer №2

the attribute is set to THREE.Vector3

check out the documentation and also the code implementation

Vector3.set requires 3 values: numerical data for x, y, and z

Vector3.copy takes another instance of Vector3

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

Change the CSS of a table row when a link is in focus

Is there a way to style a <tr> element when an <a> tag inside of it is focused? Below is the HTML for the table: <table> <tr> <td> <a href"#" tabindex="1" accesskey="e">edit</a> &l ...

javascripthtmlcss

How to change a POST request to a PUT request using Express and keeping the

In my express app, I have set up two routes like this: router.post('/:date', (req, res) => { // if date exists, redirect to PUT // else add to database }) router.put('/:date', (req, res) => { // update date }) W ...

javascriptnode.jsrestexpressroutes

Is there a way to obtain asynchronous stack traces using Node.js and TypeScript?

When working with TypeScript, I encountered an issue with stack traces. It seems that only the bottommost function name is displayed. My setup includes Node.js v12.4.0 on Windows 10 (1803). Below is the code snippet: async function thrower() { throw new ...

javascriptnode.jstypescriptasynchronous

Unraveling the Inner Workings of Promise Chaining

Currently, I am diving into the world of promise chaining and have encountered a question. Let's take a look at this example with a promise chain: const myPromise = new Promise((resolve, reject) => { setTimeout(() => { resolve(" ...

javascriptasynchronousecmascript-6es6-promiseasynchronous-javascript

The code mistakenly sends an object in place of a numerical value

The script below is causing an issue where an object is being sent instead of a number. This is resulting in a console error: GET http://localhost:8080/new_prog_22/paginator.action?page=[object%20Object] 500 (Internal Server Error) The requirement ...

javascriptjquery

Drag and release: Place within invalid drop areas

I'm currently developing a drag-and-drop web application using Vue.JS and Vuex Store. The drag-and-drop functionality is based on the HTML Drag and Drop API as outlined in the Mozilla documentation. I have successfully implemented the Dropzone Compone ...

javascriptvue.jsdrag-and-drop

Is it possible to programmatically refresh an Angular controller?

Within my HTML page, I have implemented three tabs with each tab linked to a unique controller. The structure is as follows: MainHTML (app.pages.managing.html): <div id="DetailsViewContainer"> <div ng-if="selectedTab === 'tab1&a ...

javascriptangularjs

The issue with the vue-carousel arises from an uncaught TypeError in which it is unable to read properties of undefined while trying to access '_c'. This problem occurs within the vue-carousel.min.js file

I encountered an error when using the Carousel component from the plugin. The error message is as follows: vue-carousel.min.js:6 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading '_c') at Proxy.r (vue-carousel.min.js: ...

javascriptvue.js

Tips on traversing a JSON array in AngularJS using the ng-repeat directive

My service returns the following JSON data: {"categories":[{"category_id":"20","name":"Desktops"}, {"category_id":"18","name":"Laptops &amp;"},{"category_id":"25","name":"Components"}, {"category_id":"57","name":"Tablets"}, {"category_id":"17","name": ...

javascripthtmlangularjsjson

Exploring the Differences in CSS Styling between Web and Mobile Platforms

Recently, I launched my new website and encountered a peculiar issue. Upon clicking on Pickup Date & Time, a bootstrap datepicker pops up like it should. However, the problem arises when viewing the website on mobile devices - the datepicker appears offsc ...

javascriptjquerycsstwitter-bootstrapbootstrap-datepicker

"Upon the page loading, a flickering effect can be seen in the div that

I'm trying to avoid this issue. Whenever I use ng-repeat, it initially displays everything inside the div along with empty scopes for a brief moment before loading the data and showing it normally. I want to eliminate this flicker upon page load but c ...

javascriptjqueryhtmlcssangularjs

Attempting to organize date and time down to the second

I'm currently working on sorting time with seconds included. While I am able to sort the minutes successfully, I'm facing difficulty in sorting the seconds. Despite trying various approaches and using dynamic data that needs to be sorted in desce ...

javascriptjquerymomentjs

Utilizing Ajax to send a parameter to a separate PHP script

I have a dilemma that I need help with. Currently, I have a table displaying data using PHP and SQL in the following format: What I want to achieve is to be able to click a button, retrieve the ID value, and based on that, execute another SQL query to dis ...

javascriptphpjqueryajax

Tips for concealing text within navbar components for various screen sizes in Bootstrap 4

Is there a way to hide certain elements of a bootstrap navbar inline without creating new elements for each screen size? I attempted using a span, but it caused the line to wrap. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/ ...

javascripthtmlbootstrap-4

Modify the background color based on the length of the input in Vue

Can you change the background color of the initial input field to green if the value of the Fullname input field is greater than 3 characters? See below for the code: <div id="app"> <input type="text" v-model="fullname" placeholder="Enter Full ...

javascriptcssvue.jsvuejs2vue-component

Tips for retrieving the location of a draggable waypoint in the Google Directions output

<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Location Partner</title> <!--styles for ...

javascriptgoogle-maps-api-3

Preventing the build-up of opacity animations in jQuery: Tips and tricks

-I have two division tags in my code. <div id="div1">Hover over me to show Div2</div> <div id="div2">Div2</div> -I used CSS to set the opacity of div2 to 0. -My goal is for div2's opacity to change from 0 to 1 when hovered o ...

javascriptjqueryhtml

Having trouble clicking or interacting with JavaScript using Selenium and Python

Issue: Unable to interact with elements on a specific webpage after opening a new tab. Using WebDriver Chrome. I can successfully navigate the initial webpage until I click a link that opens a new tab, at which point I am unable to perform any actions. ...

javascriptpython-3.xseleniumselenium-webdriver

Error SCRIPT5009: The term 'fetch' is not defined

Having some issues with my requests using Fetch API! The submit form isn't working in Internet Explorer, showing "SCRIPT5009: 'fetch' is undefined" error! This is an example of how it looks: fetch("url", { method: "P ...

javascriptnode.jsnpminternet-explorerfetch-api

What can I do to prevent my panolens.js image from pausing its spin whenever a user clicks on it?

I've been working on setting up a 360 image background that rotates automatically and disabling most user interaction controls. However, I'm struggling with one issue – preventing any form of interaction from the user altogether. Whenever a use ...

javascriptthree.js