<div class="model">
<div id="container3d_replace"></div>
<div class="loadingContent" id="loadingContent">
<div class="loading">
<img src="https://codepencdn.unlimited3d.com/changeMaterials/assets/images/loader.gif?v=0.1" alt="loader"
class="loading-img"><br>
</div>
</div>
</div>
<input type="text" name="text_input" id="text_input" oninput="onInput(this)">
<script src="https://cdn.threedium.co.uk/deviceCheck/v1.0/script.js"></script>
<script src="https://distcdn.unlimited3d.com/pres/v/2.6.0/unlimited3d.min.js"></script>
body, html {
margin:0;
overflow: hidden;
font-size: 16px;
font-family: Century Gothic Std;
background: #EEEEEE;
}
@font-face {
font-family: Century Gothic Std;
src: url("https://codepencdn.unlimited3d.com/changeMaterials/assets/fonts/Century Gothic Std Regular.otf");
}
img {
height: auto;
width: auto;
object-fit: contain;
object-position: top center;
}
.objCover {
object-fit: cover;
}
.loadingContent {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
font-size: 1.1rem;
font-weight: 400;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: normal;
color: #000;
background-color: rgba(0, 0, 0, 0.3);
display: flex;
justify-content: center;
flex-direction: column;
}
.loading{
width: 100%;
}
.loadingContent img {
width: 140px;
height: auto;
}
.model,
#container3d_replace {
width: 100vw;
height: 100vh;
}
#text_input{
position: absolute;
left: 50%;
bottom: 3rem;
transform: translate(-50%, 0);
}
@media (max-width: 1399px) {
html, body {
font-size: 15px;
}
}
@media (max-width: 1199px) {
html, body {
font-size: 14px;
}
}
@media (max-width: 991px) {
html, body {
font-size: 13px;
}
}
@media (max-width: 767px) {
html, body {
font-size: 12px;
height: 100%;
}
}
@media (max-width: 575px) {
html, body {
font-size: 10px;
}
}
@media (max-width: 360px) {
}
var options = {
distID: 'latest',
solution3DName: 'demo-ring-new-shader-configurator',
projectName: 'tests',
solution3DID: '47143',
containerID: 'container3d_replace',
};
Unlimited3D.init(options, {}, function (error, status) {
if (error || !status) {
console.log(error);
return;
}
loadingContent.style.display = "none";
});
function onInput(element) {
Unlimited3D.updateOverlay({
overlay: 'Metallic',
overlayEntry: 'Text',
options: {
text: element.value,
}
});
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.