html5+CSS3 Canvas动画分享

4.Windows12开机新概念动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>赛车</title> <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>

const IS_MOBILE_DEVICE = isMobile();

class BuildingMaterialD extends CustomMaterial { onBeforeCompile(shader) { super.onBeforeCompile(shader); 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 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();

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(-0.2, 0.9, 0); light1.rotation.set(0, 0, Math.PI / 2);

this.add(light1);

const light2 = new THREE.Mesh(geometry, material);

light2.position.set(-0.2, 0.9, 0.3); light2.rotation.set(0, 0, Math.PI / 2);

this.add(light2);

const light3 = new THREE.Mesh(geometry, material);

light3.position.set(-0.2, 0.9, 1.2); light3.rotation.set(0, 0, Math.PI / 2);

this.add(light3);

const light4 = new THREE.Mesh(geometry, material);

light4.position.set(-0.2, 0.9, 1.5); light4.rotation.set(0, 0, Math.PI / 2);

this.add(light4); }

{ const material = MaterialsLibrary.wheel;

const geometry = new THREE.CylinderGeometry(1, 1, 1, 12); const wheel1 = new THREE.Mesh(geometry, material);

wheel1.scale.set(0.33, 2, 0.33); wheel1.position.set(3, 0.33, 0.75); wheel1.rotation.set(Math.PI / 2, 0, 0);

this.add(wheel1);

const wheel2 = new THREE.Mesh(geometry, material);

wheel2.scale.set(0.33, 2, 0.33); wheel2.position.set(0.7, 0.33, 0.75); wheel2.rotation.set(Math.PI / 2, 0, 0);

this.add(wheel2); } }}

class BuildingA extends THREE.Group { constructor() { super();

const material = MaterialsLibrary.buildingA; const geometry = new THREE.BoxGeometry(); const building = new THREE.Mesh(geometry, material);

building.scale.set(10, 15, 10); building.position.set(0, -3, 0);

if (FLAGS.ENABLE_SHADOWS) { building.castShadow = true; }

this.add(building);

const roofGeometry = new THREE.ConeGeometry(5, 15, 7); const roof = new THREE.Mesh(roofGeometry, material);

roof.position.set(0, 5, 0);

this.add(roof); }}

class BuildingB extends THREE.Group { constructor() { super();

const material = MaterialsLibrary.buildingB; const geometry = new THREE.CylinderGeometry(); const building = new THREE.Mesh(geometry, material);

building.scale.set(5, 15, 5); building.position.set(0, -3, 0);

if (FLAGS.ENABLE_SHADOWS) { building.castShadow = true; }

this.add(building);

const roofGeometry = new THREE.SphereGeometry(7); const roof = new THREE.Mesh(roofGeometry, material);

roof.position.set(0, 2, 0); roof.rotation.set(0, 0.3, 0);

this.add(roof); }}

class BuildingC extends THREE.Group { constructor() { super();

const material = MaterialsLibrary.buildingC; const geometry = new THREE.BoxGeometry(); const building = new THREE.Mesh(geometry, material);

building.scale.set(5, 5, 5); building.position.set(0, -8, 0);

if (FLAGS.ENABLE_SHADOWS) { building.castShadow = true; }

this.add(building); }}

class BuildingD extends THREE.Group { constructor() { super();

const material = MaterialsLibrary.buildingD; const geometry = new THREE.ConeGeometry(1, 1, 3); const building = new THREE.Mesh(geometry, material);

building.scale.set(5, 20, 5); building.rotation.set(0, 1, 0);

if (FLAGS.ENABLE_SHADOWS) { building.castShadow = true; }

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>赛车</title>
<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>

class BuildingMaterialD extends CustomMaterial {
onBeforeCompile(shader) {
super.onBeforeCompile(shader);
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 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;
}

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);

this.add(sun);
}}

class Mountain extends THREE.Group {
constructor() {
super();

const material = MaterialsLibrary.mountain;
const shape = new THREE.Shape();

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 });

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(-0.2, 0.9, 0);
light1.rotation.set(0, 0, Math.PI / 2);

light2.position.set(-0.2, 0.9, 0.3);
light2.rotation.set(0, 0, Math.PI / 2);

light3.position.set(-0.2, 0.9, 1.2);
light3.rotation.set(0, 0, Math.PI / 2);

