57 lines
1.3 KiB
HTML
57 lines
1.3 KiB
HTML
<!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>
|