Majesty of waves II

Developer
Size
3,342 Kb
Views
34,408

How do I make an majesty of waves ii?

Just a bit of three.js + requirejs for the wrap.. What is a majesty of waves ii? How do you make a majesty of waves ii? This script and codes were developed by Jeff Ibacache on 23 June 2022, Thursday.

Majesty of waves II Previews

Majesty of waves II - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Majesty of waves II</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.15/require.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Majesty of waves II - Script Codes CSS Codes

body { margin: 0; }
canvas { width: 100%; height: 100% }

Majesty of waves II - Script Codes JS Codes

requirejs.config({ baseUrl: 'scripts', paths: { three:'https://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min', }, shim: { three:{ exports:'THREE' } }, waitSeconds:0
});
require(['polyrace'], function(Polyrace){	var game = new Polyrace();
});
define('polyrace', ['three', 'components/star'], function(THREE, Star){	"use strict";	var Polyrace = function(){	this.generateStars = false;	this.generateCount = 0;	this.generateMax = 0;	this.time = 0;	this.init();	};	Polyrace.prototype = {	init:function(){	this.configThree();	this.configStars();	this.configDemo();	this.configResize();	this.jump();	this.loop();	},	jump:function(){	var i = 250;	for(i; i > -1; --i)	{	this.updateStars();	this.updateThree();	this.time += 1;	}	},	configDemo:function(){	this.generateStars = true;	},	configStars:function(){	this.stars = [];	this.starsPool = [];	this.starsView = new THREE.Group();	var i = 1000 - 1;	for(i; i > -1; --i){	var star = new Star(this);	this.starsPool.push(star);	}	this.scene.add(this.starsView);	},	configThree:function(){	this.scene = new THREE.Scene();	this.camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 13000);	this.camera.position.z = 100;	this.scene.fog = new THREE.FogExp2( 0xFFFFFF, 0.0009 );	this.renderer = new THREE.WebGLRenderer();	this.renderer.setSize(window.innerWidth, window.innerHeight);	this.renderer.setClearColor(0xFFFFFF); this.directionalLight = new THREE.DirectionalLight( 0xFF0000, 1 ); this.directionalLight.position.set( -1, 1, 1 ); this.scene.add( this.directionalLight ); this.landLight = new THREE.HemisphereLight ( 0xFFFFFF, 0xFF0000, 1 ); this.landLight.position.set( -1, 1, 1 ); this.scene.add( this.landLight );	document.body.appendChild(this.renderer.domElement);	},	configResize:function(){	var self = this;	window.addEventListener('resize', function(){self.onResize();});	window.addEventListener('deviceOrientation', function(){self.onResize();});	},	onResize:function(){	this.camera.aspect = window.innerWidth / window.innerHeight;	this.camera.updateProjectionMatrix();	this.renderer.setSize(window.innerWidth, window.innerHeight);	},	loop:function(){	var self = this;	this.updateStars();	this.updateThree();	this.time += 1;	requestAnimationFrame(function(){self.loop();});	},	updateStars:function(){	if(this.generateStars) {	if(this.generateCount++ == this.generateMax) {	this.generateCount = 0;	this.generateStar();	}	}	var i = this.stars.length - 1;	for(i; i > -1; --i){	var star = this.stars[i];	if(star.flagged) {	star.flagged = false;	this.starsPool.push(star);	this.starsView.remove(star.container);	this.stars.splice(this.stars.indexOf(star), 1);	continue;	}	star.update();	}	//this.starsView.rotation.z = Math.sin(this.time * 0.0008) * -3.14;	},	generateStar:function(){	var star = this.starsPool.pop();	if(star) {	star.resetPosition();	this.stars.push(star);	this.starsView.add(star.container);	}	},	updateThree:function(){ this.camera.rotation.z += 0.0025; this.camera.position.x = Math.cos(this.time * 0.03 + 0.4) * 250; this.camera.position.y = Math.sin(this.time * 0.03 + 0.4) * 250; this.camera.position.z = 3000;	this.renderer.render(this.scene, this.camera);	},	constructor:Polyrace	};	return Polyrace;
});
define('components/star', ['three'], function(THREE){	"use strict";	var Star = function(polyrace){	this.polyrace = polyrace;	this.init();	};	Star.prototype = {	init:function(){	this.flagged = false;	this.pos = { x:0, y:0, z:0 };	this.vel = { x:0, y:0, z:0 };	this.radius = 20; this.container = new THREE.Group();	this.generateAsset();	},	generateAsset:function(){	this.geom = new THREE.BoxGeometry( 10000, 1000, 2000 );	this.mat = new THREE.MeshNormalMaterial ( { fog:true, color:0xFF0000, wireframe:false } );	this.mesh = new THREE.Mesh( this.geom, this.mat ); this.mesh.position.x = 6000; this.container.add(this.mesh);	},	update:function(){	this.vel.z = 40;	this.pos.z += this.vel.z;	this.container.position.x = this.pos.x;	this.container.position.y = this.pos.y;	this.container.position.z = this.pos.z; //this.mesh.rotation.y += 0.01; //this.container.rotation.z += 0.01;	if(this.pos.z > 3000) {	this.flagged = true;	}	if(this.radius < 8 && Math.random() > 0.9) {	this.mat.transparent = true;	if(this.polyrace.time & 4) {	this.mat.opacity = 0;	}	else {	this.mat.opacity = 1;	}	} else {	this.mat.transparent = false;	}	},	resetPosition:function(){	//this.radius = 20;	//this.mesh.scale.set(this.radius, this.radius, this.radius);	var fx = Math.cos(this.polyrace.time * 0.0005) * 0.5 + 3;	this.pos.x = Math.cos((this.polyrace.time * fx)) * 500 + Math.cos(this.polyrace.time * 0.03) * 500;	this.pos.y = Math.sin((this.polyrace.time * fx)) * 500 + Math.sin(this.polyrace.time * 0.03) * 500;;	this.pos.z = -3000; this.container.rotation.z = Math.atan2(this.pos.y, this.pos.x); this.mesh.rotation.y = 0;	/*this.pos.x = Math.cos((this.polyrace.time * fx)) * (Math.cos(this.polyrace.time * 0.006) * 0.5 + 0.7) * 320;	this.pos.y = Math.sin((this.polyrace.time * fx)) * (Math.cos(this.polyrace.time * 0.0062) * 0.5 + 0.7) * 320 + Math.sin(this.polyrace.time * 0.01) * 300;	this.pos.z = -3000;*/ /*this.container.rotation.x = Math.cos((this.polyrace.time * fx)) * (Math.cos(this.polyrace.time * 0.006) * 0.5 + 0.7); this.container.rotation.y = Math.sin((this.polyrace.time * fx)) * (Math.sin(this.polyrace.time * 0.006) * 0.5 + 0.7);*/	/*this.pos.x = 0;	this.pos.y = 0;	this.pos.z = 0;*/	},	constructor:Star	};	return Star;
});
Majesty of waves II - Script Codes
Majesty of waves II - Script Codes
Home Page Home
Developer Jeff Ibacache
Username jeffibacache
Uploaded June 23, 2022
Rating 3
Size 3,342 Kb
Views 34,408
Do you need developer help for Majesty of waves II?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Jeff Ibacache (jeffibacache) Script Codes
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!