Troubleshooting the ThreeJs THREE.Mesh position problem

As a newcomer to three.js, I am exploring the three.js libraries and trying to understand how they work. I have successfully rendered a sphere on the screen, but I am having trouble figuring out what exactly the .position member of the sphere is referencing. It doesn't seem to be in screen coordinates as expected. Although the x0 point appears to be around halfway across the screen, the y0 point is roughly one-third up from the bottom of the screen, and when I move it by say 300, it doesn't seem to be moving by 300 pixels.

I am feeling a bit out of my depth and just tinkering with someone else's example code to gain a better understanding, but this particular issue has me stumped. I have reviewed the 3js API but haven't found any answers there.

I will include the relevant code below in case there is something wrong with it.

    <script src="js/Three.js"></script>
    <script src="js/Stats.js"></script>
    <script src="js/mDetector.js"></script>
    <script src="moddShape.js"></script>
    <script language="javascript" type="text/javascript"></script>
    <script>
        // JavaScript code snippet
    </script>

Your help is greatly appreciated.

Answer №1

Coordinates in web development are not solely expressed in pixels; they are a more versatile type of measurement. To gain a better grasp on this concept and utilize Three.js effectively, it would be beneficial to delve deeper into WebGL and 3D basics.

If you are utilizing a perspective camera, you can easily center the sphere by using the following code:

createScene(0, 0, 0, 0);

Additionally, make sure to adjust the direction of your y-axis increments. For instance, sphere.position.y += .1; should be changed to sphere.position.y -= .1;, and ...-= 1; should be modified to ...+= 1;

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

Issues with displaying public images in Next.js production build are being reported

My Next.js app is deployed on Heroku. Images show up when I develop locally, but once pushed to Heroku and checked on the live site, the images return a 404 error. The images (.png) are stored in a public folder within my project, and I reference them in t ...

The specified container does not exist in the DOM: MERN

I am currently working on a project where I aim to develop a Web Application featuring a stock dashboard. During my coding process, I encountered a minor issue that can be seen in this image. My goal is to have a login form displayed on the browser using ...

Utilizing a JSON object passed from one JavaScript function to another: A comprehensive guide

After creating a function that returns JSON format through an ajax call, I received the following JSON data: { "communication": [{ "communication_name": "None", "communication_id": "1" }], "hardware": [{ "hardware_name ...

What is the best way to identify when a particular character has been entered into the input field?

HTML <div class="form-group"><label class="col-md-4 control-label" for="s1">URL</label> <div class="col-md-4"><input id="url" name="url" type="text" ng-change="checkVal()" ng-model="url" placeholder="" class="for ...

Is it possible to replace a server-side templating engine with Angular 2's server-side pre-rendering?

As a novice in web development, I have recently been exploring angular 1.x, react.js, and angular 2 (eventually deciding on angular 2). Lately, I've been intrigued by the concept of server-side pre-rendering. In my understanding, this process is ...

Using the .map function on JSON data with and without a parent element in JavaScript

In my current project, I am working on a React + Rails application. For handling JSON data, I typically use the default jbuilder in Rails. However, following the recommendations from the react-rails official documentation, I started adding a root node to m ...

Updating input text value using jQuery - Chrome extension

I have been attempting to modify the input value on a specific website using a Chrome extension. To achieve this, I am utilizing jQuery in my content script. While it is effective in most scenarios, I encountered difficulty changing the input value when ...

Should we define all public methods or prototype each method separately?

Typically, when I create a library, my approach is as follows: var myLibrary = (function() { return { publicProperty: 'test', publicMethod: function() { console.log('public function'); }, ...

Conflict arising from duplicated directive names in AngularJS

Hey there, I've got a question for the experts. How can I prevent conflicts with directive names when using external modules? Right now, I'm utilizing the angular bootstrap module, but I also downloaded another module specifically for its carouse ...

What is the best way to compare a JSON object and a string in JavaScript?

Currently, I am working on developing the website layout for . Most of the data retrieval and display have been successful so far. However, when attempting to filter my search results to show only stop names associated with Subways, I encountered some err ...

Separate the information into different sets in JavaScript when there are more than two elements

Upon extraction, I have obtained the following data: ╔════╦══════════════╦ ║ id ║ group_concat ║ ╠════╬══════════════╬ ║ 2 ║ a ║ ║ 3 ║ a,a ...

AngularJS- issue with button visibility on 'toolbar' widget

In my angularJS application, there is a page with multiple widgets displayed. When a user clicks on the 'Settings' button on the page (separate from the widgets), a toolbar for each widget appears showing different buttons depending on the widget ...

How can I apply a jquery method to a variable when JavaScript already has a method with the same name?

Is it possible to call the .which function on a character without needing to differentiate between browser types by using the jQuery .which method, which supposedly normalizes for browser discrepancies? I know that the inherent javascript method is also ...

Attempting to retrieve the MongoDB data for the designated field (data.site.alerts.alert) and transfer it to the client side

*****My code ***** import logo from './logo.svg'; import './App.css'; import React, { Component } from 'react'; import axios from 'axios'; export default class App extends Component { state = { arraydata: ...

A guide on updating object values within an array using map in React

Is there a method to calculate the total sum of specific values from an array of objects? Example array: const exampleArray = [ {item_id: 1, quantity: "3"}, {item_id: 2, quantity: "5"}, {item_id: 3, quantity: "2"} ] In this case, I want to add up the qua ...

Using JavaScript to transform JSON information into Excel format

I have tried various solutions to my problem, but none seem to fit my specific requirement. Let me walk you through what I have attempted. function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) { //If JSONData is not an object then JSON.parse will ...

Ways to Close a Modal in Ionic 5

I have a scenario where I need to open a modal, perform an asynchronous action, and then automatically dismiss the modal once the action is completed. Specifically, I want to use the fetchData function to handle the async task. @Component({ }) export cla ...

Error with YouTube API in Internet Explorer 8: Video not found

While using the iframe youtube api to handle video, everything runs smoothly on Chrome and Firefox. However, when trying to implement it on Internet Explorer 8, an error saying 'video' is undefined pops up. Any suggestions on how to resolve this ...

Store Dark Mode preferences in the browser's local storage using React and Material-UI

Is there a way to save the dark mode setting in localStorage? Can this approach be used for storing it? Any suggestions on how to achieve this would be appreciated. Thanks, cheers! function App() { const [darkState, setDarkState] = useState("&qu ...

Upload files via Ajax request is required

I am in the process of trying to upload a binary file to a server while avoiding a full page refresh when the server responds. I must admit, I am not well-versed in this area and I understand if my approach needs some adjustments. This is how I have appro ...