영상용 컨테이너
3D모델용 코드
우측은 마우스 3D모델을 보기 위한 예시 코드입니다.
우측의 내용 중에 파일 주소를 기입하라고 되어 있는 부분만 파일을 업로드하시고 그 주소를 입력해주시면 됩니다.
우측 코드는 보여주기 위한 예시이며, 아래의 HTML 코드로 발현시켜둔 것을 카피 후 붙여넣기로 넣으실 수 있습니다.(컨테이너 통채로 복사 붙여넣기)
카피가 잘 되지 않을 경우, 코드를 전체 카피하시고 해당 작성 페이지에서 좌측 상단의 ‘+’ 버튼을 클릭하고, html을 입력하여 HTML 위젯을 찾아서 넣고 해당 코드를 붙여 넣기를 실시합니다.
코드 예시
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<style>
.mv-wrap{ width:100%; margin:0 auto; }
model-viewer{
width:100%;
height:60vh;
background-color: transparent;
outline:none;
}
@media (max-width: 480px){
model-viewer{ height:50vh; }
}
</style>
<div class="mv-wrap">
<model-viewer
src="https://archifactory.kr/wp-content/uploads/2025/11/mouse.glb"/*<- 여기에 파일 주소를 기입하세요*/
camera-controls
auto-rotate
autoplay
ar
ar-modes="webxr scene-viewer quick-look"
shadow-intensity="1"
exposure="1"
environment-image="neutral"
reveal="auto"
tone-mapping="aces"
touch-action="pan-y"
loading="eager"
crossorigin="anonymous"
>
</model-viewer>
</div>
