three实现三维雪山地形图旋转效果代码
代码语言: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 ) { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0