light4.position.set(-0.2, 0.9, 1.5);
light4.rotation.set(0, 0, Math.PI / 2);

this.add(light4);
}

{
const material = MaterialsLibrary.wheel;

const geometry = new THREE.CylinderGeometry(1, 1, 1, 12);
const wheel1 = new THREE.Mesh(geometry, material);

wheel1.scale.set(0.33, 2, 0.33);
wheel1.position.set(3, 0.33, 0.75);
wheel1.rotation.set(Math.PI / 2, 0, 0);

wheel2.scale.set(0.33, 2, 0.33);
wheel2.position.set(0.7, 0.33, 0.75);
wheel2.rotation.set(Math.PI / 2, 0, 0);

this.add(wheel2);
}
}}

class BuildingA extends THREE.Group {
constructor() {
super();

const material = MaterialsLibrary.buildingA;
const geometry = new THREE.BoxGeometry();
const building = new THREE.Mesh(geometry, material);

building.scale.set(10, 15, 10);
building.position.set(0, -3, 0);

if (FLAGS.ENABLE_SHADOWS) {
building.castShadow = true;
}

const roofGeometry = new THREE.ConeGeometry(5, 15, 7);
const roof = new THREE.Mesh(roofGeometry, material);

this.add(roof);
}}

class BuildingB extends THREE.Group {
constructor() {
super();

const material = MaterialsLibrary.buildingB;
const geometry = new THREE.CylinderGeometry();
const building = new THREE.Mesh(geometry, material);

building.scale.set(5, 15, 5);
building.position.set(0, -3, 0);

if (FLAGS.ENABLE_SHADOWS) {
building.castShadow = true;
}

const roofGeometry = new THREE.SphereGeometry(7);
const roof = new THREE.Mesh(roofGeometry, material);

roof.position.set(0, 2, 0);
roof.rotation.set(0, 0.3, 0);

this.add(roof);
}}

class BuildingC extends THREE.Group {
constructor() {
super();

const material = MaterialsLibrary.buildingC;
const geometry = new THREE.BoxGeometry();
const building = new THREE.Mesh(geometry, material);

building.scale.set(5, 5, 5);
building.position.set(0, -8, 0);

if (FLAGS.ENABLE_SHADOWS) {
building.castShadow = true;
}

this.add(building);
}}

class BuildingD extends THREE.Group {
constructor() {
super();

const material = MaterialsLibrary.buildingD;
const geometry = new THREE.ConeGeometry(1, 1, 3);
const building = new THREE.Mesh(geometry, material);

building.scale.set(5, 20, 5);
building.rotation.set(0, 1, 0);

if (FLAGS.ENABLE_SHADOWS) {
building.castShadow = true;
}

this.add(building);
}}var _initBuilding = new WeakSet();

constructor() {
super();_initBuilding.add(this);

for (let z = 0; z < 200; z += 20) {
for (let x = 70; x >= 10; x -= 20) {
_classPrivateMethodGet(this, _initBuilding, _initBuilding2).call(this, x, z);
}

for (let x = 120; x <= 180; x += 20) {
_classPrivateMethodGet(this, _initBuilding, _initBuilding2).call(this, x, z);
}
}
}
update() {
this.children.forEach(building => {
const { x, z } = building.position;

if (newZ < 0) {
newZ = 200;
}

class Stars extends THREE.Group {
constructor() {
super();

const geometry = new THREE.SphereGeometry();
const material = MaterialsLibrary.light;

for (let x = -300; x < 300; x += 30) {
for (let y = 0; y < 300; y += 30) {
const star = new THREE.Mesh(geometry, material);

const dx = 25 * Math.random();
const dy = 25 * Math.random();
const s = Math.random();

star.scale.set(s, s, s);
star.position.set(x + dx, y + dy, 0);

this.add(star);
}
}
}}

constructor() {
super();_initLights.add(this);_initObjects.add(this);_savedObjects.set(this, { writable: true, value: void 0 });

_classPrivateMethodGet(this, _initObjects, _initObjects2).call(this);
_classPrivateMethodGet(this, _initLights, _initLights2).call(this);
}

update() {
const t = performance.now() / 1000;

_classPrivateFieldSet(this, _frameRequestId, requestAnimationFrame(this.start.bind(this)));
}

void main() {
vUv = uv;

gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}`, fragmentShader: `
uniform float uTime;
uniform sampler2D tDiffuse;