three实现三维飞行孤岛小人行走动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维飞行孤岛小人行走动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /** * Author: Vinces * Website: https://vinces.io * v.0.1 */ @import url("https://fonts.googleapis.com/css?family=BenchNine"); html, body { margin: 0; padding: 0; overflow: hidden; font-family: BenchNine, sans-serif; } .world { background: #2980b9; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #2980b9, #6dd5fa, #ffffff); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .input-group { position: absolute; top: 5%; right: 5%; padding: 1rem; color: black; font-size: 18px; z-index: 999; } .input-group > * { display: block; } .input-group > * + * { margin-top: 0.5rem; } .copy { margin: 15px; font-size: 14px; font-weight: bold; color: black; position: absolute; bottom: 0; left: 0%; z-index: 999; } .copy a { color: #2980b9; text-decoration: none; font-size: 16px; } </style> </head> <body > <canvas data-canvas class="world"></canvas> <div class="input-group"> <label for="bothAngle">Move Character (Wip)</label> <input type="range" min="-90" max="90" value='0' data-input-both id="bothAngle"> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.123.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script> <script > var container = { width: window.innerWidth, height: window.innerHeight }; /** * HELPERS * ------------------------------------------------------------------------ */ // Rotate arms / legs const degreesToRadians = degrees => { return degrees * (Math.PI / 180); }; // Add shadow support to object const shadowSupport = group => { group.traverse(object => { if (object instanceof THREE.Mesh) { object.castShadow = true; object.receiveShadow = true; } }); }; // Get random number const randomize = (min, max, float = false) => { const val = Math.random() * (max - min) + min; if (float) { return val; } return Math.floor(val); }; // Box Helper const boxHelperSupport = group => { const box = new THREE.BoxHelper(group, 0xffff00); scene.add(box); }; // Random MORE VERTICES const map = (val, smin, smax, emin, emax) => (emax - emin) * (val - smin) / (smax - smin) + emin; const jitter = (geo, per) => geo.vertices.forEach(v => { v.x += map(Math.random(), 0, 1, -per, per); v.y += map(Math.random(), 0, 1, -per, per); v.z += map(Math.random(), 0, 1, -per, per); }); // Cut Object helpers const chopBottom = (geo, bottom) => geo.vertices.forEach(v => v.y = Math.max(v.y, bottom)); const chopTop = (geo, top) => geo.vertices.forEach(v => v.y = Math.min(v.y, top)); /** * OBJECTS : SCENE, ISLAND, BBLOCK * ------------------------------------------------------------------------ */ class Scene { constructor(params) { this.params = { x: 0, y: 0, z: 0, aspectRatio: container.width / container.height, fieldOfView: 60, nearPlane: 0.1, farPlane: 3000, ...params }; this.camera; this.scene; this.controls; this.renderer; } initStats() { // STATS this.stats = new Stats(); this.stats.setMode(0); // 0: fps, 1: ms, 2: mb, 3+: custom // align top-left this.stats.domElement.style.position = "absolute"; this.stats.domElement.style.left = "0px"; this.stats.domElement.style.top = "0px"; document.body.appendChild(this.stats.domElement); } initScene() { this.scene = new THREE.Scene(); this.scene.background = null; /*new THREE.Color(0xa3e2ff)*/ } initCamera() { this.camera = new THREE.PerspectiveCamera( this.params.fieldOfView, this.params.aspectRatio, this.params.nearPlane, this.params.farPlane); //this.camera.position.set(0, 3.5, 22); this.camera.updateProjectionMatrix(); this.camera.position.set(6, 8.5, 25); this.camera.lookAt(this.scene.position); //this.camera.position.z = 12; // call this only in static scenes (i.e., if there is no animation loop) } initControls() { this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement); //call this only in static scenes (i.e., if there is no animation loop) //controls.addEventListener( 'change', initRenderer ); // Force control // controls.minPolarAngle = -Math.PI*.45; // controls.maxPolarAngle = Math.PI*.45; this.controls.minDistance = 10; this.controls.maxDistance = 80; } initRenderer() { let pixelRatio = window.devicePixelRatio; let AA = true; if (pixelRatio > 1) {AA = false;} const canvas = document.querySelector("[data-canvas]"); this.renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: AA, powerPreference: "high-performance" }); this.renderer.setSize(container.width, container.height); this.renderer.setPixelRatio(window.devicePixelRatio); //renderer.setClearColor(0xc5f5f5, 0); this.renderer.physicallyCorrectLights; /*accurate lighting that uses SI units.*/ this.renderer.shadowMap.enabled = true; this.renderer.shadowMap.soft = true; } initLights() { this.directionalLight = new THREE.DirectionalLight(0xffffff, 0.4, 100); this.light = new THREE.Hemisphe.........完整代码请登录后点击上方下载按钮下载查看
网友评论0