three实现三维赛车夜晚在城市道路行驶交互视觉差异动画效果代码
代码语言：html
所属分类：三维
代码描述：three实现三维赛车夜晚在城市道路行驶交互视觉差异动画效果代码，还有以下插件参与：；CopyShader、EffectComposer、ShaderPass、RenderPass、LuminosityHighPassShader、UnrealBloomPass、Reflector、OrbitControls。
代码标签： three 三维 赛车 夜晚 城市 道路 行驶 交互 视觉 差异 动画
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
background: #000000;
}
.full-screen-3d-example {
opacity: 0;
transition: opacity 1s ease-out;
}
.full-screen-3d-example.-loaded {
opacity: 1;
}
</style>
</head>
<body >
<div id='root' class='full-screen-3d-example'></div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/EffectComposer.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ShaderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/CopyShader.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RenderPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/LuminosityHighPassShader.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/UnrealBloomPass.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.146.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Reflector.146.js"></script>
<script >
function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classStaticPrivateMethodGet(receiver, classConstructor, method) {if (receiver !== classConstructor) {throw new TypeError("Private static access of wrong provenance");}return method;}function _classPrivateMethodGet(receiver, privateSet, fn) {if (!privateSet.has(receiver)) {throw new TypeError("attempted to get private field on non-instance");}return fn;}function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const { THREE } = window;
// https://stackoverflow.com/questions/11381673/detecting-a-mobile-browser
function isMobile() {
let check = false;
// eslint-disable-next-line
(function (a) {if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true;})(navigator.userAgent || navigator.vendor || window.opera);
return check;
}
const IS_MOBILE_DEVICE = isMobile();
const FLAGS = Object.freeze({
ENABLE_SHADOWS: !IS_MOBILE_DEVICE,
ENABLE_BLOOM: !IS_MOBILE_DEVICE,
ENABLE_NOISE: !IS_MOBILE_DEVICE });
// https://coolors.co/palette/f72585-b5179e-7209b7-560bad-480ca8-3a0ca3-3f37c9-4361ee-4895ef-4cc9f0
const COLOR_PALETTE = Object.freeze({
black: 0x010101,
white: 0xEEEEEE,
color1: 0xF72585,
color2: 0xB5179E,
color3: 0x7209B7,
color4: 0x560BAD,
color5: 0x480CA8,
color6: 0x3A0CA3,
color7: 0x3F37C9,
color8: 0x4361EE,
color9: 0x4895EF,
color10: 0x4CC9F0 });
const COLOR_PALETTE_GLSL = Object.freeze({
black: 'vec4(0.04, 0.04, 0.04, 1.0)',
white: 'vec4(0.933, 0.933, 0.933, 1.0)',
color1: 'vec4(0.969, 0.145, 0.522, 1.0)',
color2: 'vec4(0.71, 0.09, 0.62, 1.0)',
color3: 'vec4(0.447, 0.035, 0.718, 1.0)',
color4: 'vec4(0.337, 0.043, 0.678, 1.0)',
color5: 'vec4(0.282, 0.047, 0.659, 1.0)',
color6: 'vec4(0.227, 0.047, 0.639, 1.0)',
color7: 'vec4(0.247, 0.216, 0.788, 1.0)',
color8: 'vec4(0.263, 0.38, 0.933, 1.0)',
color9: 'vec4(0.282, 0.584, 0.937, 1.0)',
color10: 'vec4(0.298, 0.788, 0.941, 1.0)' });
class DefaultMaterial extends THREE.MeshStandardMaterial {
constructor() {
super({
color: COLOR_PALETTE.white });
}}
class CarMaterial extends THREE.MeshStandardMaterial {
constructor() {
super({
color: COLOR_PALETTE.black });
}}
class LightMaterial extends THREE.MeshStandardMaterial {
constructor() {
super({
color: COLOR_PALETTE.color1 });
}}
class WheelMaterial extends THREE.MeshStandardMaterial {
constructor() {
super({
color: COLOR_PALETTE.black });
}}
class MountainMaterial extends THREE.MeshBasicMaterial {
constructor() {
super({
color: COLOR_PALETTE.black });
}}
class CustomMaterial extends THREE.MeshStandardMaterial {
onBeforeCompile(shader) {
// eslint-disable-next-line no-param-reassign
shader.uniforms.uTime = { value: 0.0 };
// eslint-disable-next-line no-param-reassign
shader.vertexShader = shader.vertexShader.replace(
'#include <uv_pars_vertex>',
`varying vec2 vUv;
uniform float uTime;`);
// eslint-disable-next-line no-param-reassign
shader.vertexShader = shader.vertexShader.replace(
'#include <uv_vertex>',
'vUv = uv;');
// eslint-disable-next-line no-param-reassign
shader.fragmentShader = shader.fragmentShader.replace(
'varying vec3 vViewPosition;',
`varying vec3 vViewPosition;
varying vec2 vUv;
uniform float uTime;`);
this.userData.shader = shader;
}}
class CustomTransparentMaterial extends CustomMaterial {
constructor() {
super({
transparent: true });
}}
class RoadMaterial extends CustomTransparentMaterial {
onBeforeCompile(shader) {
super.onBeforeCompile(shader);
// eslint-disable-next-line no-param-reassign
shader.fragmentShader = shader.fragmentShader.replace(
// eslint-disable-next-line sonarjs/no-duplicate-string
'#include <map_fragment>',
`
diffuseColor = ${COLOR_PALETTE_GLSL.black};
float width = 0.06;
bool isInCenter = abs(0.5 - vUv.x) < (0.01 + width / 2.0);
bool isInRoad = abs(0.5 - vUv.x) < (width / 2.0);
if (isInCenter) {
diffuseColor = ${COLOR_PALETTE_GLSL.color9};
}
if (isInRoad) {
diffuseColor = ${COLOR_PALETTE_GLSL.black};
diffuseColor.a = 0.8;
bool isInLine = (abs(0.5 - vUv.x + width / 6.0) < 0.0003);
bool isInDashedLine = (abs(0.5 - vUv.x - width / 6.0) < 0.0003)
&& (sin(100.0 * vUv.y - 10.0 * uTime) > 0.3);
if (isInLine || isInDashedLine) {
diffuseColor = ${COLOR_PALETTE_GLSL.color10};
}
}
`);
this.userData.shader = shader;
}}
class SunMaterial extends CustomTransparentMaterial {
onBeforeCompile(shader) {
super.onBeforeCompile(shader);
// eslint-disable-next-line no-param-reassign
shader.fragmentShader = shader.fragmentShader.replace(
'#include <map_fragment>',
`
diffuseColor = vec4(0.0);
bool isInSun = distance(vUv.xy, vec2(0.5, 0.5)) < 0.5;
if (isInSun) {
diffuseColor = ${COLOR_PALETTE_GLSL.color1};
float delta = 0.2 * (1.0 - vUv.y);
diffuseColor += vec4(delta, delta, 0.0, 0.0);
bool isInLine = sin(100.0 * vUv.y) * vUv.y > 0.3;
if (isInLine) {
diffuseColor = ${COLOR_PALETTE_GLSL.color3};
}
}
`);
this.userData.shader = shader;
}}
class BuildingMaterialA extends CustomMaterial {
onBeforeCompile(shader) {
super.onBeforeCompile(shader);
// eslint-disable-next-line no-param-reassign
shader.fragmentShader = shader.fragmentShader.replace(
'#include <map_fragment>',
`
diffuseColor = ${COLOR_PALETTE_GLSL.black};
bool isInWindow = vUv.y > 0.09
&& (sin(31.415 * (vUv.x - 0.05)) > 0.5)
&& (sin(100.0 * vUv.y) > 0.5);
if (isInWindow) {
diffuseColor = ${COLOR_PALETTE_GLSL.color7};
if (vUv.x > 0.4 && vUv.x < 0.6) {
diffuseColor = ${COLOR_PALETTE_GLSL.color10};
}
}
`);
this.userData.shader = shader;
}}
class BuildingMaterialB extends CustomMaterial {
onBeforeCompile(shader) {
super.onBeforeCompile(shader);
// eslint-disable-next-line no-param-reassign
shader.fragmentShader = shader.fragmentShader.replace(
'#include <map_fragment>',
`
diffuseColor = ${COLOR_PALETTE_GLSL.black};
bool isInWindow = vUv.y > 0.1
&& vUv.y < 0.5
&& (sin(50.0 * 3.1415 * (vUv.x - 0.05)) > -0.8)
&& (sin(50.0 * vUv.y) > 0.5);
if (isInWindow) {
diffuseColor = ${COLOR_PALETTE_GLSL.color1};
if (vUv.y < 0.3) {
diffuseColor = ${COLOR_PALETTE_GLSL.color4};
}
}
`);
this.userData.shader = shader;
}}
class BuildingMaterialC extends CustomMaterial {
onBeforeCompile(shader) {
super.onBeforeCompile(shader);
// eslint-disable-next-line no-param-reassign
shader.fragmentShader = shader.fragmentShader.replace(
'#include <map_fragment>',
`
diffuseColor = ${COLOR_PALETTE_GLSL.black};
bool isInWindow = vUv.y > 0.5
&& vUv.y < 0.8
&& (sin(5.0 * 3.1415 * (vUv.x - 0.05)) > -0.8)
&& (sin(50.0 * vUv.y) > 0.5);
if (isInWindow) {
diffuseColor = ${COLOR_PALETTE_GLSL.color9};
}
`);
this.userData.shader = shader;
}}
class BuildingMaterialD extends CustomMaterial {
onBeforeCompile(shader) {
super.onBeforeCompile(shader);
// eslint-disable-next-line no-param-reassign
shader.fragmentShader = shader.fragmentShader.replace(
'#include <map_fragment>',
`
diffuseColor = ${COLOR_PALETTE_GLSL.black};
bool isInWindow = vUv.y > 0.1
&& (sin(50.0 * vUv.y) > -0.8);
if (isInWindow) {
diffuseColor = ${COLOR_PALETTE_GLSL.color5};
}
`);
this.userData.shader = shader;
}}
class MaterialsLibrary {}_defineProperty(MaterialsLibrary, "default",
new DefaultMaterial());_defineProperty(MaterialsLibrary, "road",
new RoadMaterial());_defineProperty(MaterialsLibrary, "sun",
new SunMaterial());_defineProperty(MaterialsLibrary, "mountain",
new MountainMaterial());_defineProperty(MaterialsLibrary, "car",
new CarMaterial());_defineProperty(MaterialsLibrary, "wheel",
new WheelMaterial());_defineProperty(MaterialsLibrary, "light",
new LightMaterial());_defineProperty(MaterialsLibrary, "buildingA",
new BuildingMaterialA());_defineProperty(MaterialsLibrary, "buildingB",
new BuildingMaterialB());_defineProperty(MaterialsLibrary, "buildingC",
new BuildingMaterialC());_defineProperty(MaterialsLibrary, "buildingD",
new BuildingMaterialD());
class Road extends THREE.Group {
constructor() {
super();
const geometry = new THREE.PlaneGeometry();
const material = MaterialsLibrary.road;
const road = new THREE.Mesh(geometry, material);
road.scale.set(200, 200, 1);
road.rotation.set(-Math.PI / 2, 0, 0);
if (FLAGS.ENABLE_SHADOWS) {
road.receiveShadow = true;
}
this.add(road);
const reflector = new THREE.Reflector(
new THREE.PlaneGeometry(10, 10),
{
color: new THREE.Color(0x7f7f7f),
textureWidth: window.innerWidth * window.devicePixelRatio,
textureHeight: window.innerHeight * window.devicePixelRatio });
reflector.position.set(0, -0.1, 0);
reflector.scale.set(200, 200, 1);
reflector.rotation.set(-Math.PI / 2, 0, 0);
this.add(reflector);
}}
class Sun extends THREE.Group {
constructor() {
super();
const geometry = new THREE.PlaneGeometry();
const material = MaterialsLibrary.sun;
const sun = new THREE.Mesh(geometry, material);
sun.scale.set(50, 50, 1);
this.add(sun);
}}
class Mountain extends THREE.Group {
constructor() {
super();
const material = MaterialsLibrary.mountain;
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(100, 0);
shape.lineTo(100, 50);
shape.lineTo(50, 10);
shape.lineTo(20, 15);
shape.lineTo(15, 5);
shape.lineTo(10, 10);
shape.lineTo(0, 0);
shape.lineTo(-5, 3);
shape.lineTo(-10, 10);
shape.lineTo(-12, 8);
shape.lineTo(-100, 50);
shape.lineTo(-100, 0);
shape.lineTo(0, 0);
const geometry = new THREE.ExtrudeGeometry(shape);
const mountain = new THREE.Mesh(geometry, material);
this.add(mountain);
}}
class Car extends THREE.Group {
constructor() {
super();
{
const material = MaterialsLibrary.car;
const shape = new THREE.Shape();
shape.moveTo(0, 0);
shape.lineTo(4, 0);
shape.lineTo(3.8, 0.3);
shape.lineTo(-0.1, 0.7);
shape.lineTo(0, 0);
const geometry = new THREE.ExtrudeGeometry(shape, {
depth: 1.5,
bevelThickness: 0.2 });
const body = new THREE.Mesh(geometry, material);
body.position.set(0, 0.3, 0);
this.add(body);
}
{
const material = MaterialsLibrary.car;
const geometry = new THREE.CylinderGeometry(0.6, 1.2, 0.5, 4);
const roof = new THREE.Mesh(geometry, material);
roof.position.set(1.5, 1, 0.8);
roof.rotation.set(0, Math.PI / 4, 0);
this.add(roof);
}
{
const material = MaterialsLibrary.light;
const geometry = new THREE.CylinderGeometry(0.1, 0.1, 0.1, 12);
const light1 = new THREE.Mesh(geometry, material);
light1.position.set(-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0