three实现三维柱状图动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维柱状图动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<style>
body { margin: 0; }
</style>
</head>
<body >
<div id="webGL-container"></div>
<script >
$(function () {
///////////////////////
// Initial Variables //
///////////////////////
// Values
var tick = 0;
var size = 0.25;
var red = 0xff0000;
var blue = 0x1176c5;
var white = 0xf9f9f9;
// Arrays
var bar = new Array();
///////////////////////
// Initial Setup //
///////////////////////
init();
function init() {
initListeners();
init3DScene();
}
function initListeners() {
$(window).resize(onWindowResize);
}
function init3DScene() {
// Setup Scene / Camera
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 2000);
camera.position.set(100, 100, 100);
camera.lookAt(new THREE.Vector3(20, 40, 0));
// .........完整代码请登录后点击上方下载按钮下载查看
网友评论0