Three.js

Three.js is a 3D engine that runs in the browser (a webGL-based API wrapper) and you can use it to create a series of 3D animated scenes that you need.

The basic idea

Create the basic elements
Create a transparent 2d rectangle and map it to simulate the phone
Create a transparent 2d rectangle and map the foreground
Iterate randomly to create other decorative small objects
Detect migration events by listening for mouse movement
Set the phone offset by the move in event and position
Tween. js implements object offset transition
Add decorative small object animation to render
Change the direction of movement of decorative small objects regularly

Access to the source code

https://github.com/jiangzetian/CanvasDemo/tree/master/filp-card
Copy the code

The project structure

The filp - card / / project root directory | ├ ─ ─ index. The HTML (project entry) | ├ ─ ─ CSS │ └ ─ ─ index. The CSS / / style file ├ ─ ─ img │ ├ ─ ─ pic1. PNG images / / | └ ─ ─ pic2. PNG / / picture └ ─ ─ js └ ─ ─ threejs ├ ─ ─ OrbitControls. Js/library/control ├ ─ ─ three. Js/library/three ├ ─ ─ three. Min. Js/library/three compression ├ ─ ─ tweenjs. Js/library/animation └ ─ ─ Tweenjs.min.js // animation library compressionCopy the code

Basic code

<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flip CARDS</title>
		<link href="css/index.css" rel="stylesheet" />
		<script src="js/threejs/three.js"></script>
		<script src="js/threejs/tweenjs.js"></script>
		<script src="js/threejs/OrbitControls.js"></script>
	</head>
	<body>
		<div id="retina"></div>
	</body>
	<script>
		// The page is loaded
		window.onload = function() {
			create();
		}

		function create() {
			initRender(); // Create renderer
			initCamera(); // Create camera
			initLight(); // Create light source
			initObject(); // Create object
			initBgCubes();// Create a decorative object
			initSprite(); // Create the image
			initScene(); // Create a scene
			//initControls()// View controller development for observation
			initMouse() // Mouse monitor
			initBgCubesAnime();// Object movement control
			render(); / / rendering
		}

		/ / the renderer
		var renderer;
		var width;
		var height;
		function initRender() {}

		/ / camera
		var camera;
		var origPoint = new THREE.Vector3(0.0.0);
		function initCamera() {}

		/ / light
		var pointLight;
		var ambientLight;
		function initLight() {}

		1 / / object
		var cube;
		function initObject() {}
		
		// Decorate the object
		var bgCubes = [];
		var count = 20;
		function initBgCubes() {}
		
		/ / picture 1
		var image_1;
		function initSprite() {}


		// Create a scene
		var scene;
		function initScene() {}

		// Interactive plug-in
		var controls;
		function initControls() {}
		
		// Decorate object move
		var cubeV = {v: -0.1}
		function initBgCubesAnime(){}
		
		/ / rendering
		function render() {}

		// Mouse monitor
		function initMouse() {}
	</script>
</html>
Copy the code

The complete code

