I'm having some issues figuring out how to get GLTFLoader to work in THREE.js. I don't understand how to use a cdn site to host the file. I have tried using links from examples around the web but that hasn't done the job for me. I read on another post that the GLTFLoader file had to be the same versions the core THREE file I'm using (r121).
I thought I could go to mrdoob github (not familiar with how to use github) and click raw file then use that link on a site like githack to generate a cdn link and add it as a script in my html, or import it into my js file, but that didn't work.
If that is the way to do it then it's not working. In my code when I type in:
let loader = new GLTFLoader(); //from the docs
//or
let loader = new THREE.GLTFLoader(); //not from the docs
I get one or the other of these two errors:
Uncaught ReferenceError: GLTFLoader is not defined
or
Uncaught TypeError: THREE.GLTFLoader is not a constructor
I have been at this for hours and haven't a clue what to do.
CodePen https://codepen.io/jfirestorm44/pen/RwRPJda?editors=0010
The tutorial I'm following if it matters:
https://tympanus.net/codrops/2019/10/14/how-to-create-an-interactive-3d-character-with-three-js/
Make sure your imports for three.js and GLTFLoader in your html file are placed before your own script. I like to place my own scripts at the very bottom of my html file.
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js" integrity="sha512-yNJzAsg5JyP91u+sLHlUDULMBd3hmEiVkYeeN1cQBKaLZ7EyT6oH2u5THNIRM2Fu6VKcZJv+F/QAp1h/qzy9Ow==" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
Update: The cdn link above will always point to the most updated GLTFLoader, which may not be backward compatible. Use specific tags instead:
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/three#0.126.0/examples/js/loaders/GLTFLoader.js"></script>
In your script you don't need additional imports, just call the loader
const gltfLoader = new THREE.GLTFLoader();
In other words, the following code is redundant given you use the html imports provided above.
import * as THREE from "https://cdn.jsdelivr.net/npm/three#0.121.1/build/three.module.js";
import { GLTFLoader } from "https://cdn.jsdelivr.net/npm/three#0.121.1/examples/jsm/loaders/GLTFLoader.js";
Working example:
index.html
<!DOCTYPE html>
<html>
<head>
<!-- CSS imports-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r126/three.min.js" integrity="sha512-n8IpKWzDnBOcBhRlHirMZOUvEq2bLRMuJGjuVqbzUJwtTsgwOgK5aS0c1JA647XWYfqvXve8k3PtZdzpipFjgg==" crossorigin="anonymous"></script>
<script src="https://unpkg.com/three#0.126.0/examples/js/loaders/GLTFLoader.js">
</head>
<body>
<!-- body -->
</body>
<script type="text/javascript" src="/static/myscript.js"></script>
</html>
myscript.js
const gltfLoader = new THREE.GLTFLoader();
The cdnjs.com & skypack.dev URLs are outdated. Please refer to this answer https://stackoverflow.com/a/71377614/2405040 if you are not using ES6 module or any build tool like webpack.
Related
In my simple html file I have this to use three.js functionalities:
<script src="js/three.js"></script>
Now I want to use OrbitControls which is not part of three.js standard library it seems.I am not able to find it in three.js website.
What's correct way of using it?
download the OrbitControls.js and use
<script src="js/OrbitControls.js"></script>
use npm three and
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
I'm writing a quiz in JS and my problem is that I need a lot of formulas, that's why I use MathJax, it works perfectly in HTML.
I'm trying to implement MathJax inside an object for questions and answers but it doesn't render.
This is the MathJax script:
<script type="text/x-mathjax-config"> MathJax.Hub.Config({
extensions: ["tex2jax.js"],
jax: ["input/TeX","output/HTML-CSS"],
tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]} });
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js">
</script>
Sorry if this question is repetitve or stupid, I just can't find the right solution.
Thank you in advance!
How do you load d3.js with SystemJS?
I currently use:
<html>
<head>
<!-- SystemJS -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('d3.min.js').then(function(){
System.import('myJavascript.js')
})
</script>
Which seems to work. Is this the most reasonable way to go?
I found little help in SystemJS documentation towards this end, so I am not even sure .then is the approach for waiting for an import. What might be the best way, also for production?
Above, I load d3.min.js from my own server, but a CDN approach is also of interest..
Thanks!
If your myJavascript.js is depend on d3 then just dynamically import your script and add d3 inside your own script
index.html
<script>
System.import('src/myD3App');
</script>
myD3App.js
import './d3.min.js';
I recommending to use jspm (created by Guy Bedford same as SystemJS). But that just a personal opinion.
Good evening,
I recently switched from EaselJS to Threejs, it's amazing!
I've tried to include a physic engine called Physijs and use it with tQuery with this tutorial but it's not working.
Head:
<!-- Physics engine -->
<script type="text/javascript" src="lib/tquery-bundle-require.js"></script>
<!-- <script type="text/javascript" src="lib/ammo.js"></script>-->
<script type="text/javascript" src="lib/physi.js"></script>
<script type="text/javascript" src="lib/tquery.physi.js"></script>
<!-- Game and GameCore namespace -->
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/game.static.js"></script>
Physijs version: latest form GitHub
Threejs version 59 (included in tQuery)
tquery.physi.js version: unknown, grabbed from the source-code of the tutorial, can't find it anywhere else)
init function called when the page's loading is complete:
var world = tQuery.createWorld().boilerplate({cameraControls: false}).start();
world.tCamera().position.set( 70, 40, 70 );
world.tCamera().lookAt( world.tScene().position );
world.tRenderer().shadowMapEnabled = true;
world.tRenderer().shadowMapSoft = true;
world.tRenderer().setClearColorHex( 0xffffff, 1 );
world.enablePhysics();
Error given by FireBug:
TypeError: world.enablePhysics is not a function
world.enablePhysics();
Does anyone know what I can do to fix this problem,?
Feel free to talk about alternative too! :)
Thanks!
I guess tQuery project died, because last commit was made on Jul 25 2013. So you will have to work out without Jeromeetienne tQuery tutorials and his tQuery project. It seems that Jeromeetienne has started new extension system for threejs, called threex.
<blink>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.1/prototype.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js'></script>
<script type='text/javascript' src='/lightview.js'></script>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type="text/javascript" src="/photography/js/scrollable.js"></script>
<script>
// Use jQuery via jQuery(...)
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
// Use Prototype with $(...), etc.
$('div.box').hide();
</script>
</blink>
My code isnt working im not sure why?
any advice?
You need to use jQuery.noConflict() to release $ back to prototype, like this:
jQuery.noConflict(); //restore $ to prototype
jQuery(document).ready(function(){
jQuery("div.scrollable").hide();
});
$('div.box').hide();
Though jQuery can do show/hide, so you may not need both libraries, depending on what you're doing (for example, there are lightbox plugins for jQuery and scrollable plugins for prototype, so you could go either way with using a single library for everything).
You can also give it an alias from the $ restoring call, it returns a reference to jQuery, so you can do this:
var $j = jQuery.noConflict(); //restore $ to prototype
$j(function(){
$j("div.scrollable").hide();
});
$('div.box').hide();
Once I had the same problem, using Prototype and jQuery on the same page, and specifying the jQuery.noConflict() function, but my stuff didn't fade in/out right (stuff were jumping weird and sometimes only worked on the first animation). When I disabled Prototype, my jQuery code did exactly what it was supposed to do. I came to the conclusion the jQuery and Prototype have the same function names and these cause conflict in some way.
Disable Prototype temporarily and see if your jQuery code performs as expected.