1. "The Three.js ball"2

Looking at this snippet of code:

mesh = new THREE.Mesh(new THREE.SphereGeometry(500,60,40),
           new THREE.MeshBasicMaterial({map:texture,overdraw:true}));

Can you explain the significance of the values 60 and 40 in relation to the sphere?

mesh.scale.x = -1;

What is the purpose of the above line of code?

I've searched through various resources but couldn't find a clear explanation for the statements mentioned above. Even the documentation provided by three.js lacks detailed descriptions.

javascriptthree.js

Answer №1

Be sure to check out the Three.js documentation:

The numbers 60 and 40 represent the segments in which the sphere is divided horizontally and vertically.

Using mesh.scale.x = -1; will turn the mesh "inside-out". The scale value for a specific axis multiplies the vertex's position on that axis by a scaling factor. Therefore, scaling on the x axis will affect the x-component of the vertex's position accordingly. It is advised to avoid negative scaling factors as they can produce unexpected visual outcomes. Instead, consider uniformly scaling the mesh on all three axes like this:

var factor = 2.0;
mesh.scale = new THREE.Vector3(factor, factor, factor);

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

Is it possible to execute an onClick event and a <NavLink to="/Scooters"> simultaneously?

Is it feasible in React to both filter my database and redirect to another route upon clicking the search button? I am currently employing <BrowserRouter>. It would also be advantageous if this redirection could occur directly from the onClick even ...

javascriptreactjs

What could be causing the Quasar drawer to overlap the Quasar toolbar in a Vue application?

I am currently utilizing the quasar UI framework and have a main layout file that includes only a toolbar. This toolbar is meant to display across all pages in my application. <template> <q-layout view="hHh Lpr lff" style="backgro ...

javascripthtmlcssvue.jsquasar-framework

What is the method to target buttons using ID instead of index values?

I need advice on how to change the background-color of buttons using their IDs instead of index for better maintenance. Do you have any suggestions? Take a look at the code snippet below or run it from this jsfiddle: https://jsfiddle.net/p6kuf0zv/4/ // ...

javascriptjqueryhtmlbootstrap-4popover

Tips for including shared information across different ionic tabs

Is there a way to include some shared content, like a canvas, in between the content of different tabs in Ionic? I want this common content to be displayed across all tabs, while each tab still shows its own dynamic data below it. I attempted to add the c ...

javascriptjqueryhtmltabsionic-framework

Form a celestial body's trajectory around a star

I am looking to create a vibrant red ring that visually represents the orbit of a green sphere around a yellow sphere. Using the lookat() method, I have successfully oriented the rings towards the green spheres. However, I am struggling to figure out the c ...

three.js

What's preventing me from invoking this object's function through an inline anchor?

CSS: <div class="box"> <p>This is a box</p> </div> Javascript: var box = { content : (function() {return ("This is the content of the box")}) }; alert("Box content: \n" + box.content()); $("output").text( +"<br/ ...

javascripthtmlcssjsfiddle

getting value of object property using a function that is located within the same object

I am attempting to access the 'context' property (or specifically 'context.settings') from within the 'ready' function in the same object. I am uncertain of the correct syntax to achieve this. Below is the code snippet: modu ...

javascriptoopnode.jsexpress

Using the toggle method or IF statements in JavaScript to implement show and hide functionality upon clicking

I’ve been struggling with this issue for days now. It seems like I may have overcomplicated a simple piece of code. I'm trying to show some divs when a button is clicked, but I’m having trouble getting it to work properly. Initially, I used VAR.st ...

javascriptjquery

Creating a dynamic line in Three.js that connects the closest vertices from two models

I am facing a challenge with loading two models into a scene using OBJloader and the Three.JS library. Some of the models are billboarded by using model.setRotationFromQuaternion( camera.quaternion ); My main objective is to create lines connecting a vert ...

javascriptthree.js

Adding substance to collada mesh within A-frame

I've been attempting to apply a material to a custom 3D mesh in A-Frame (which is based on Three.js), but for some reason it's not working (the model keeps its original material). Any thoughts on what might be causing this issue? Below is my sce ...

three.jscolladaaframe

access the database information within the fullcalendar plugin

I've been exploring the calendar code on arshaw/fullcalendar and made some modifications, but I'm still unsure how to link JavaScript with a database. Here is the original code: $(document).ready(function() { var date = new Date(); var d = dat ...

javascripthtmlmysql

Is it a shallow copy or something else when updating state in React JS?

I am currently dealing with a particular state within my application: const [work, setWork] = useState([ { company: "Company", position: "President", website: "example.com", startDate: "2013-01-01", endDate: "2014-01- ...

javascriptreactjs

Revamp your AngularJS controller for a fresh new look

How can a controller be refreshed in Angular? Take into account the scenario below: <div ng-controller="MsgCtrl" ng-repeat="m in messages">{{m}}<br></div> <script> var ws = new WebSocket(something, something); function MsgCtrl($sco ...

javascriptangularjs

Declarations and expressions in Node.js using JavaScript

Recently diving into Node Js, I stumbled upon the following code snippet in a tutorial const readline = require("readline"); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); const questions = [ " ...

javascriptnode.js

Having trouble displaying an array in list format within an HTML template when passed from a JavaScript file

My goal is to display the courses that a user has purchased, as well as include them in a receipt sent via email. I am utilizing a node service to send emails with various templates stored in separate files. Values are passed from a JavaScript file to an H ...

javascriptjquerynode.jsemailreceipt

Is it possible to utilize the output of a function to determine the styling of a div element in Vue?

Hi, I'm trying to use the v-bind:style in my div to apply the textposit function with the textpos prop as a parameter. The function should adjust the style of the div based on the value of the parameter. <div class="container" :style=&qu ...

javascriptcssvue.jsvuex

Express.js - Struggling with Setting the Content-Type Response Header

While using Express.js, I am facing an issue with setting the Content-Type header. Even after specifying it as text/html, the response is being sent with application/octet-stream. Below is the snippet of my code: const express = require("express" ...

javascriptnode.jsexpress

Electron Universe of 3D Gaming

I have developed an app using electron, and I am currently trying to incorporate three.js. The problem I'm facing is this 'Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./" or ". ...

node.jsthree.jselectron

Using boolean flags in JavaScript and jQuery

I'm having trouble setting a boolean flag in JavaScript/jQuery. I thought that the flags should change globally after clicking btn1, but for some reason they remain unchanged when clicking btn2. What am I missing? JavaScript: $(document).ready(funct ...

javascriptjquery

I am looking to have three rows of input text area comments instead of just one

Utilizing Bootstrap 4.3.1 with React Components I currently have this image: https://i.sstatic.net/rudsE.png And I am aiming for this design: https://i.sstatic.net/VmyTW.png comments: { elementLabel: "Comments", elementType: 'textar ...

javascriptcssreactjssassbootstrap-4