<! Path: / index. HTML - >
<! DOCTYPEhtml>
<html>
	<head>
		<meta charset="utf-8">
		<title>Flip CARDS</title>
		<link href="css/index.css" rel="stylesheet" />
		<script src="js/threejs/three.js"></script>
		<script src="js/threejs/tweenjs.js"></script>
		<script src="js/threejs/OrbitControls.js"></script>
	</head>
	<body>
		<div id="retina"></div>
	</body>
	<script>
		// The page is loaded
		window.onload = function() {
			create();
		}

		function create() {
			initRender(); // Create renderer
			initCamera(); // Create camera
			initLight(); // Create light source
			initObject(); // Create object
			initBgCubes();// Create a decorative object
			initSprite(); // Create the image
			initScene(); // Create a scene
			// initControls()// View controller
			initMouse() // Mouse monitor
			initBgCubesAnime();// Object movement control
			render(); / / rendering
		}

		/ / the renderer
		var renderer;
		var width;
		var height;

		function initRender() {
			width = window.innerWidth;
			height = window.innerHeight;
			renderer = new THREE.WebGLRenderer({
				antialias: true.// Anti-aliasing on
			})
			renderer.setSize(width, height); // Set the renderer width and height
			renderer.setClearColor('# 000000'.1.0); // Set the background color
			renderer.setPixelRatio(window.devicePixelRatio); // Set the device pixel ratio
			document.getElementById('retina').appendChild(renderer.domElement); // Put the renderer into the page
		}

		/ / camera
		var camera;
		var origPoint = new THREE.Vector3(0.0.0);

		function initCamera() {
			camera = new THREE.PerspectiveCamera(45, width / height, 1.2000);
			camera.position.set(0.0.900); // Camera position
			camera.up.set(0.1.0) // Set the camera orientation
			camera.lookAt(origPoint); // Set the camera view
		}

		/ / light
		var pointLight;
		var directionalLight ;
		var ambientLight;

		function initLight() {
			/ / the point light source
			pointLight = new THREE.PointLight(0xffffff);
			pointLight.position.set(-800.0.1000);
			
			directionalLight  = new THREE.DirectionalLight(0xffffff);
			directionalLight .position.set(-1000.0.0);
			
			/ / the ambient light
			ambientLight = new THREE.AmbientLight(0xffffff);
			ambientLight.position.set(0.0.2000);
		}

		1 / / object
		var cube;

		function initObject() {
			var spriteMap = new THREE.TextureLoader().load("img/pic1.png");
			var geometry = new THREE.PlaneBufferGeometry(260.440);
			var material = new THREE.MeshMatcapMaterial({
				map: spriteMap,
				transparent: true}); cube =new THREE.Mesh(geometry, material);
			cube.position.set(0.0.0);
			cube.name = 'cube';
		}
		
		var bgCubes = [];
		var count = 20;
		function initBgCubes() {
			for(let i=0; i<count; i++){let geometry;
				let rand = Math.round(Math.random()*(8-1) +1);
				switch(rand){
					case 1:
						geometry = new THREE.BoxGeometry(30.30.30);
						break;
					case 2:
						geometry = new THREE.TorusBufferGeometry(20.8.16.100);
						break;
					case 3:
						geometry = new THREE.ConeGeometry(15.40.32);
						break;
					case 4:
						geometry = new THREE.CylinderGeometry(10.10.30.32);
						break;
					case 5:
						geometry =  new THREE.TetrahedronBufferGeometry(20);	
						break;
					case 6:
						geometry = new THREE.SphereGeometry( 15.32.32 );
						break;	
					case 7:
						geometry = new THREE.OctahedronGeometry( 15 );
						break;	
					case 8:
						geometry = new THREE.DodecahedronGeometry( 15 );
						break;			
				}
				let material = new THREE.MeshPhongMaterial({
					color: 0x3546FF});let cube = new THREE.Mesh(geometry, material);
				if(i<count/2) {let cw = width;
					let ch = height-150;
					let r = 500;
					let maxcount = count/2;
					let x = cw/2-(cw/(maxcount+1))*(i+1);
					let y = ch/2-(ch/(maxcount+1))*(i+1);
					let z = Math.pow(r,2) -Math.pow(cw/2-(cw/(maxcount+1))*(i+1),2);
					cube.position.set(x, y-50.Math.sqrt(z));
				}else{
					let cw = width;
					let ch = height-150;
					let r = 500;
					let maxcount = count/2;
					let index = i - count/2;
					let x = cw/2-(cw/(maxcount+1))*(index+1);
					let y = ch/2-(ch/(maxcount+1))*(index+1);
					let z = Math.pow(r,2) -Math.pow(cw/2-(cw/(maxcount+1))*(index+1),2);
					cube.position.set(x, y, -Math.sqrt(z));
				}	
				bgCubes.push(cube)
			}
		}

		/ / picture 1
		var image_1;

		function initSprite() {
			var spriteMap = new THREE.TextureLoader().load("img/pic2.png");
			var geometry = new THREE.PlaneBufferGeometry(220.400);
			var material = new THREE.MeshBasicMaterial({
				map: spriteMap,
				transparent: true}); image_1 =new THREE.Mesh(geometry, material);
			image_1.position.set(0.0.100);
		}


		// Create a scene
		var scene;

		function initScene() {
			scene = new THREE.Scene();
			scene.add(pointLight);
			scene.add(directionalLight);
			scene.add(ambientLight);
			scene.add(cube);
			for(let i=0; i<bgCubes.length; i++){ scene.add(bgCubes[i]); } scene.add(image_1); }// Interactive plug-in
		var controls;

		function initControls() {
			controls = new THREE.OrbitControls(camera, renderer.domElement);
		}
		
		// Decorate object move
		var cubeV = {v: -0.1}
		function initBgCubesAnime(){
			setInterval(() = >{
				if(cubeV.v>0){
					createjs.Tween.get(cubeV).to({v: -0.1}, 1000).addEventListener('change'.e= > {
						console.log(cubeV)
					}, false);
				}else{
					createjs.Tween.get(cubeV).to({v:0.1}, 1000).addEventListener('change'.e= > {
						console.log(cubeV)
					}, false); }},6000)}/ / rendering
		function render() {
			renderer.clear();
			for(let i=0; i<bgCubes.length; i++){ bgCubes[i].rotation.x +=Math.round(Math.random()*(5-1) +1) /1000;
				bgCubes[i].rotation.y += Math.round(Math.random()*(5-1) +1) /1000;
				bgCubes[i].rotation.z += Math.round(Math.random()*(5-1) +1) /1000;
				
				bgCubes[i].position.x += cubeV.v*Math.round(Math.random()*(2-1) +1);
				bgCubes[i].position.y += cubeV.v*Math.round(Math.random()*(2-1) +1);
				bgCubes[i].position.z += cubeV.v*Math.round(Math.random()*(2-1) +1);
			}
			renderer.render(scene, camera);
			requestAnimationFrame(render);
		}

		// Mouse monitor
		function initMouse() {
			var mouse = new THREE.Vector2();
			var raycaster = new THREE.Raycaster();
			// Move the Angle data
			var rotationData = {
				x: 0.y: 0
			};
			// Move distance data (image)
			var positionData = {
				x: 0.y: 0
			};
			// Mouse movement monitor
			document.onmousemove = function(e) {
				var mx = e.clientX;
				var my = e.clientY;
				mouse.x = (e.clientX / window.innerWidth) * 2 - 1;
				mouse.y = -(e.clientY / window.innerHeight) * 2 + 1;
				raycaster.setFromCamera(mouse, camera);
				var intersects = raycaster.intersectObjects(scene.children);
				if (intersects.length > 0) {
					for (let i = 0; i < intersects.length; i++) {
						if (intersects[i].object.name == 'cube') {
							createjs.Tween.get(rotationData).to({
								x: Math.PI / 12 * (my - height / 2) / 250.y: Math.PI / 12 * (mx - width / 2) / 150
							}, 300).addEventListener('change'.e= > {
								cube.rotation.set(rotationData.x, rotationData.y, 0);
								image_1.rotation.set(rotationData.x, rotationData.y, 0);
							}, false);

							createjs.Tween.get(positionData).to({
								x: 25 * (mx - width / 2) / 150.y: -25 * (my - height / 2) / 250
							}, 300).addEventListener('change'.e= > {
								image_1.position.set(positionData.x, positionData.y, 100);
							}, false); }}}else {
					createjs.Tween.get(rotationData).to({
						x: 0.y: 0
					}, 300).addEventListener('change'.e= > {
						cube.rotation.set(rotationData.x, rotationData.y, 0);
						image_1.rotation.set(rotationData.x, rotationData.y, 0);
					}, false);

					createjs.Tween.get(positionData).to({
						x: 0.y: 0
					}, 300).addEventListener('change'.e= > {
						image_1.position.set(positionData.x, positionData.y, 100);
					}, false); }}; }</script>
</html>
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Use 3D graphics library three.js to build a similar quark browser official website

Three.js

The basic idea

Access to the source code

The project structure

Basic code

The complete code

More front-end content welcome to pay attention to the public number: day small day personal network

Use 3D graphics library three.js to build a similar quark browser official website

Three.js

The basic idea

Access to the source code

The project structure

Basic code

The complete code

More front-end content welcome to pay attention to the public number: day small day personal network

Related Posts

A basic problem ignored by the front end, do not believe you will see a few questions

React elements render the React element

Key render path