This is a simple adaptation of the THREE.js starter demo, showing a dynamic import to load three from CDN without an importmap.
https://threejs.org/docs/#manual/en/introduction/Creating-a-scene
https://threejs.org/docs/#manual/en/introduction/Installation
This is intended to debug: https://dev.cables.gl/p/m5AmVD
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>three.js webgl - geometry - cube</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> | |
| <link type="text/css" rel="stylesheet" href="main.css"> | |
| </head> | |
| <body> | |
| <!-- <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js" | |
| } | |
| } | |
| </script> --> | |
| <script type="module"> | |
| // import * as THREE from 'three'; | |
| const THREE = await import("https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js"); | |
| console.log("THREE: ", THREE); | |
| let camera, scene, renderer; | |
| let mesh; | |
| function init() { | |
| console.log("init"); | |
| camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 100 ); | |
| camera.position.z = 2; | |
| scene = new THREE.Scene(); | |
| const geometry = new THREE.BoxGeometry(); | |
| const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); | |
| mesh = new THREE.Mesh( geometry, material ); | |
| scene.add( mesh ); | |
| renderer = new THREE.WebGLRenderer( { antialias: true } ); | |
| renderer.setPixelRatio( window.devicePixelRatio ); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| renderer.setAnimationLoop( animate ); | |
| document.body.appendChild( renderer.domElement ); | |
| window.addEventListener( 'resize', onWindowResize ); | |
| console.log("inited"); | |
| console.log("window: ", window); | |
| console.log("renderer: ", renderer); | |
| console.log(renderer.domElement); | |
| } | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| } | |
| function animate() { | |
| mesh.rotation.x += 0.005; | |
| mesh.rotation.y += 0.01; | |
| renderer.render( scene, camera ); | |
| } | |
| init(); | |
| </script> | |
| </body> | |
| </html> |
| body { | |
| margin: 0; | |
| background-color: #000; | |
| color: #fff; | |
| font-family: Monospace; | |
| font-size: 13px; | |
| line-height: 24px; | |
| overscroll-behavior: none; | |
| } | |
| a { | |
| color: #ff0; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| } | |
| button { | |
| cursor: pointer; | |
| text-transform: uppercase; | |
| } | |
| #info { | |
| position: absolute; | |
| top: 0px; | |
| width: 100%; | |
| padding: 10px; | |
| box-sizing: border-box; | |
| text-align: center; | |
| -moz-user-select: none; | |
| -webkit-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| pointer-events: none; | |
| z-index: 1; /* TODO Solve this in HTML */ | |
| } | |
| a, button, input, select { | |
| pointer-events: auto; | |
| } | |
| .lil-gui { | |
| z-index: 2 !important; /* TODO Solve this in HTML */ | |
| } | |
| @media all and ( max-width: 640px ) { | |
| .lil-gui.root { | |
| right: auto; | |
| top: auto; | |
| max-height: 50%; | |
| max-width: 80%; | |
| bottom: 0; | |
| left: 0; | |
| } | |
| } | |
| #overlay { | |
| position: absolute; | |
| font-size: 16px; | |
| z-index: 2; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| background: rgba(0,0,0,0.7); | |
| } | |
| #overlay button { | |
| background: transparent; | |
| border: 0; | |
| border: 1px solid rgb(255, 255, 255); | |
| border-radius: 4px; | |
| color: #ffffff; | |
| padding: 12px 18px; | |
| text-transform: uppercase; | |
| cursor: pointer; | |
| } | |
| #notSupported { | |
| width: 50%; | |
| margin: auto; | |
| background-color: #f00; | |
| margin-top: 20px; | |
| padding: 10px; | |
| } |