2021-05-16 JQuery赛车动画

最新推荐文章于 2024-01-26 20:12:31 发布

gossipcy

最新推荐文章于 2024-01-26 20:12:31 发布

阅读量128

点赞数

分类专栏：前端

原文链接：http://www.htmleaf.com/html5/html5muban/201704034435.html

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>基于Threejs的高速运动动画特效</title>
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<script>
		document.documentElement.className = "js";
		var supportsCssVars = function() { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e };
		supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
		</script>
</head>
<body class="cda-removeleft cda-naked cda-noimg demo-4">
		<main>
			<div class="frame">
				<div class="frame__title-wrap">
					<h1 class="frame__title">Infinite Lights</h1>
					<div class="frame__links">
					</div>
				</div>
				<div class="frame__info">提示: 点击鼠标来提高速度</div>
				<div class="frame__demos">
					<a href="index.html" class="frame__demo">interstate 1</a>
					<a href="index2.html" class="frame__demo">interstate 2</a>
					<a href="index3.html" class="frame__demo">interstate 3</a>
					<a href="index4.html" class="frame__demo frame__demo--current">interstate 4</a>
					<a href="index5.html" class="frame__demo">interstate 5</a>
					<a href="index6.html" class="frame__demo">interstate 6</a>
					<a href="index7.html" class="frame__demo">interstate 7</a>
				</div>
			</div>
			<div class="content">
				<div id="app"></div>
				<div class="content__title-wrap">
					<span class="content__pretitle">Cyber Mountain</span>
					<h2 class="content__title">Aerobase</h2>
					<a class="content__link" href="#">Play it</a>
				</div>
			</div>
		</main>
		<script src="js/three.min.js"></script>
		<script src="js/postprocessing.min.js"></script>
		<script src="js/InfiniteLights.js"></script>
		<script src="js/Distortions.js"></script>
		<script>
		(function() {

			const container = document.getElementById('app');

			const options = {
				onSpeedUp: (ev) => {					
				},
				onSlowDown: (ev) => {
				},
				// mountainDistortion || LongRaceDistortion || xyDistortion || turbulentDistortion || turbulentDistortionStill || deepDistortionStill || deepDistortion
				distortion: turbulentDistortion, 
				
				length: 400,
				roadWidth: 10,
				islandWidth: 2,
				lanesPerRoad: 3,

				fov: 90,
				fovSpeedUp: 150,
				speedUp: 2,
				carLightsFade: 0.4,

				totalSideLightSticks: 20,
				lightPairsPerRoadWay: 40,

				// Percentage of the lane's width
				shoulderLinesWidthPercentage: 0.05,
				brokenLinesWidthPercentage: 0.1,
				brokenLinesLengthPercentage: 0.5,

				/*** These ones have to be arrays of [min,max].  ***/
				lightStickWidth: [0.12, 0.5],
				lightStickHeight: [1.3, 1.7],

				movingAwaySpeed: [60, 80],
				movingCloserSpeed: [-120, -160],

				/****  Anything below can be either a number or an array of [min,max] ****/

				// Length of the lights. Best to be less than total length
				carLightsLength: [400 * 0.03, 400 * 0.2],
				// Radius of the tubes
				carLightsRadius: [0.05, 0.14],
				// Width is percentage of a lane. Numbers from 0 to 1
				carWidthPercentage: [0.3, 0.5],
				// How drunk the driver is.
				// carWidthPercentage's max + carShiftX's max -> Cannot go over 1. 
				// Or cars start going into other lanes 
				carShiftX: [-0.8, 0.8],
				// Self Explanatory
				carFloorSeparation: [0, 5],

				colors: {
					roadColor: 0x080808,
					islandColor: 0x0a0a0a,
					background: 0x000000,
					shoulderLines: 0x131318,
					brokenLines: 0x131318,
					/***  Only these colors can be an array ***/
					leftCars: [0xD856BF, 0x6750A2, 0xC247AC],
					rightCars: [0x03B3C3, 0x0E5EA5, 0x324555],
					sticks: 0x03B3C3,
				}
			};

			const myApp = new App(container, options);
			myApp.loadAssets().then(myApp.init)
		})()
		</script>
	</body>
</html>

gossipcy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-05-16 JQuery赛车动画

!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>基于Threejs
复制链接

扫一扫

专栏目录