Add OrbitControls to a Google Sites page embed code

Questions
1

Hi, I’ve successfully embedded a three.js small snippet into a Google Sites page, but so far, I have been unable to import and use OrbitControls for user camera interaction.
Here is the working code (it can be tested on any page in a Google Site by clicking Insert > Embed and pasting the code there):

<div>

<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/three@v0.157.0/build/three.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/three@v0.157.0/examples/jsm/OrbitControls.js"></script>

<script type="text/javascript">
// Scene
const scene = new THREE.Scene();

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00cccc });
const mesh = new THREE.Mesh(geometry, material);
const linegeo = new THREE.EdgesGeometry(mesh.geometry, 30);
const linemat = new THREE.LineBasicMaterial({color:"white", linewidth: 2});
const wireframe = new THREE.LineSegments(linegeo, linemat);
wireframe.renderOrder = 1;
mesh.add(wireframe);
scene.add(mesh);

// Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 3;
scene.add(camera);

// Axes Helper
const axesHelper = new THREE.AxesHelper(2);
scene.add(axesHelper);

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

// OrbitControls Initialization 
// import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/three@v0.157.0/examples/jsm/controls/OrbitControls.js';
// const controls = new OrbitControls( camera, renderer.domElement );

// Animation Loop
renderer.setAnimationLoop(animate);
function animate() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    
    // Update controls before rendering for damping to work properly
    // controls.update();
    
    renderer.render(scene, camera);
}
</script>

</div>

The OrbitControls Initialization is commented. If I uncomment even the import {OrbitControls} statement alone, the code doesn’t work anymore.

I have already used OrbitControls before, but never on a Google Site page. Does anyone have any idea how to properly add OrbitControls in this case? I’m probably missing something obvious, but I can’t seem to see it…

2

Try this (switched to older non-module version & fixed URL). In Preview mode the controls work fine:

<div>

<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/three@v0.147.0/build/three.min.js"></script>
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/three@v0.147.0/examples/js/controls/OrbitControls.js"></script>

<script type="text/javascript">
// Scene
const scene = new THREE.Scene();

// Object
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00cccc });
const mesh = new THREE.Mesh(geometry, material);
const linegeo = new THREE.EdgesGeometry(mesh.geometry, 30);
const linemat = new THREE.LineBasicMaterial({color:"white", linewidth: 2});
const wireframe = new THREE.LineSegments(linegeo, linemat);
wireframe.renderOrder = 1;
mesh.add(wireframe);
scene.add(mesh);

// Camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.z = 3;
scene.add(camera);

// Axes Helper
const axesHelper = new THREE.AxesHelper(2);
scene.add(axesHelper);

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

// OrbitControls Initialization 
 const controls = new THREE.OrbitControls( camera, renderer.domElement );

// Animation Loop
renderer.setAnimationLoop(animate);
function animate() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    
    // Update controls before rendering for damping to work properly
    // controls.update();
    
    renderer.render(scene, camera);
}
</script>

</div>
3

It works! Thank you so much!

See it in action: Home