three实现三维粒子线条围绕核心动画交互效果代码
代码语言:html
所属分类:粒子
代码描述:three实现三维粒子线条围绕核心动画交互效果代码
代码标签: three 三维 粒子 线条 围绕 核心 动画 交互
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">
</head>
<body>
<!-- partial:index.partial.html -->
<div id="container"></div>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script >
(function() {
window.launchApp = function() {
/// ---------------------------
// INIT
/// ---------------------------
this.container = document.getElementById('container');
this.width = window.innerWidth;
this.height = window.innerHeight;
this.centerX = this.width/2;
this.centerY = this.height/2;
this.geometrySize = 200;
this.blockTime = 5000;
this.TransactionsPerSecond = 2000;
this.activeStep = 1;
this.maxNodes = 25;
this.minNodesDistance = 200;
this.initApp = function() {
this.initRenderer();
this.launchApp();
this.initMouseEvents();
this.animate();
// prevent animation bug when tab is inactive
TweenLite.lagSmoothing(0);
}
this.initRenderer = function() {
this.renderer = new THREE.WebGLRenderer({alpha: true});
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.setClearColor( 0x000000, 1);
this.renderer.sortObjects = false
this.container.appendChild(this.renderer.domElement);
this.scene = new THREE.Scene();
this.scene.fog = new THREE.Fog(0x000000, 1000, 4000);
this.camera = new THREE.PerspectiveCamera(50, this.width / this.height, 1, 10000);
this.camera.position.set(0, 0, 1000);
this.scene.add(this.camera);
var ambientLight = new THREE.AmbientLight(0x999999, 0.8);
this.scene.add(a.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0