三维粒子风暴图片转场过渡幻灯片效果-html代码-BFW代码库

三维粒子风暴图片转场过渡幻灯片效果

代码语言：html

所属分类：幻灯片

代码描述：三维粒子风暴图片转场过渡幻灯片效果，点击拖拽可以控制动画

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

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

<style>
body {
	margin: 0;
	overflow: hidden;
}

canvas {
	background-image: radial-gradient(#666, #333);
}

#instructions {
	position: absolute;
	color: #fff;
	bottom: 0;
	padding-bottom: 6px;
	font-family: sans-serif;
	width: 100%;
	text-align: center;
	pointer-events: none;
}
</style>

</head>
<body translate="no">
<div id="three-container"></div>
<div id="instructions">
点击拖拽可以控制动画
</div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/three.bas.js"></script>
<script src='http://repo.bfw.wiki/bfwrepo/js/OrbitControls.js'></script>
<script >
window.onload = init;
console.ward = function () {}; // what warnings?

function init() {
  var root = new THREERoot({
    createCameraControls: !true,
    antialias: window.devicePixelRatio === 1,
    fov: 80 });


  root.renderer.setClearColor(0x000000, 0);
  root.renderer.setPixelRatio(window.devicePixelRatio || 1);
  root.camera.position.set(0, 0, 60);

  var width = 100;
  var height = 60;

  var slide = new Slide(width, height, 'out');
  var l1 = new THREE.ImageLoader();
  l1.setCrossOrigin('Anonymous');
  l1.load('http://repo.bfw.wiki/bfwrepo/image/5ef941175a99f.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90', function (img) {
    slide.setImage(img);
  });
  root.scene.add(slide);

  var slide2 = new Slide(width, height, 'in');
  var l2 = new THREE.ImageLoader();
  l2.setCrossOrigin('Anonymous');
  l2.load('http://repo.bfw.wiki/bfwrepo/image/5ef941337115b.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_300,/quality,q_90', function (img) {
    slide2.setImage(img);
  });

  root.scene.add(slide2);

  var tl = new TimelineMax({ repeat: -1, repeatDelay: 1.0, yo.........完整代码请登录后点击上方下载按钮下载查看