three实现穿越三维城市摩天大楼高楼大厦动画效果代码-html代码-BFW代码库

three实现穿越三维城市摩天大楼高楼大厦动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现穿越三维城市摩天大楼高楼大厦动画效果代码

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

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

<head>
    <meta charset="UTF-8">

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

.arcadeScreen{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;       
  background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEElEQVQIW2NkYGCYycgABAADrwCcot0erQAAAABJRU5ErkJggg==) repeat;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="arcadeScreen"></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.72.js"></script>
    <script>
        
        //////////////////////////////////////////////////////////////////////////////////
  //		Init
  //////////////////////////////////////////////////////////////////////////////////
  // init renderer
  var renderer	= new THREE.WebGLRenderer({
    antialias	: false
  });
  renderer.setClearColor(new THREE.Color('#181525'), 1)
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.shadowMapEnabled = true;	
  document.body.appendChild( renderer.domElement );
  // array of functions for the rendering loop
  var onRenderFcts= [];
  // init scene and camera
  var scene	= new THREE.Scene();
  var camera	= new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 1000);

  //////////////////////////////////////////////////////////////////////////////////
  //		add an object in the scene
  //////////////////////////////////////////////////////////////////////////////////

  var step = 0;

  /* Function Returning : Random between min and max */
  var randInt = function(min,max) {
    return (~~((Math.random()*max)+min));
  }

  var light = new THREE.PointLight(0xffffff, 0.3);
	light.position.x = 0;
	light.position.y = 10;
	light.position.z = 0;
	scene.add(light);
	

	var light2 = new THREE.PointLight(0xffffff, 1);
	light2.position.x = 200;
	light2.position.y = 200;
	light2.position.z = 200;
	scene.add(light2);

	spotLight = new THREE.SpotLight(0xffffff);
	spotLight.position.set(450, 700, 450);
	spotLight.target.position = new THREE.Vector3(0,110,800);
	spotLight.intensity = 1;
	spotLight.shadowDarkness = 2;
	spotLight.castShadow = true;
	spotLight.shadowMapWidth = 32;
	spotLight.shadowMapHeight = 32;
	spotLight.shadowCameraFov = 30;
	spotLight.angle = 0.8;
	scene.add(spotLight);

  // Buildings 
	var numBuild = 60;
	var diamBuild = 50;
	var tabBuildLeft = [];
	var tabBuildRight = [];
	var tabFaces = [4,8,15];

	var normalMaterial = new THREE.MeshPhongMaterial({
  	color      :  new THREE.Color("rgb(176,64,0)"),
  	emissive   :  new THREE.Color("rgb(175,25,95)"),
  	specular   :  new THREE.Color("rgb(229,111,14)"),
		shininess  :  30,
		shading    :  THREE.FlatShading,
		transparent: 1,
		opacity    : 1
    });

  var blackMaterial = new THREE.MeshPhongMaterial({
    color      :  new THREE.Color("rgb(40,40,40)"),
  	emissive   :  new THREE.Color("rgb(20,20,20)"),
  	specular   :  new THREE.Color("rgb(160,160,160)"),
		shininess  :  30,
		shading    :  THREE.FlatShading,
		transparent: 1,
		opacity    : 1
  });

  var blueMaterial = new THREE.MeshPhongMaterial({
    color      :  new THREE.Color("rgb(40,40,140)"),
  	emissive   :  new THREE.Color("rgb(2,7,22)"),
  	specular   :  new THREE.Color("rgb(40,0,190)").........完整代码请登录后点击上方下载按钮下载查看