three实现三维骷颅头在卡片视觉差异燃烧动画效果代码-html代码-BFW代码库

three实现三维骷颅头在卡片视觉差异燃烧动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维骷颅头在卡片视觉差异燃烧动画效果代码

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

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

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

  
  
<style>
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
/*       background: black; */
/*       text-align: center; */
      outline: none;
    }



    #world {
      width: 100%;
      height: 100vh;
			      background: black;
    }

canvas {
	    left: calc(50% - 325px);
    position: absolute;

}
</style>

  
  
  
</head>

<body >
  <div id="world"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.121.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.110.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.110.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OBJLoader.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.108.js"></script>
      <script >

var cardtemplate = "//repo.bfw.wiki/bfwrepo/images/skull/cardtemplate3.png";
var cardtemplateback = "//repo.bfw.wiki/bfwrepo/images/skull/cardtemplateback4.png";
var flower = "//repo.bfw.wiki/bfwrepo/images/skull/flower3.png";
var noise2 = "//repo.bfw.wiki/bfwrepo/images/skull/noise2.png";
var color11 = "//repo.bfw.wiki/bfwrepo/images/skull/color11.png";
var backtexture = "//repo.bfw.wiki/bfwrepo/images/skull/color3.jpg";
var skullmodel = "//repo.bfw.wiki/bfwrepo/obj/skull5.obj";
var voronoi = "//repo.bfw.wiki/bfwrepo/images/skull/rgbnoise2.png";


var scene,
sceneRTT,
camera,
cameraRTT,
renderer,
container,
width = 1301,
height = window.innerHeight,
frontmaterial,
backmaterial,
controls,
bloomPass,
composer,
frontcard,
backcard;
var options = {
  exposure: 2.8,
  bloomStrength: 0.8,
  bloomThreshold: 0,
  bloomRadius: 1.29,
  color0: [197, 81, 245],
  color1: [65, 0, 170],
  color2: [0, 150, 255],
  isanimate: false };


var gui = new dat.GUI();

var bloom = gui.addFolder("Bloom");
bloom.add(options, "bloomStrength", 0.0, 5.0).name("bloomStrength").listen();
bloom.add(options, "bloomRadius", 0.1, 2.0).name("bloomRadius").listen();
bloom.open();
var color = gui.addFolder("Colors");
color.addColor(options, "color0").name("Border");
color.addColor(options, "color1").name("Base");
color.addColor(options, "color2")..........完整代码请登录后点击上方下载按钮下载查看