threewebcomponents/index.html

57 lines
1.3 KiB
HTML
Raw Permalink Normal View History

2023-05-26 13:33:36 -04:00
<!DOCTYPE html>
<html>
<head>
<script type="module">
import * as THREE from 'https://esm.sh/three';
import './ThreeRendererElement.js'
import './ThreeCube.js';
import './ThreeGroup.js';
import './ThreeLight.js';
import './ThreeScene.js';
import './ThreeSphere.js';
document.addEventListener('DOMContentLoaded', function() {
var group = document.querySelector('three-group');
var sphere = document.querySelector('three-sphere');
});
</script>
<style>
html, body {
height: 100%;
}
@keyframe position {
from {
x: 140;
}
to {
x: 0;
}
}
three-cube.left {
animation-duration: 3s;
animation-name: position;
x: 0;
}
</style>
</head>
<body>
<canvas is=three-renderer>
<three-scene name="main">
<three-light color="#ee00aa"></three-light>
<three-cube color="#ffffff" height=40 width=90 depth=10 x=0 y=40 z=-200 focus></three-cube>
<three-sphere color="#a0a00f" radius=30 x=0 y=40 z=-200 focus></three-sphere>
<three-group x=35 y=20 rz=30>
<three-cube color="#ffffff" height=40 width=90 depth=10 x=0 y=40 z=-200 focus></three-cube>
<three-sphere color="#a0a00f" radius=30 x=0 y=40 z=-200 focus></three-sphere>
</three-group>
</three-scene>
</canvas>
</body>
</html>