three打造三维音乐卡通天使效果代码-html代码-BFW代码库

three打造三维音乐卡通天使效果代码

代码语言：html

所属分类：三维

代码描述：three打造三维音乐卡通天使效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
html,
body {
  margin: 0;
  height: 100%;
  background: #22124a;
  overflow: hidden;
  perspective: 10rem;
}

.container {
  width: 100%;
  height: 100%;
  display: block;
  position: relative;
}

#canvas {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.sky {
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: url("//repo.bfw.wiki/bfwrepo/image/603da313cc16a.png") repeat;
  background-size: cover;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
</style>



</head>

<body >
  <div class="container">
  <div class="sky"></div>
  <div id="canvas"></div>
</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>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
<script  type="text/javascript"  src='//repo.bfw.wiki/bfwrepo/js/RGBELoader.js'></script>
<script  type="text/javascript"  src='//repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script>
 .........完整代码请登录后点击上方下载按钮下载查看