three实现三维雪山地形图旋转效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现三维雪山地形图旋转效果代码

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

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

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

<style>
    body {
  width: 100%;
  height: 100%;
  background-color: #000;
}

*:focus {
  outline: none;
}

#app {
  width: 100%;
  height: 100%;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->
    <div id="app"></div>
    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.127.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/gsap.3.10.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
    <script>
        
        /* --------------------------
* THREE JS EXPERIMENT
* Procedural Terrain
* -------------------------- */

/* --------------------------
* GENERAL VARIABLES
* -------------------------- */

let scene,
  camera,
  renderer,
  controls
;

// Add Greensock Ticker
gsap.ticker.add(render);

let mesh, texture;

const worldWidth = 256, worldDepth = 256,
      worldHalfWidth = worldWidth / 2, worldHalfDepth = worldDepth / 2;

// GSAP Timeline
let rotationTimeline = gsap.timeline({repeat: -1});


/* --------------------------
 * INIT
 * -------------------------- */

function init() {

  /**
   * SCENE
   */
  
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0x70a4cc);
  
  // Add Scene Fog
  scene.fog = new THREE.FogExp2( 0x70a4cc, 0.0002 );
  
  
  /**
   * LIGHTS
   */
  
  mainLight = new THREE.HemisphereLight(0xffffff, 0x70a4cc, 0.9);
  mainLight.position.set(200, -50, -100);
  scene.add(mainLight);
  
  const shadowLight = new THREE.DirectionalLight(0xFFFFFF, 0.1);
  shadowLight.position.set(0, 10, 0);
  shadowLight.target.position.set(-5, 0, 0);
  shadowLight.castShadow = true;
  scene.add(shadowLight);
  scene.add(shadowLight.target);
			

  /**
   * CAMERA
   */
  
  camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
  camera.position.set( 100, 2000, - 2500 );
	camera.lookAt( - 100, 810, - 800 );
  
  
 /**
  * OBJECTS
  */
  
  const flakeMap = new THREE.CanvasTexture( new FlakesTexture() );
        flakeMap.wrapS = THREE.RepeatWrapping;
        flakeMap.wrapT = THREE.RepeatWrapping;
        flakeMap.repeat.x = 10;
        flakeMap.repeat.y = 6;
        flakeMap.anisotropy = 16;
    
  let material = new THREE.MeshPhysicalMaterial( {
    clearcoat: 0.8,
    clearcoatRoughness: 0.3,
    metalness: 0,
    roughness: 0.5,
    color: 0xFFFFFF,
    normalMap: flakeMap,
    normalScale: new THREE.Vector2( 0.15, 0.15 )
  } );
  
  const data = generateHeight( worldWidth, worldDepth );  
  const geometry = new THREE.PlaneGeometry( 7500, 7500, worldWidth - 1, worldDepth - 1 );
  
  geometry.rotateX( - Math.PI / 2 );

  const vertices = geometry.attributes.position.array;
  
  for ( let i = 0, j = 0, l = vertices.length; i < l; i ++, j += 3 ) {
    vertices[ j + 1 ] = data[ i ] * 10;
  }
  
  geometry.computeVertexNormals();
  
  var ground = new THREE.Mesh(geometry, material);
  ground.castShadow = true;
  ground.receiveShadow = true;
  
  scene.add(ground);

  
  /**
   * RENDERER
   */

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

  // Navigation Controls
  controls = new THREE.OrbitControls(camera, renderer.domElement);
  controls.keyPanSpeed = 100;

  controls.update();
  
  renderer.setSize(window.innerWidth, window.innerHeight);

  // Set the renderer to render at native device ratios
  renderer.setPixelRatio(window.devicePixelRatio);
  
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap; // default THREE.PCFShadowMap

  // Add the threejs scene to the app div
  document.getElementById("app").appendChild(renderer.domElement);
  
  
  /**
   * ROTATION ANIMATION
   */
  
  function terrainAnimation() {
    rotationTimeline.to(ground.rotation, {
      duration: 40,
      y: Math.PI * 2,
      ease: 'linear'
    });
  }
  
  terrainAnimation();


  /* --------------------------
  * BEGIN RENDER
  * -------------------------- */
  render();
}


/* --------------------------
 * RENDER THE SCENE
 * -------------------------- */

function render() {
  renderer.render(scene, camera);
}

init();


/* --------------------------
 * RESIZE EVENT
 * -------------------------- */

window.addEventListener( 'resize', onWindowResize, false );
			
function onWindowResize() {

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