model-viewer加载显示glb三维鞋子模型并通过滚动旋转模型效果代码-html代码-BFW代码库

model-viewer加载显示glb三维鞋子模型并通过滚动旋转模型效果代码

代码语言：html

所属分类：三维

代码描述：model-viewer加载显示glb三维鞋子模型并通过滚动旋转模型效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  
  
<style>
@keyframes foo {
	to {
		scale: 1;
	}
}

model-viewer {
	display: block;
	width: 100%;
	height: 95vh;
	position: fixed;
	animation: foo linear both;
	animation-timeline: scroll(block root);
	z-index: -1;
}

model-viewer::part(default-progress-bar) {
	display: none;
}

header,
footer {
	position: fixed;
	left: 0;
	right: 0;
	text-align: center;
	font-style: italic;
}
header {
	top: 1em;
}
footer {
	bottom: 0;
}

html {
	height: 400vh;
}

body {
	font-family: helvetica;
}

@layer warning {
	.warning {
		box-sizing: border-box;
		padding: 1em;
		margin: 1em 0;
		border: 1px solid #ccc;
		background: rgba(255 255 205 / 0.8);

		position: fixed;
		top: 40vh;
		font-size: 2em;
		left: 1em;
		right: 1em;
		max-width: 80ch;
		margin: 0 auto;
		z-index: 1000;
	}

	.warning > :first-child {
		margin-top: 0;
	}

	.warning > :last-child {
		margin-bottom: 0;
	}

	.warning a {
		color: blue;
	}
	.warning--info {
		border: 1px solid #123456;
		background: rgb(205 230 255 / 0.8);
	}
	.warning--alarm {
		border: 1px solid red;
		background: #ff000010;
	}

	@supports (animation-timeline: view()) {
		.warning:not([data-bug]) {
			display: none;
		}
	}
.........完整代码请登录后点击上方下载按钮下载查看