Utilize three.js within a Google web app script - unable to incorporate the script module type for loading three.js

Question

Utilize three.js within a Google web app script - unable to incorporate the script module type for loading three.js

Looking to incorporate three.js into a Google Web Script to load 3D CAD files, I discovered that the installation instructions on threejs.org specify the script needs to be of "module" type. However, after researching for several days, it seems that Google Web App Script does not support the "module" type.

Has anyone successfully used three.js with a Google Script before? Any insights or experiences shared would be greatly appreciated. Otherwise, I may have to reconsider my approach to loading CAD data on the web app I am developing.

<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 google-apps-script three.js

Answer 1

Answer №1

No Support for Modules in Apps Script

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

Warning: ES6 modules are not currently compatible.

However, you can treat the script like a library such as jQuery.

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

Example of a Web App

Code.gs

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>

Derived from:

Outcome

Upon deploying this as a Web App, the result obtained is shown below:

https://i.sstatic.net/v7eTy.gif

Resources

V8 Runtime
three js Docs

Answer 2

No Support for Modules in Apps Script

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

Warning: ES6 modules are not currently compatible.

However, you can treat the script like a library such as jQuery.

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

Example of a Web App

Code.gs

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>

Derived from:

Outcome

Upon deploying this as a Web App, the result obtained is shown below:

https://i.sstatic.net/v7eTy.gif

Resources

V8 Runtime
three js Docs

Utilize three.js within a Google web app script - unable to incorporate the script module type for loading three.js

Answer №1

No Support for Modules in Apps Script

Example of a Web App

Outcome

Resources

Similar questions

How can I ensure my game or website fits perfectly on the screen without any need

Hold off on continuing the script until the AJAX response has been received

convert HTML string into a React component using a customized parser

Is there a way to resolve the execution order dependency of JS-CF using a server-side callback function?

A guide on simulating an emit event while testing a Vue child component using Jest

the ultimate guide to leveraging a single slot to edit various columns within data tables

Initiate the command with given parameters

Styling with the method in React is a beneficial practice

Encountered an error while trying to access an undefined property during an Angular Karma

Upon initialization, navigate to the specified location in the route by scrolling

Using TypeScript with Node.js and Sequelize - the process of converting a value to a number and then back to a string within a map function using the OR

JQuery selector is successfully working while vanilla JavaScript is not functioning as expected

Encountering difficulties while using JavaScript to complete a form due to issues with loading the DOM

The functionality of `config.assets.debug = true` fails to

Exploring the Possibilities: Incorporating xlsx Files in Angular 5

Modifying an element's value according to user input: Step-by-step guide

Attempting to conceal the select input and footer components of the Calendar component within a React application

Leverage Vue's ability to assign data from a parent component to

Error: Authorization token is required

Using ES6 syntax, ignite the React function