<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>X3D Scene</title>
<script type="text/javascript" src="https://www.x3dom.org/download/x3dom.js"></script>
<link rel="stylesheet" type="text/css" href="https://www.x3dom.org/download/x3dom.css"/>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: #0c0c1a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
font-family: 'Courier New', monospace;
color: #7799ff;
}
h1 {
font-size: 12px;
letter-spacing: 0.35em;
text-transform: uppercase;
margin-bottom: 14px;
opacity: 0.75;
}
x3d {
width: 640px;
height: 480px;
border: 1px solid #223;
border-radius: 4px;
background: #0c0c1a;
}
p {
margin-top: 12px;
font-size: 11px;
letter-spacing: 0.15em;
color: #334;
}
</style>
</head>
<body>
<h1>X3D — Orbiting Primitives</h1>
<x3d width="640" height="480">
<scene>
<background skycolor="0.05 0.05 0.1"></background>
<navigationinfo type='"EXAMINE" "ANY"' headlight="true"></navigationinfo>
<viewpoint position="0 2 9" orientation="1 0 0 -0.22" description="Default View"></viewpoint>
<!-- Lighting -->
<directionallight direction="-1 -2 -1" intensity="0.8" color="0.8 0.85 1.0"></directionallight>
<pointlight location="3 5 3" intensity="1.5" color="0.5 0.6 1.0" radius="25" attenuation="0 0 0.1"></pointlight>
<!-- Animated rotation transform -->
<transform def="ORBIT_GROUP">
<timesensor def="TIMER" cycleinterval="7" loop="true"></timesensor>
<orientationinterpolator def="SPINNER"
key="0 0.5 1"
keyvalue="0 1 0 0 0 1 0 3.14159 0 1 0 6.28318">
</orientationinterpolator>
<route fromnode="TIMER" fromfield="fraction_changed" tonode="SPINNER" tofield="set_fraction"></route>
<route fromnode="SPINNER" fromfield="value_changed" tonode="ORBIT_GROUP" tofield="set_rotation"></route>
<!-- Sphere (center) -->
<transform translation="0 0 0">
<shape>
<appearance>
<material diffusecolor="0.2 0.4 0.9"
specularcolor="0.7 0.8 1.0"
emissivecolor="0.02 0.05 0.2"
shininess="0.85">
</material>
</appearance>
<sphere radius="0.85"></sphere>
</shape>
</transform>
<!-- Red Box -->
<transform translation="2.4 0.0 0.0">
<shape>
<appearance>
<material diffusecolor="0.9 0.2 0.35"
specularcolor="1.0 0.6 0.7"
emissivecolor="0.15 0.01 0.04"
shininess="0.75">
</material>
</appearance>
<box size="0.6 0.6 0.6"></box>
</shape>
</transform>
<!-- Green Cone -->
<transform translation="-2.4 0.0 0.0">
<shape>
<appearance>
<material diffusecolor="0.15 0.85 0.5"
specularcolor="0.5 1.0 0.7"
emissivecolor="0.01 0.12 0.04"
shininess="0.7">
</material>
</appearance>
<cone height="1.0" bottomradius="0.45"></cone>
</shape>
</transform>
<!-- Yellow Cylinder -->
<transform translation="0.0 0.0 2.4">
<shape>
<appearance>
<material diffusecolor="1.0 0.75 0.1"
specularcolor="1.0 0.95 0.6"
emissivecolor="0.15 0.1 0.0"
shininess="0.8">
</material>
</appearance>
<cylinder height="0.75" radius="0.3"></cylinder>
</shape>
</transform>
</transform>
<!-- Ground plane -->
<transform translation="0 -1.4 0">
<shape>
<appearance>
<material diffusecolor="0.1 0.15 0.45"
specularcolor="0.3 0.4 0.8"
shininess="0.5"
transparency="0.35">
</material>
</appearance>
<cylinder height="0.05" radius="3.5"></cylinder>
</shape>
</transform>
</scene>
</x3d>
<p>Drag to orbit · Scroll to zoom · Right-drag to pan</p>
</body>
</html>