three实现山峦山峰群山山间迷雾景色穿越效果代码
代码语言:html
所属分类:三维
代码描述:three实现山峦山峰群山山间迷雾景色穿越效果代码
代码标签: three 山间 迷雾 景色 穿越 山峦 山峰 群山
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <link type="text/css" rel="stylesheet" href="main.css"> <style> body { background-color: #efd1b5; color: #61443e; } a { color: #a06851; } </style> </head> <body> <div id="container"></div> <!-- Import maps polyfill --> <!-- Remove this when import maps will be widely supported --> <script async type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.3.6.js"></script> <script type="importmap"> { "imports": { "three": "//repo.bfw.wiki/bfwtool/build/three.module.js" } } </script> <script type="module"> import * as THREE from 'three'; import Stats from '//repo.bfw.wiki/bfwtool/examples/jsm/libs/stats.module.js'; import { FirstPersonControls } from '//repo.bfw.wiki/bfwtool/examples/jsm/controls/FirstPersonControls.js'; import { ImprovedNoise } from '//repo.bfw.wiki/bfwtool/examples/jsm/math/ImprovedNoise.js'; let container, stats; let camera, controls, scene, renderer; let mesh, texture; const worldWidth = 256, worldDepth = 256; const clock = new THREE.Clock(); init(); animate(); function init() { container = document.getElementById( 'container' ); camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 ); scene = new THREE.Scene(); scene.background = new THREE.Color( 0xefd1b5 ); scene.fog = new THREE.FogExp2( 0xefd1b5, 0.0025 ); const data = generateHeight( worldWidth, worldDepth ); camera.position.set( 100, 800, - 800 ); camera.lookAt( - 100, 810, - 800 ); 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; } texture = new THREE.CanvasTexture( generateTexture( data, worldWidth, worldDepth ) ); texture.wrapS = THREE.ClampToEdgeWrapping; texture.wrapT = THREE.ClampToEdgeWrapping; mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) ); scene.add( mesh ); renderer = new THREE.WebGLRenderer(); renderer.setPixelRatio( window.devicePixelRatio ); renderer.setSize( window.innerWidth, window.innerHeight ); container.appendChild( renderer.domElement ); controls = new FirstPersonControls( camera, renderer.domElement ); controls.movementSpeed = 150; controls.lookSpeed = 0.1; stats = new Stats(); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0