Three.js file not included in my HTML file - javascript

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>

Related

Why can't I attach javascript to my html?

No matter how I choose to add a javascript file to a html file, it doesn't seem to work. My original code is longer and has more stuff in it but I thought I would isolate the problem and see if with a very basic bit of code I would get the same problem (which I do).
I've tried adding the script tag to the head and to the body (at the start and at the end).
Brackets states that the function is never called and also seems to think that alert doesn't exist. If I add internal javascript it works.
in Chrome's console it reads:
test.html:1 Uncaught ReferenceError: helloWorld is not defined
at HTMLButtonElement.onclick (test.html:1) onclick # test.html:1
when I click the button.
HTML is:
<!doctype>
<head>
<title>testcode</title>
<script src="test.js"></script>
</head>
<body>
<button onclick="helloWorld()">Press to say hello world</button>
</body>
test.js is in the same folder and is:
function helloWorld() {
alert("Hello World!");
}
UPDATE: I changed nothing and just reopened the browser, now it works (currently missing python a lot).
The code is working for me. Maybe it's the path of the files. If the files are in the same level, it should works..
- index.html
- test.js
But if the script is in a folder, you should change the script tag. Exemple :
- index.html
- /js
- test.js
<script src="js/test.js"></script>
There is another case, if your html page is /article/hello and your js /test.js you should change the script tag with <script src="../test.js"></script>
It's working for me. I just copied and pasted your exact code and it was working for me. Make sure you have saved both html and js files in same directory.
In order to check if JS file is included just open Developers Options (Ctrl+Shift+I) in chrome and then see if you get any error like this(in case js file was not included)

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

THREE is not defined error

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>

How to fix the " 'd3' was used before it was defined" error

I've been watching tutorials for building charts in d3.js but I'm stuck on this piece of code. In the video, the name "Jennifer Jerome" is highlighted and increased in font size. I literally have the same code but nothing is happening.
I keep getting the error:
d3 was used before it was defined.
d3.selectAll('.item:nth-child(3)')
...but not sure what it means. I feel like its something simple and obvious. Do you guys have any suggestions? Thank you! (I'm using Brackets by the way)
This is a screencap of the tutorial example:
This is a screencap of my code with the error (Disregard the index.html being in the _ folder. It's currently back in the root directory but it still does not work):
And this is a screencap of my index:
Check if d3.js is referenced before script.js in index.html file
I expect the problem is that you are not including the d3 library in your HTML file.
Do you have something like this in your HTML file? If not, you should.
<script src="https://d3js.org/d3.v4.min.js"></script>
The reason your structure differs from the example is that your index.html is inside the _ directory, and the example index.html is outside the _ directory (in the root directory).
Try moving index.html outside of _.
Then, these paths should work.
<script src="_/d3.min.js">
<script src="script.js">

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.

Categories

Resources