three实现三维书籍空中排列动画效果代码-html代码-BFW代码库

three实现三维书籍空中排列动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维书籍空中排列动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  <meta name="viewport" content="width=device-width, initial-scale=1">
  

  
<style>
body {
  color: #FFFFFF;
  margin: 0;
  text-align: center;
  background-color: #000000;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

p {
  color: rgba(255, 255, 255, 0.5);
}

.header {
  top: 50%;
  transform: translatey(-50%);
}

a, a:hover, a:visited {
  color: #FFFFFF;
  text-decoration: none;
}

h1:after {
  content: " ThreeJS";
  font-size: 0.6rem;
  position: relative;
  top: -1rem;
}
</style>



</head>

<body  >
  <div class="container fixed-top header">

</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.103.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>

      <script  >
// Three JS
window.addEventListener('load', init, false);
function init() {
  createWorld();
  createLights();
  //createGrid();
  createPrimitive();
  createSky();
  //---
  animation();
}

var Theme = {
  primary: 0xFFFFFF,
  secundary: 0x0000FF,
  danger: 0xFF0000,
  darker: 0x101010 };


//--------------------------------------------------------------------
var scene, camera, renderer, container;
var _width, _height;
var controls, sky;
var _group = new THREE.Group();

function createWorld() {
  _width = window.innerWidth;
  _height = window.innerHeight;
  //---
  scene = new THREE.Scene();
  scene.fog = new THREE.Fog(Theme.primary, 9, 13);
  scene.background = new THREE.Color(Theme.primary);
  //---
  camera = new THREE.PerspectiveCamera(35, _width / _height, 1, 1000);
  camera.position.set(0, 0, 10);
  //---
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false });
  renderer.setSize(_width, _height);
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFShadowMap;
  //---
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.enableZoom = false;
  controls.update();
  //---
  //document.body.appendChild( WEBVR.createButton( renderer ) );
  document.body.appendChild(renderer.domElement);
  //---
  window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
  _width = window.innerWidth;
  _height = window.innerHeight;
  renderer.setSize(_width, _height);
  camera.aspect = _width / _height;
  camera.updateProjectionMatrix();
  console.log('- resize -');
}
//--------------------------------------------------------------------
var _ambientLights, _lights;
function createLights() {
  //_ambientLights = new THREE.AmbientLight(0xFFFFFF, 1);
  _ambientLights = new THREE.HemisphereLight(Theme.primary, Theme.darker, 1);
  _lights = new THREE.SpotLight(Theme.danger, 1, 200);
  _lights.castShadow = true;
  _lights.shadow.mapSize.width = 5000;
  _lights.shadow.mapSize.height = _lights.shadow.mapSize.width;
  _lights.penumbra = 0.8;
  _lights.position.set(10, 20, 20);
  scene.add(_lights);
  scene.add(_ambientLights);
}
//--------------------------------------------------------------------

function createSky() {
  //sky = new THREE.Sky();
  /*sky.scale.setScalar( 450000 );
  sky.material.uniforms.turbidity.value = 20;
  sky.material.uniforms.rayleigh.value = 0;
  sky.material.uniforms.luminance.value = 1;
  sky.material.uniforms.mieCoefficient.value = 0.01;
  sky.material.uniforms.mieDirectionalG.value = 0.8;
   scene.add( sky );
   sunSphere = new THREE.Mesh(
    new THREE.SphereBufferGeometry( 20000, 16, 8 ),
 .........完整代码请登录后点击上方下载按钮下载查看