With the updates to THREE.js, I have been having trouble using the GLTFLoader. It keeps giving me the error mentioned above.
Imported in a seperate js file
test.js
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
index.html
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
<script src="test.js"></script>
file structure
The import statement cannot be used in embedded scripts unless the script has a type="module".
Here is an example for the import statement with type module.
<script type="module" src="test.js"></script>
Related
I have an issue with the path definition of the libraries and models that are used in an HTML file using WebGL. The HTML file can be found here, which is an example code for a WebGL2 book.
The HTML file itself is sitting locally in the following directory in my computer.
C:\Users\bob\Desktop\Book\ch01\ch01_04_showroom.html
The libraries and other sources are located in
C:\Users\bob\Desktop\Book
├───ch01
| └───ch01_04_showroom.html
├───ch02
└───common
├───images
│ └───cubemap
├───js
├───lib
└───models
├───audi-r8
├───bmw-i8
├───ford-mustang
├───geometries
├───lamborghini-gallardo
└───nissan-gtr
The parts of the code that I have issues with are in the following
ch01_04_showroom.html
<html>
<head>
<title>Real-Time 3D Graphics with WebGL2</title>
<link rel="shortcut icon" type="image/png" href="/common/images/favicon.png" />
<!-- libraries -->
<link rel="stylesheet" href="/common/lib/normalize.css">
<script type="text/javascript" src="/common/lib/dat.gui.js"></script>
<script type="text/javascript" src="/common/lib/gl-matrix.js"></script>
<!-- modules -->
<script type="text/javascript" src="/common/js/utils.js"></script>
<script type="text/javascript" src="/common/js/EventEmitter.js"></script>
<script type="text/javascript" src="/common/js/Camera.js"></script>
...
<script type="text/javascript">
'use strict';
// ...
function configure() {
carModelData = {
// This is the number of parts to load for this particular model
partsCount: 178,
// The path to the model (which I have issue with on my computer)
path: '/common/models/nissan-gtr/part'
};
}
...
I have issue defining the path for hrefs and srcs. Also the one in the javascript function:
path: '/common/models/nissan-gtr/part'
If I use the code as it is posted in here nothing will be displayed in my Google Chrome, just an empty page.
So, I have changed paths from
/common
to relative paths:
./../common
but still, I am not able to load the HTML correctly. I see the gridded floor with an incomplete menu but the car is not displayed yet as in the following snapshot.
It's a security, Chrome doesn't let you load local files through file:///... for security reasons.
The purpose of this security is to prevent external resources from gaining access to your system, which could allow them to modify or steal files
Solutions
The best solution is to run a little http server locally since you can follow the steps from this SO answer or this one.
Or, maybe others will bring it up so I'll mention it, you can also launching Google Chrome from the command line with the flag: --allow-file-access-from-files, but this isn't recommended since Chrome doesn't allow this behaviour to protect you.
Basically i have a file that generates some data and writes it to a rudimentary html file. I made a simple React app to better parse and display the data but it's useless if i have to run a server every time. All i really need is a shortcut html page that runs the react all as a standalone. Hope this make sense.
What you're looking for a static templating engine in client side.
However, to answer your question, yes, definitely it's possible. But you just need to include the needed dependencies. Also, note that this is not optimised for production.
<!-- The root where React App gets rendered. -->
<div id="root"></div>
<!-- React JS and React DOM Libraries. Add Babel for transpiling, as you might use JSX. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<!-- The real React JSX App -->
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div>
This is React!
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
</script>
It sounds like the generation of static HTML. You do not need React in such a case. Just use pug or another template engine of your choice.
I just started trying ES6 and i already got stuck with ES6 modules. I use babeljs for translating ES6 into ES5. My understanding is, that babel uses requirejs module loader behind the scenes to make the import happen.
So i am trying to set up a very basic sample of module loading but i cannot get it working.
I want to import a module from bar.js into index.html. Those files have same parent directory.
index.html code:
<html>
<head>
<meta charset="UTF-8" />
<title>React</title>
<script src="https://unpkg.com/babel-standalone#6.22.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.2/require.min.js"></script>
</head>
<body>
<script type="text/babel">
console.log("Here we go.");
import {foo} from 'bar';
console.log(typeof foo);
</script>
</body>
</html>
bar.js code:
export function foo() {
console.log("Foo it!");
}
I get following error:
Uncaught Error: Module name "bar" has not been loaded yet for context:
_. Use require([])
Even more interesting thing happens when i change order of require.min.js and babel.min.js in the <head>. This time the text/babel script is not executed at all (no errors in console).
Could somebody, please, explain what is wrong? Or is this completely bad approach?
Please, do not suggest using bundlers like webpack. I dont want to use them yet.
I am testing the MathJax javascript library in a local HTML file. It works and correctly renders math formulas if I include:
script type='text/javascript' src='http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML'
in the HTML file, but it doesn't work if I include instead:
script type="text/javascript" src="/path_to/mathjax.js"
or even if I put the entire javascript source code.
What is the reason? I need to load mathjax.js from local js file into a local HTML file, so the first way doesn't help me.
(EDIT- I see an error: failed to load /extensions/MathZoom.js)
I had to load the entire MathJax distribution (17 Mb zip file), expand it and put the right configuration string in the HTML file. The final form is:
script type='text/javascript' src='/path_to/MathJax/MathJax.js?config=TeX-AMS-MML_HTMLorMML,local/local'
This may occur due to two reasons
1.You may have not extracted the entire zip folder, so first do that.
Still you are getting the error look into second reason.
2.You are not referring to the file correctly.
eg:
<script type ="text/javascript" src="pathto\mathjax.js">
You have typed an incorrect filename. Correct name of file is MathJax.js.Given below is the correct way.
<script type ="text/javascript" src="pathto\MathJax.js">
MathJax.js is the name of the file in the extracted folder(unless modified)
If all of this is not working,then link to the script in this way:
<script type="text/javascript" src="Pathto\MathJax.js?config=TeX-AMS-MML_HTMLorMML">
The reason that your script is not working is you are not including:
'?config=TeX-AMS-MML_HTMLorMML'
I'm using the java script library html5media.min.js to play mp3 file in Firefox.
my problem is that when I add the script link to my page as:
<script src = "http://api.html5media.info/1.1.5/html5media.min.js" type="text/javascript"></script>
It is working fine.
But if I get the code and save it in a local file, it is not working!!
i.e.
<script src="Scripts/html5media.min.js" type="text/javascript"></script>
Just add this code into your page after the the script tag
html5media.flowplayerSwf = "/path/to/your/flowplayer.swf";
html5media.flowplayerAudioSwf = "/path/to/your/flowplayer.audio.swf";
html5media.flowplayerControlsSwf = "/path/to/your/flowplayer.controls.swf";
You can see this