My code is throwing an error that says: Uncaught ReferenceError: THREE is not defined
module game {
export class Add3DScene extends dragonwings.Command {
@inject('ResponsiveDiv') protected _responsiveDiv: components.ResponsiveDiv;
public execute(): void {
super.execute();
var scene = new THREE.Scene();
}
}
}
I am unable to implement this solution as I don't have access to the embedding html
Even though I tried this solution by adding the shim, it didn't solve the issue and I struggled with incorporating the define wrapper in my typescript.
Although I can see three.min.js loaded in chrome debugger
The use of requirejs seems to be causing complications based on my online research. Here is a simplified version of my configuration
requirejs.config({
baseUrl: "content/${gamecode}/lib",
paths: {
TweenMax: "gsap/TweenMax",
THREE: "three/three.min",
},
shim:
{
'THREE': {
exports: 'THREE'
},
'game_libs': {
deps: ['stats', 'TweenMax']
},
'../app/js/main': {
deps: ['game_libs']
},
}
});
I would appreciate any help
**Edit after reading Require.js not loading Three.js my other modules are no longer defined and I have not been able to proceed with the code execution that I originally posted about new require configuration
define("three-glue", ["three"], function (three) {
window.THREE = three;
return three;
});
requirejs.config({
baseUrl: "content/${gamecode}/lib",
waitSeconds: 60,
paths: {
TweenMax: "gsap/TweenMax",
three: "three/three.min",
},
map: {
'*': {
three: 'three-glue'
},
'three-glue': {
three: 'three'
},
shim:
{
'game_libs': {
deps: [
'TweenMax'
]
},
'../app/js/main': {
deps: ['game_libs']
},
}
}
});