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>
Advertisement
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>
Web App Example
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>
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:
