extracting information from an external document

Question

extracting information from an external document

I'm quite new to both three.js and JavaScript, so please bear with me if this is a simple question.

I have a JSON file with a list of objects containing data like this:

[
{ "x":x,"y":y,"z":z ,"r":r},
{ "x":x2,"y":y2,"z":z2 ,"r":r2},
{ "x":x3,"y":y3,"z":z 3,"r":r3}
]

And I want to render it on the screen using three.js.

Basically, I want to achieve something similar to the example shown here:

However, instead of hardcoding the sphere values directly in the JavaScript code, I'd like to read them from a file. How can I modify the above example to achieve this?

Your help would be greatly appreciated. Thanks!

javascript three.js

Answer 1

Answer №1

If your goal is to segregate the data from your application logic, there's no need to create a JSON file and load it through Ajax. You can simply create another JavaScript file and store the data there.

For instance:

// myData.js
var myData = [
    { "x":x,"y":y,"z":z ,"r":r},
    { "x":x2,"y":y2,"z":z2 ,"r":r2},
    // ...
];

// --------------

// myApplication.js

// Here goes the three.js code and you can access the data here, for example
alert(myData[0].x);

In your HTML file, make sure to include the data file first so that all subsequent scripts can access the myData variable:

<script src="myData.js"></script>
<script src="myApplication.js"></script>
<!-- this works too: -->
<script>
    alert(myData.length);
</script>

If you do need to load the file via Ajax, refer to this question: How do I load a JSON object from a file with ajax?.

Answer 2

If your goal is to segregate the data from your application logic, there's no need to create a JSON file and load it through Ajax. You can simply create another JavaScript file and store the data there.

For instance:

// myData.js
var myData = [
    { "x":x,"y":y,"z":z ,"r":r},
    { "x":x2,"y":y2,"z":z2 ,"r":r2},
    // ...
];

// --------------

// myApplication.js

// Here goes the three.js code and you can access the data here, for example
alert(myData[0].x);

In your HTML file, make sure to include the data file first so that all subsequent scripts can access the myData variable:

<script src="myData.js"></script>
<script src="myApplication.js"></script>
<!-- this works too: -->
<script>
    alert(myData.length);
</script>

If you do need to load the file via Ajax, refer to this question: How do I load a JSON object from a file with ajax?.

extracting information from an external document

Answer №1

Similar questions

Optimizing performance: Making the most of mongoose updateMany middleware

The quickest regular expression match possible if it is already a subsection of another match

What is the best way to locate and access a JSON file that is relative to the module I am currently working

Is it possible to style a React component based on the rendering of another component?

What is the best method for enclosing all text within an HTML document with a different element?

Internet Explorer IE 11 encounters an "Error: Object does not support property or method" issue

REGEX: All characters that appear between two specified words

"Exploring the Power of Asynchronous Promises within a Switch Statement in

Organize results from MySql using php

WebView no longer refreshes when the document location is updated

Could you clarify that for me?

Deleting Firestore ancestor documents and sub-collections that do not exist

Node.js variable initialization

Replacing text using regex results in whitespace

Working with Angular: Accessing SCSS variables from style.scss using JavaScript inside a component

Incorporate jQuery Tabs into every individual function for enhanced functionality

What is the best way to iterate over an array of objects?

Resetting a form in React JS: A step-by-step guide

Using a dynamic image source in an Ionic 3 background

Retrieve the nth element from an array using a function that requires 2 arguments