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'
Related
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.
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.
In paperjs, you need to associate canvas element for the js file:
<script type="text/paperscript" canvas="myCanvas">
//your code
</script>
I wonder how i could do this in ace (live coding editor)?
I have a canvas and also the editor in the same page, and i want to code in the editor to control the canvas.
How could i do that?
thanks.
We do exactly this over at http://sketch.paperjs.org/
Look at the createPaperScript () function in http://sketch.paperjs.org/assets/js/editor.js
I am creating a blocks in my controller using
$this->_addContent($this->getLayout()->createBlock('mymodule/mymodule_newpage')
Is there any way how I can embed js code into the addcontent function. I dont want to add complete js but a chunk of code.
Thanks
You can add that particular js file in your static block (mymodule/mymodule_newpage) by writing it under content tab.
<script type="text/javascript" src="http://your_site.com/js/your_js_file.js"></script>
Though I am not 100% sure.Give a try.Goodluck.
You can try:
$this->_addContent($this->getLayout()->createBlock('core/text')->setText('your script here'));
Obs: I could not make sintax highlight fpr PHP work anymore...