THREE is not defined error - javascript

Hi I am trying to run some three.js examples locally on my machine. I know there are some problems with security so I need to set up a local server. So I'm running a local server with python. The background image and text displays but no animation is happening.
I checked console and getting the error THREE is not defined. I've downloaded three.js and put that folder in my project directory - any ideas on what's happening here?
The animation works in the browser when accessing from the three.js (examples) page. My script src is the same as the output of the command pwd when I am working on the command line in the three.js-master directory, as seen below:
<script src="/home/iiiiiii/Desktop/test/build/three.js"></script>
<script src="js/controls/TrackballControls.js"></script>
<script src="js/renderers/CSS3DRenderer.js"></script>
<script src="js/loaders/PDBLoader.js"></script>

Hi most common reason for this is that either you are not adding three js into your project as I can see in your given code snippet
/home/iiiiiii/Desktop/test/build/three.js
but given path is not a valid path to give inside a project I will suggest moving this file to the project folder like other js files you added in the given snippet.
Or Simply you can add a CDN for Three js in your project
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js" integrity="sha512-dLxUelApnYxpLt6K2iomGngnHO83iUvZytA3YjDUCjT0HDOHKXnVYdf3hU4JjM8uEhxf9nD1/ey98U3t2vZ0qQ==" crossorigin="anonymous"></script>

Just put your <script src="three.js"></script> EXACT below the <body> tag that will help.

Does this library need to be called at the top of your document or after the page has been rendered?
I notice you dont have a type set when linking your libraries. try:
<script type="text/javascript" src="/home/iiiiiii/Desktop/test/build/three.js"></script>

Related

How to correctly add the src to printThis.js

Whenever I add the references in javascript it keeps saying that the references cannot be loaded. I have downloaded the packages and have them sitting in a file called Data/NGData/Dependencies/Packages.
I would have thought that the src would look like this
<script src="/Data/NGData/Dependencies/Packages/printThis.js"> </script>
But that doesn't work. Can anyone give me some pointers so that I can use the library.
EDIT: The error that I'm getting

Linking a JavaScript file to HTML file not working by any means

I've tried all the posibilities as described in previous similar cases and still no results.
I'm adding the link tags at the end of the of the HTML and I am calling the folder where the file is placed but still nothing.
</div>
<script type="text/javascript" src="../pages/counter.js"></script>
Folder structure:
It's not clear for me where is the js file. But you should try the same folder:
"./pages/counter.js"
Seems like your index file is in same directory as of pages. So try
Looks like pages has the same hierarchy level as index.html, so the path getting used is incorrect.
Try using the following path:
</div>
<script type="text/javascript" src="./pages/counter.js"></script>
Let me know in case of issues

How can I get this chart to render locally? (D3.js)

I'm sorry if this is incredibly easy/basic, but I'm completely new to D3.js and I just want to get this example loaded so I can try to modify it with my own data.
I'm trying to replicate the following chart from the d3fc library: https://bl.ocks.org/ColinEberhardt/3ce92a3eef9f97ab4700868896414679
I created three different files as per the example:
|- index.html
|- chart.js
|- data.csv
But then when I try to load index.html, nothing appears in the browser. Am I doing something wrong (or not doing / missing something)?
I haven't installed anything, just copied the code into the files.
Thank you!
Edit:
When I try loading an example that I download directly from the author's github, it looked like this locally:
https://imgur.com/a/7ok89md
When it should look like this:
https://colineberhardt.github.io/yahoo-finance-d3fc/
Just copy the whole code block and into your index.html file and the script in to the js file and include using the script src path. then declare the chart handler i.e <div id="chartIdHandle"> </div> in your html file and pass to the d3.select function i.e d3.select("#chartIdHandle")
You can load the data.csv file within the same function
i.e d3.csv("file url") in your if the file is in the local
directory you can just use d3.csv("/data.csv")
Give it a try.
First I changed all script url to https
<script src="https://unpkg.com/babel-polyfill#6.26.0/dist/polyfill.js"></script>
<script src="https://unpkg.com/custom-event-polyfill#0.3.0/custom-event-polyfill.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/document-register-element/1.8.0/document-register-element.js"></script>
<script src="https://unpkg.com/d3#5.5.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/d3fc#14.0.3/build/d3fc.js"></script>
Then the chart js file
<script src='chart.js' type='text/babel'></script>
Give it a try and let me know

Rafael.js reference error messages

I have this animation, see: js fiddle example
When I tried to convert it notepad++ .js and .html documents, I got:
uncaught reference error: Raphael is not defined.
What should I do to fix it? I gave the reference as:
<script type = "text/JavaScript" src ="Raphael 2.1.0.js"> </script>
You are not including raphael.js javascript file to your document correctly.
Add code below to your .html file, right before enclosing </body> element and any other javascript which are doing work with raphael.js library. (In other words, all javascript in js fiddle window goes below script include tag.)
<script type="text/javascript" src="path/to/raphael.js"></script>
// ... your raphael.js related javascript is located here ...
</body>
The reason why it works inside jsfiddle is that you can see from left upper corner of the page that Raphael 2.1.0 is selected, so jsfiddle includes it automatically to the page.
Hence, you should either download raphael.js file to your project folder or use extranal cdn url for the resource, such as http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js (but be aware, if location changes your code will stop working.)
Cheers.

Three.js file not included in my HTML file

I am learning HTML5, and i use Three.js 3D engine. following this example, the tutorial assume i included three.js file into my HTML file. However, i found two files with that name, so i included both but nothing appear to work.
In my html file:
<script src="three.js/build/three.js"></script>
<script src="three.js/src/Three.js"></script>
Three.js package is in the same directory as my html file and it's in a folder called three.js.
Am i including the wrong file(s)?
EDIT
When i debug in Mozilla FireFox, i got this message:
[13:41:04.275] ReferenceError: $ is not defined #
The line causing the error is this:
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
Thanx for help.
If the js file is in the same directory you should just do
<script src="three.js"></script>
The path to the file inside the src attribute is relative to the current file.
Since r50 it should be:
<script src="three.js/build/three.min.js"></script>

Categories

Resources