I'm really struggling to make the CSS3d renderer work, and it seems like basic Javascript is causing some issues.
Currently, I load all the Three.js libraries separately using Sid.js. When I try to add the CSS3DRenderer.js file through this method, I encounter
An error: Uncaught TypeError: undefined is not a function on renderer = new THREE.CSS3DRenderer();(it is being loaded after the Three.js library)
However, if I load it from the header, I face
An error: Uncaught ReferenceError: THREE is not defined
(cssrender line 6)
I am referencing this example here
Any suggestions on how to successfully load the CSS3d renderer?
EDIT
As an example, check out
The file where all the scripts are loaded via Sid.js can be found at
Sid.js([
"http://ajax.googleapis.com/ajax/libs/threejs/r67/three.min.js",
"../../resources/js/beekjs/three-css3d.min.js",
"../../resources/js/beekjs/Detector.js",
"../../resources/js/beekjs/beek.js",
"../../resources/js/beekjs/tween.min.js",
"../../resources/js/beekjs/scene.js"],
function(){
showProgress(0.4);
init();
}
);
The renderer section that triggers the error looks like:
renderer = new THREE.CSS3DRenderer(); (error occurs on this line)
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.domElement.style.position = 'absolute';
document.getElementById( 'container' ).appendChild( renderer.domElement );