How to get Physijs and Threejs to work together with tQuery - three.js

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.

Related

How do I load GLTFLoader from a cdn THREE.js

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.

cycle is not a function

I have the following page http://link.org/ (tested and is valid W3 HTML), where I am using the jquery cycle slideshow function (old version).
But even though the cycle function file is definitely being called, I am still getting an error: $(...).cycle is not a function
Would someone be able to look and see what the issue might be?
Thanks!
For some weird reason jQuery tools are invoking ready event before page is completely loaded, change order of scripts from:
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
to
<script type="text/javascript" src="includes/jquery.tools.min.js"></script>
<script type="text/javascript" src="includes/jquery.cycle.all.min.js"></script>
and your error will be gone.

unexpected behavior when including a personal three.js library

Caveat: The following was empirically determined.
If you are writing an app in Aframe, just be aware that you do not need to include a three.js lib in your html since AFrame ships with it's own version of three.js and the non-Aframe portions of your app can use this version of three.js as well. As a matter of fact, not only do you not need it, you should definitely not include it.
If you include your own version of three.js then AFrame will use that over the one it was built with. While most of the time this won't cause problems, it can lead to unpredictable results. For Instance, I was mixing Aframe-master.js v0.5, which assumes three.js v84 and also src'ing in three.js v85 and I received the following error messages:
Uncaught Error: `Entity.setObject3D` was called with an object that was not an instance of THREE.Object3D.
at HTMLElement.value (aframe-master.js:72729)
at aframe-master.js:66470
at aframe-master.js:48132
at ObjectLoader.parse (Three.js:32979)
at Three.js:32938
at XMLHttpRequest.<anonymous> (Three.js:29098)
After much research, I determined this is because in three.js v85 they dropped the blendCharacter object but aframe-master v0.5 is built against three.js v84 which still does have it and assumes it's there.
I was running mixed versions fine for a while, so it's a subtle error. If you do get a situation, you will most definitely get some other error. I'm just documenting this because I spent half a day trying to figure this out and maybe I can spare someone else the trouble.
If using AFrame, do not include three.js in your html:
<!doctype html>
<html lang="en">
<head>
<title>A-frame controller test</title>
<meta charset="utf-8">
<link rel="shortcut icon" href="">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script src="lib/aframe-master.js"></script>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="lib/Three.js"></script> <!-- remove this -->
<script src="lib/grab.js"></script>
<script src="js/main.js"></script>
<a-scene>
Look on the console and make sure Aframe and three.WebGlRenderer are using the same version:
Bad (mixed three.js 0.84 and 0.85):
A-Frame Version: 0.5.0 (Date 03-05-2017, Commit #31d05b0)
aframe-master.js:76936 three Version: ^0.84.0
aframe-master.js:76937 WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
THREE.WebGLRenderer 85dev
Good (three.js v.84 everywhere):
A-Frame Version: 0.5.0 (Date 03-05-2017, Commit #31d05b0)
aframe-master.js:76936three Version: ^0.84.0
aframe-master.js:76937WebVR Polyfill Version: dmarcos/webvr-polyfill#a02a8089b
aframe-master.js:24581 THREE.WebGLRenderer 84

Magento not allowing responsive design?

So earlier I was stumped on why my website becomes unreadable (this is my first theme I'm creating in Magento) when I scale the website down to a phone size or small tablet size using Resizer bookmarklet in Chrome. I've created multiple responsive designs and never had this problem.
I figured out it's because that this gets appended into the style attribute on the tag:
-webkit-transform: scale(0.6122448979591837); -webkit-transform-origin: 0px 0px; min-width: 980px;
How exactly do I find what's appending that to the html style attribute? I'm guessing that's just a thing magento does by default in one of the javascript files?
Because when I delete that off the style attribute on the html tag, the page loads fine with the font size readable and everything else like it originally would.
These are all the default js files that Magento loads:
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/prototype/prototype.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/lib/ccard.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/prototype/validation.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/builder.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/effects.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/dragdrop.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/controls.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/scriptaculous/slider.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/js.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/form.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/varien/menu.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mage/translate.js"></script>
<script type="text/javascript" src="http://clearchannel.halfoffdeals.com/js/mage/cookies.js"></script>
I'm not sure where this is coming from, but here's a tip. If you're working in Chrome, pull up the inspector (F12 on Windows).
Then, click the Elements tab (at upper-left). Right-click on the <html> node, and select Break On ... > Attributes Modifications. Then refresh your page.
If this is a JavaScript-driven problem, then the inspector should catch the change to the HTML element, and pause execution right at the line of the file which is adding these styles. That will tell you where the problem lies.
If it works, let me know and I can try to help further.

jQuery and Prototype - collision causes broken functionality

I'm restructuring a page for a client, and I'm having some issues with the jQuery code I implemented on the page.
There's a pop-up lightbox that uses Prototype which appears when the page loads, and then there's marquee/scrollers on the top and right that I put there that use jQuery. I'm really unsure about what's causing the error.
I'm familiar with jQuery's noConflict, but I've tried pretty much every variation of it on this page and I still get an error - after a few seconds the marquees stop - and IE displays that "Errors on page" dialog, referencing line 464 ("Array length must be assigned a finite positive number").
Here is the page: -link removed by author-
Here is prototype.js: -link removed by author-
I have absolutely no idea what is causing this error and JavaScript isn't my strongest side.
When I first started seeing this error, I was Googling around for more general "Prototype + jQuery" errors, when I should have been looking for a solution specific to the exact problem I was dealing with.
Adding the terms "array length" and "line 464" actually led me to the solution to this specific problem, and here it is:
Updated from prototype v1.4 to v1.5.1.2 (v1.7, the latest release,
didn't work right and even produced a stack overflow error).
Changed around the order of the scripts, and changed noConflict:
<script src="/scripts/jquery-1.5.2.js" type="text/javascript"></script>
<script src="/scripts/jquery.Scroller-1.0.src_4.js" type="text/javascript"></script><!-- all _$_'s replaced with _jQuery_ -->
<script type="text/javascript">
<!--
// more jquery, all $'s replaced with jQuery
-->
</script>
<script type="text/javascript">
<!--
jQuery.noConflict();
-->
</script>
<script src="scripts/prototype-1.5.1.2.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
// everything else, including prototype scripts
-->
</script>
And that's it! Now I don't get the "Line 464" error and all scripts work fine.
Thank you #Ken and #Diodeus for leading me to the solution.
You may need to go through the plugins and replace $( with jQuery(, since you need to use "jQuery..." instead of "$..." in no-conflict mode.
Surround the code that uses jQuery with
(function ($) {
... // Your code
})(jQuery)
This way it uses local $ which is bound to jQuery and and jQuery only.
Also it is considered a bad idea to use both frameworks on the same website. You can find jQuery replacements for pretty much all of Prototype plugins.
I would find plugins in the same library. jQuery has all the plugins you mentioned, so there's no need to try using both. These two libraries can be difficult to get working together.
If you're set on using both libraries, try this ordering:
1) other lib
2) jquery
3) noconflict call
4) all plugins
<script src="scripts/prototype.js" type="text/javascript"></script>
<script src="/scripts/jquery-1.5.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$.noConflict();
-->
</script>
<script src="/scripts/jquery.Scroller-1.0.src_3.js" type="text/javascript"></script>
<script src="scripts/lightbox.js" type="text/javascript"></script>

Resources