I want to run an app created with three.js 1.49 on iOS. I tried the following sample, but nothing is displayed in Chrome (and Safari) on iOS, but in Chrome on Windows, it is displayed correctly.
How can I fix this?
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"three": "./js/three/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
window.addEventListener('DOMContentLoaded', init);
function init() {
const width = 960;
const height = 540;
const renderer = new THREE.WebGLRenderer({
canvas: document.querySelector('#canvas')
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(width, height);
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, width / height);
camera.position.set(0, 0, +1000);
const geometry = new THREE.BoxGeometry(400, 400, 400);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry, material);
scene.add(box);
tick();
function tick() {
box.rotation.y += 0.01;
renderer.render(scene, camera);
requestAnimationFrame(tick);
}
}
</script>
</head>
<body>
<canvas id="canvas" class="viewer"></canvas>
</body>