JavaScript

I would like to use three.js in the google web script to load 3D CAD file, while in the installation instruction on threejs.org it explains the script need to be “module” type. At the same time, it looks like the google web app script does not support the “module” after I googled around for several days.

Is there anyone ever used three.js for google script? Thanks a lot for sharing your experience. otherwise I have to give up my idea to load CAD data on the web app I am building.

<script type="module">

  // Find the latest version by visiting https://unpkg.com/three. The URL will
  // redirect to the newest stable release.
  import * as THREE from 'https://unpkg.com/three/build/three.module.js';

  const scene = new THREE.Scene();

</script>

JavaScript
​x
 
<script type="module">
​
  // Find the latest version by visiting https://unpkg.com/three. The URL will
  // redirect to the newest stable release.
  import * as THREE from 'https://unpkg.com/three/build/three.module.js';
​
  const scene = new THREE.Scene();
​
</script>
​

Answer

Modules are not supported with Apps Script

From: https://developers.google.com/apps-script/guides/v8-runtime#modern_ecmascript_syntax

Caution: ES6 modules are not yet supported.

You can however call the script like you would a library such as jQuery.

<script src="https://threejs.org/build/three.js"></script>

JavaScript
 
<script src="https://threejs.org/build/three.js"></script>
​

Web App Example

Code.gs

function doGet(){
 HTMLOutput = HtmlService.createHtmlOutputFromFile('index.html')
 return HTMLOutput
}

JavaScript
 
function doGet(){
 HTMLOutput = HtmlService.createHtmlOutputFromFile('index.html')
 return HTMLOutput
}
​

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="https://threejs.org/build/three.js"></script>
        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

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

            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 5;

            const animate = function () {
                requestAnimationFrame( animate );

                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;

                renderer.render( scene, camera );
            };

            animate();
        </script>
    </body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
    <head>
        <title>My first three.js app</title>
        <style>
            body { margin: 0; }
        </style>
    </head>
    <body>
        <script src="https://threejs.org/build/three.js"></script>
        <script>
            const scene = new THREE.Scene();
            const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
​
            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
​
            const geometry = new THREE.BoxGeometry();
            const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );
​
            camera.position.z = 5;
​
            const animate = function () {
                requestAnimationFrame( animate );
​
                cube.rotation.x += 0.01;
                cube.rotation.y += 0.01;
​
                renderer.render( scene, camera );
            };
​
            animate();
        </script>
    </body>
</html>
​

Adapted from: https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene

Result

When deploying this as a Web App I get this result:

Use three.js in google web app script – not able to use the script module type to load three.js

Advertisement

Answer

Modules are not supported with Apps Script

Web App Example

Result

References