x_ite
Version:
X_ITE X3D Browser, view and manipulate X3D, VRML, glTF and other 3D sources in HTML.
77 lines (68 loc) • 2.04 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<script defer src="x_ite.min.js"></script>
<!-- or use: -->
<!-- <script defer src="https://cdn.jsdelivr.net/npm/x_ite@12.2.3/dist/x_ite.min.js"></script> -->
<style>
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400&family=Source+Sans+3:ital,wght@0,400&display=swap");
@media (prefers-color-scheme: light) {
:root {
--text-color: rgb(42, 42, 42);
--background-color: white;
--link-color: rgb(0, 86, 178);
--link-hover-color: rgb(210, 96, 58);
}
}
@media (prefers-color-scheme: dark) {
:root {
--text-color: rgb(175, 176, 177);
--background-color: rgb(27, 27, 30);
--link-color: rgb(82, 108, 150);
--link-hover-color: rgb(210, 96, 58);
}
}
body {
color-scheme: light dark;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin: 0px;
padding: 0px;
height: 100vh;
background-color: var(--background-color);
color: var(--text-color);
font-family: "Source Sans 3", sans-serif;
font-size: 1.08rem;
}
body > * {
flex: 0 0 auto;
padding: 0px 1rem;
}
h1 {
font-family: Lato, sans-serif;
}
x3d-canvas {
flex: 1 1 auto;
box-sizing: border-box;
border-top: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
border-bottom: 1px solid color-mix(in srgb, var(--text-color), transparent 90%);
padding: 0px;
width: 100%;
height: 100%;
}
a {
color: var(--link-color);
}
a:hover {
color: var(--link-hover-color);
}
</style>
</head>
<body>
<h1>X_ITE X3D Browser</h1>
<x3d-canvas src="https://create3000.github.io/media/x_ite/info/info.x3d"></x3d-canvas>
<p>Made with <a href="https://create3000.github.io/x_ite/" target="_blank">X_ITE X3D Browser</a>. If local files are not loaded <a href="https://create3000.github.io/x_ite/setup-a-localhost-server">consider setup a localhost server</a> or use <a href="https://create3000.github.io/x_ite/dom-integration">DOM integration methods</a>.</p>
</body>
</html>