three实现三维柱状图动画效果代码-html代码-BFW代码库

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));

    // Setup Renderer
    renderer = new THREE.WebGLRenderer({
      antialias: true });


    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);

    $("#webGL-container").append(renderer.domElement);

    init3DElements();
  }

  function init3DElements() {

    createFloor();

    createBar(5, -25, red);
    createBar(5, -20, red);
    createBar(5, -15, white);
    createBar(5, -10, white);
    createBar(5, -5, blue);
    createBar(5, 0, blue);

    createLight();
  }

  ///////////////////////
  // Interactions      //
  ///////////////////////

  function on.........完整代码请登录后点击上方下载按钮下载查看