three实现三维圣诞节圣诞树彩灯礼物文字动画场景效果代码-html代码-BFW代码库

three实现三维圣诞节圣诞树彩灯礼物文字动画场景效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维圣诞节圣诞树彩灯礼物文字动画场景效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    * {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
}
canvas {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  z-index: 0;
}
:root {
  --outside-border-size: 1px;
  --outside-margin: 3px;
  --inside-border-size: 3px;
  --inside-margin: 3px;
}
#deco-border {
  border: var(--outside-border-size) solid #ffd700;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(
    100% - var(--outside-border-size) * 2 - var(--outside-margin) * 2
  );
  height: calc(
    100% - var(--outside-border-size) * 2 - var(--outside-margin) * 2
  );
  z-index: 1;
  margin: var(--outside-margin);
  pointer-events: none;
}
#deco-border:after {
  border: var(--inside-border-size) solid #ffd700;
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - var(--inside-border-size) * 2 - var(--inside-margin) * 2);
  height: calc(100% - var(--inside-border-size) * 2 - var(--inside-margin) * 2);
  z-index: 1;
  margin: var(--inside-margin);
  content: "";
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<!-- using three.js -->
<div id="deco-border"></div>
<script type="x-shader/x-vertex" id="vertexshader">
  varying vec2 vUv;
	void main() {
		vUv = uv;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
  uniform sampler2D baseTexture;
	uniform sampler2D bloomTexture;
	varying vec2 vUv;
	void main() {
		gl_FragColor = ( texture2D( baseTexture, vUv ) + vec4( 1.0 ) * texture2D( bloomTexture, vUv ) );
	}
</script>
<!-- partial -->
 <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.145.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MeshSurfaceSampler.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.146.js"></script>
<script type="text/javascript&qu.........完整代码请登录后点击上方下载按钮下载查看