Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AMD Support (require.js / node loader) #3883

Closed
sonicsnes opened this issue Sep 19, 2013 · 7 comments

Comments

Projects
None yet
5 participants
@sonicsnes
Copy link

commented Sep 19, 2013

It appears that mrdoob even completed the work in the comments #2084 , but the pull was closed and I can't seem to find the issue anywhere.

Jquery has very good node / amd loader support nowadays and may be worth a look (see the bottom of http://code.jquery.com/jquery-1.10.2.js )

sonicsnes added a commit to sonicsnes/three.js that referenced this issue Sep 19, 2013

For mrdoob#3883 and mrdoob#3884
Don't touch console global
Export lib as node module, AMD module, and window global
@sonicsnes

This comment has been minimized.

Copy link
Author

commented Sep 19, 2013

Covered by pull request #3885

@mrdoob

This comment has been minimized.

Copy link
Owner

commented Sep 19, 2013

Somehow I had the impression that the builder had an option for that. But seems like it doesn't.

@cecilemuller

This comment has been minimized.

Copy link
Contributor

commented Jan 5, 2014

The main library seems to work fine with require.js if you use the shim parameter:

require.config({
    paths: {
        three: 'libs/r64/three.min.js'
    },
    shim: {
        three: {
            exports: 'THREE'
        }
    }
});


require(
    ['three'],
    function(THREE){
        'use strict';

        var camera, scene, renderer;
        var geometry, material, mesh;

        init();
        animate();

        function init(){
            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
            camera.position.z = 1000;

            scene = new THREE.Scene();

            geometry = new THREE.CubeGeometry( 200, 200, 200 );
            material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            renderer = new THREE.CanvasRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );

            document.body.appendChild( renderer.domElement );
        }

        function animate(){
            requestAnimationFrame( animate );

            mesh.rotation.x += 0.01;
            mesh.rotation.y += 0.02;

            renderer.render( scene, camera );
        }

    }
);

However things like OBJLoader (that assume the THREE global exists) indeed don't seem compatible as-is.

@cecilemuller

This comment has been minimized.

Copy link
Contributor

commented Feb 9, 2014

Err, I must have been tired when I posted because I just tried again and this time the shim works fine even with files that extend the THREE namespace, so here's for example a working require.js version of this SSAO example:

require.config({
    paths: {
        THREE: 'build/three.min',
        Detector: 'examples/js/Detector',
        CopyShader: 'examples/js/shaders/CopyShader',
        SSAOShader: 'examples/js/shaders/SSAOShader',
        EffectComposer: 'examples/js/postprocessing/EffectComposer',
        RenderPass: 'examples/js/postprocessing/RenderPass',
        MaskPass: 'examples/js/postprocessing/MaskPass',
        ShaderPass: 'examples/js/postprocessing/ShaderPass'
    },
    shim: {
        THREE: {
            exports: 'THREE'
        },
        Detector: {
            exports: 'Detector'
        },
        CopyShader: {
            deps: ['THREE']
        },
        SSAOShader: {
            deps: ['THREE']
        },
        EffectComposer: {
            deps: ['THREE']
        },
        RenderPass: {
            deps: ['THREE']
        },
        MaskPass: {
            deps: ['THREE']
        },
        ShaderPass: {
            deps: ['THREE']
        }
    }
});


require(
    ['THREE', 'Detector', 'CopyShader', 'SSAOShader', 'EffectComposer', 'RenderPass', 'MaskPass', 'ShaderPass'],
    function loaded_dependencies(THREE, Detector){
        'use strict';

        if (!Detector.webgl){
            alert('WebGL is not supported');
            return;
        }

        var camera, scene, renderer;
        var group;
        var depthMaterial, depthTarget, composer;

        function init() {
            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 10, 1000);
            camera.position.z = 500;

            scene = new THREE.Scene();
            group = new THREE.Object3D();
            scene.add(group);

            var geometry = new THREE.CubeGeometry(10, 10, 10);
            var material = new THREE.MeshBasicMaterial({
                color: 0xff0000
            });

            for (var i = 0; i < 100; i ++){
                var mesh = new THREE.Mesh(geometry, material);
                mesh.position.x = Math.random() * 400 - 200;
                mesh.position.y = Math.random() * 400 - 200;
                mesh.position.z = Math.random() * 400 - 200;
                mesh.rotation.x = Math.random();
                mesh.rotation.y = Math.random();
                mesh.rotation.z = Math.random();
                mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 10 + 1;
                group.add( mesh );
            }

            // depth
            var depthShader = THREE.ShaderLib.depthRGBA;
            var depthUniforms = THREE.UniformsUtils.clone( depthShader.uniforms );
            depthMaterial = new THREE.ShaderMaterial( { fragmentShader: depthShader.fragmentShader, vertexShader: depthShader.vertexShader, uniforms: depthUniforms } );
            depthMaterial.blending = THREE.NoBlending;

            // postprocessing
            composer = new THREE.EffectComposer( renderer );
            composer.addPass( new THREE.RenderPass( scene, camera ) );
            depthTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );

            var effect = new THREE.ShaderPass( THREE.SSAOShader );
            effect.uniforms.tDepth.value = depthTarget;
            effect.uniforms.size.value.set( window.innerWidth, window.innerHeight );
            effect.uniforms.cameraNear.value = camera.near;
            effect.uniforms.cameraFar.value = camera.far;
            effect.renderToScreen = true;
            composer.addPass( effect );
        }

        function animate() {
            requestAnimationFrame(animate);

            var timer = performance.now();
            group.rotation.x = timer * 0.0002;
            group.rotation.y = timer * 0.0001;

            scene.overrideMaterial = depthMaterial;
            renderer.render( scene, camera, depthTarget );

            scene.overrideMaterial = null;
            composer.render();
        }

        init();
        animate();

    },
    function dependencies_failed(err){
        'use strict';
        console.error(err);
    }
);
@craftfortress

This comment has been minimized.

Copy link

commented Apr 28, 2015

I am having some trouble with CSSRenderer. Could someone be kind enough to cast an eye over this?

// Load modules and use them
require.config({
    baseUrl: '/js/',
    paths:{
    THREE : 'three.min', 
    CSS3DRenderer : 'CSS3DRenderer' 
        },
    shim: {
        THREE : { exports: 'THREE' } ,
        CSS3DRenderer : { 
        deps:['THREE'],
        exports: 'CSS3DObject'} 
    }
});

require([ 'THREE' , 'CSS3DRenderer'] , function awesome(){return;} );

Results in : Error THREE is undefined

:/

@mrdoob mrdoob closed this Sep 3, 2015

@henriqueluz

This comment has been minimized.

Copy link

commented Oct 18, 2016

I am facing a problem with TrackballControls and RequireJS:

require.config({
    baseUrl: "",
    paths: {
    "three" : "path/to/three",
    "TrackballControls" : "path/to/TrackballControls" 
    },
    shim: {
        "three": { exports: "THREE" } ,
        "TrackballControls" : { 
           deps:['three'],
           exports: "THREE"} 
        }
});

require(['THREE' , 'TrackballControls'] , function(THREE){} );
@mrdoob

This comment has been minimized.

Copy link
Owner

commented Oct 18, 2016

@henriqueluz have a read at #9602

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.