1

In a module I would like to use three.js in a block .phtml

I then tried the following way to use thrid party js : link

(the first example with custom.js)

It works fine. I then added three.js in requirejs-config.js

var config = {
    map: {
        "*": {
            custom: "Vendor_Module/js/custom/custom",
            three: "Vendor_Module/js/three/build/three"
        }

    }
};

and in my phtml file :

<script type="text/javascript">
    require(['custom','three'],function(custom,three){
        alert(custom.message);
    });
</script>

the reference to three is working, but How can I execute it and access the vars it generates (like for example THREE)?

Here is the link to three.js source code : source code

Thank you for your help,

EDIT 1 :

.phtml file :

<script type="text/javascript">
    require(['custom','three'],function(custom,three){
        alert(custom.message);
        var camera, scene, renderer;
        var mesh;
        init();
        function init() {
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 400;
            scene = new THREE.Scene();
            var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
            var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
            var material = new THREE.MeshBasicMaterial( { map: texture } );
            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            //
            window.addEventListener( 'resize', onWindowResize, false );
        }
    });
</script>

generates THREE is not defined error

EDIT 2 (updated):

full three.js example

<div>
<script type="text/javascript">
    require(['custom','three'],function(custom,THREE){

        var camera, scene, renderer;
        var mesh;
        init(THREE);
        animate();
        });

        function init(THREE) {
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 400;
            scene = new THREE.Scene();
            var texture = new THREE.TextureLoader().load( "<?php echo $this->getViewFileUrl('Vendor_Module::images/textures/crate.gif'); ?>" );
            var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
            var material = new THREE.MeshBasicMaterial( { map: texture } );
            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            //
            window.addEventListener( 'resize', onWindowResize, false );
        }
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
        }
        function animate() {
            requestAnimationFrame( animate );
            mesh.rotation.x += 0.005;
            mesh.rotation.y += 0.01;
            renderer.render( scene, camera );
        }

</script>
</div>

EDIT3:

I would like now to add ThreeCSG.js

I updated requirejs-config.js

var config = {
    map: {
        "*": {
            three: "Vendor_Module/js/three/build/three",
            threecsg: "Vendor_Module/js/ThreeCSG/ThreeCSG"
        },
    }
};

and try to make :

<script type="text/javascript">
require(['three','threecsg'],function(THREE){
    var camera, scene, renderer;
    var mesh;
    init(THREE);
    render();
    //animate();
    }); 
    function init(THREE) {

        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
        camera.position.z = 20;
        scene = new THREE.Scene();
        ...
        mesh=createCSG(THREE);
        ...
    }

    function createCSG(THREE) {
        var geometry1 = new THREE.BoxBufferGeometry( 100, 100, 2 );
        var geometry2 = new THREE.BoxBufferGeometry( 10, 10, 2 );
        var material1 = new THREE.MeshStandardMaterial({color: 0x111111, roughness: 0.1, metalness: 0.4, side: THREE.DoubleSide});

        var geometry1_csg=new ThreeBSP(geometry1);
        var geometry2_csg=new ThreeBSP(geometry2);
        var res=geometry1_csg.substract(geometry2_csg);
        var result=res.toMesh(material1);

        return result;
    }
</script>

But I have an error:

THREE is not defined in ThreeCSG.js

(Link to ThreeCSG.Js : here)

2
  • You can use as three.extractRotation(), three.makeRotationFromEuler() Nov 8 '17 at 10:54
  • please let me know if you have issue Nov 8 '17 at 11:09
1

You can check with below code,

<script type="text/javascript">
    require(['custom','three'],function(custom,THREE){
        alert(custom.message);
        var camera, scene, renderer;
        var mesh;
        init(THREE);
    });

        function init(THREE) {
            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 400;
            scene = new THREE.Scene();
            var texture = new THREE.TextureLoader().load( 'textures/crate.gif' );
            var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
            var material = new THREE.MeshBasicMaterial( { map: texture } );
            mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );
            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            //
            window.addEventListener( 'resize', onWindowResize, false );
        }
</script>
3
  • seems to load, but the full three.js example does not work (EDIT2)
    – Alexglvr
    Nov 8 '17 at 12:36
  • you need to keep function outside of requirejs as per above answer. Nov 8 '17 at 12:41
  • Hi Rakesh. If you are still there, could you please have a look at my Edit3 please?
    – Alexglvr
    Nov 13 '17 at 19:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.