3D直升机

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

window.addEventListener("DOMContentLoaded",app);

function app() {
	var scene,
		camera,
		renderer,
		roflcopter,
		colors = [0xf1f1f1,0x171717],

adjustWindow = () => {
			camera.aspect = window.innerWidth / window.innerHeight;
			camera.updateProjectionMatrix();
			renderer.setSize(window.innerWidth,window.innerHeight);
		},
		detectScheme = mq => {
			if (mq.matches) {
				// dark
				renderer.setClearColor(new THREE.Color(colors[1]));
				roflcopter.material.color.set(colors[0]);
			} else {
				// light
				renderer.setClearColor(new THREE.Color(colors[0]));
				roflcopter.material.color.set(colors[1]);
			}
		},
		init = () => {
			// setup
			scene = new THREE.Scene();
			camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
			renderer = new THREE.WebGLRenderer();
			renderer.setClearColor(new THREE.Color(colors[0]));
			renderer.setSize(window.innerWidth, window.innerHeight);
			renderer.shadowMap.enabled = true;

// roflcopter
			roflcopter = new Roflcopter(colors[1]);
			scene.add(roflcopter.mesh);
			
			// camera
			camera.position.set(-30,0,0);
			camera.lookAt(scene.position);
			let camControls = new THREE.OrbitControls(camera,renderer.domElement);
			
			// use proper scheme for light or dark mode
			if (window.matchMedia) {
				const mq = window.matchMedia("(prefers-color-scheme: dark)");
				mq.addListener(detectScheme);
				detectScheme(mq);
			}

// render
			document.body.appendChild(renderer.domElement);
			renderScene();
		},
		renderScene = () => {
			update();
			renderer.render(scene,camera);
			requestAnimationFrame(renderScene);
		},
		update = () => {
			// allow characters to look at user
			roflcopter.mesh.traverse(child => {
				if (child instanceof THREE.Mesh)
					child.lookAt(camera.position);
			});
			roflcopter.spin();
		};

init();
	window.addEventListener("resize",adjustWindow);
}

class Roflcopter {
	constructor(color) {
		this.spinAngle = 0;
		this.spinSpeed = 6;

this.material = new THREE.MeshBasicMaterial({
			color: color
		});
		this.mesh = new THREE.Object3D();
		this.mesh.name = "roflcopter";

this.propeller = new THREE.Object3D();
		this.propeller.position.y = 5.25;
		this.mesh.add(this.propeller);

this.rearBlades = new THREE.Object3D();
		this.rearBlades.position.set(0,0.75,-9);
		this.mesh.add(this.rearBlades);

let fontLoader = new THREE.FontLoader();
		fontLoader.load("https://threejs.org/examples/fonts/helvetiker_regular.typeface.json", font => {
			let params =  {
					font: font,
					size: 1,
					height: 0,
					curveSegments: 8
				},
				mat = this.material,
				chars = [
					new THREE.TextBufferGeometry("R",params),
					new THREE.TextBufferGeometry("O",params),
					new THREE.TextBufferGeometry("F",params),
					new THREE.TextBufferGeometry("L",params),
					new THREE.TextBufferGeometry("I",params),
					new THREE.TextBufferGeometry(":",params),
					new THREE.TextBufferGeometry("^",params),
					new THREE.TextBufferGeometry("-",params),
					new THREE.TextBufferGeometry("?",params),
					new THREE.TextBufferGeometry("_",params),
					new THREE.TextBufferGeometry("=",params),
					new THREE.TextBufferGeometry("/",params),
					new THREE.TextBufferGeometry("\\",params),
					new THREE.TextBufferGeometry("[",params),
					new THREE.TextBufferGeometry("]",params)
				];

// character centering
			for (let c of chars) {
				c.computeBoundingBox();
				c.translate(0,0,-c.boundingBox.max.x/2);
			}
			let [R,O,F,L,I,colon,caret,dash,emDash,underscore,equals,slash,backslash,leftBracket,rightBracket] = chars;

/* Propeller Parts */
			let propeller_children = [R,O,F,L,colon,R,O,F,L,colon,L,O,L,colon,R,O,F,L,colon,R,O,F,L],
				propeller_childZ = -11;

for (let c of propeller_children) {
				let child = new THREE.Mesh(c,mat);
				child.position.z = propeller_childZ;
				this.propeller.add(child);
				++propeller_childZ;
			}

/* Top Axle */
			let child = new THREE.Mesh(caret,mat);
			child.position.y = 3.75;
			this.mesh.add(child);

/* Top */
			for (let z = -5; z < 4; ++z) {
				let char = z == -5 ? slash : emDash,
					child = new THREE.Mesh(char,mat);
				child.position.set(0,2.25,z);
				this.mesh.add(child);
			}

/* Upper Middle */
			// rear blade parts
			let rearBladeCenter = new THREE.Mesh(O,mat);
			this.rearBlades.add(rearBladeCenter);

let topBlade = new THREE.Mesh(L,mat);
			topBlade.position.y = 1.5;
			this.rearBlades.add(topBlade);

let rightBlade = new THREE.Mesh(L,mat);
			rightBlade.position.z = 1;
			this.rearBlades.add(rightBlade);

let bottomBlade = new THREE.Mesh(L,mat);
			bottomBlade.position.y = -1.5;
			this.rearBlades.add(bottomBlade);

let leftBlade = new THREE.Mesh(L,mat);
			leftBlade.position.z = -1;
			this.rearBlades.add(leftBlade);

// tail
			for (let z = -7; z < -4; ++z) {
				let child = new THREE.Mesh(equals,mat);
				child.position.set(0,0.75,z);
				this.mesh.add(child);
			}
			// window
			let windowPt1 = new THREE.Mesh(leftBracket,mat);
			windowPt1.position.set(0,0.75,2);
			this.mesh.add(windowPt1);
			let windowPt2 = new THREE.Mesh(rightBracket,mat);
			windowPt2.position.set(0,0.75,3);
			this.mesh.add(windowPt2);

// front
			let upperFront = new THREE.Mesh(backslash,mat);
			upperFront.position.set(0,0.75,4);
			this.mesh.add(upperFront);

/* Lower Middle */
			for (let z = -4; z < 6; z+=9) {
				let child = new THREE.Mesh(backslash,mat);
				child.position.set(0,-0.75,z);
				this.mesh.add(child);
			}

/* Bottom */
			for (let z = -3; z < 7; ++z) {
				let char = underscore;
				if (z == -3)
					char = backslash;
				else if (z == 6)
					char = rightBracket;

let child = new THREE.Mesh(char,mat);
				child.position.set(0,-2.25,z);
				this.mesh.add(child);

if (z == 4)
					++z;
			}
			/* Legs */
			for (let z = -1; z < 4; z+=4) {
				let child = new THREE.Mesh(I,mat);
				child.position.set(0,-3.75,z);
				this.mesh.add(child);
			}
			/* Skis */
			for (let z = -3; z < 9; ++z) {
				let char = z < 8 ? dash : slash,
					child = new THREE.Mesh(char,mat);
				child.position.set(0,-5.25,z);
				this.mesh.add(child);
			}
		});
	}
	spin() {
		this.spinAngle += this.spinSpeed;

if (this.spinAngle >= 360)
			this.spinAngle = 0;

let angleToRad = this.spinAngle * Math.PI/180;
		this.rearBlades.rotation.x = angleToRad;
		this.propeller.rotation.y = angleToRad;
	}
}

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg