48 lines
1.1 KiB
HTML
48 lines
1.1 KiB
HTML
<html>
|
|
<head>
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"three": "https://unpkg.com/three/build/three.module.js"
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- based on three.js example here: <https://jsfiddle.net/2nyxkmco/> -->
|
|
<script type="module">
|
|
import * as THREE from 'three';
|
|
|
|
const width = window.innerWidth, height = window.innerHeight;
|
|
|
|
// init
|
|
|
|
const camera = new THREE.PerspectiveCamera( 70, width / height, 0.01, 10 );
|
|
camera.position.z = 1;
|
|
|
|
const scene = new THREE.Scene();
|
|
|
|
const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
|
|
const material = new THREE.MeshNormalMaterial();
|
|
|
|
const mesh = new THREE.Mesh( geometry, material );
|
|
scene.add( mesh );
|
|
|
|
const renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
renderer.setSize( width, height );
|
|
renderer.setAnimationLoop( animation );
|
|
document.body.appendChild( renderer.domElement );
|
|
|
|
// animation
|
|
|
|
function animation( time ) {
|
|
mesh.rotation.x = time / 2000;
|
|
mesh.rotation.y = time / 1000;
|
|
|
|
renderer.render( scene, camera );
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|