Davison Pro Davisonpro

🎯

Focusing

I am a Full Stack Web Developer, UI/UX and Javascript specialist. I enjoy each aspect, and love building sites & mobile apps.

Davisonpro / scene.js

Created January 28, 2019 20:03

Scene

	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

	var renderer = new THREE.WebGLRenderer();
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

Davisonpro / box-geometry.js

Created January 28, 2019 20:08

Box Geometry

	var geometry = new THREE.BoxGeometry( 1, 1, 1 );
	var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	var cube = new THREE.Mesh( geometry, material );
	scene.add( cube );

	camera.position.z = 5;

Davisonpro / game.html

Created January 28, 2019 20:12

Game Play

	<html>
	<head>
	<title>My first three.js app</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
	<script src="js/three.js"></script>

Davisonpro / my-game.html

Created January 29, 2019 05:21

	<html>
	<head>
	<title>My first three.js app</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
	<script src="https://threejs.org/build/three.js"></script>

Davisonpro / game.html

Created February 3, 2019 17:17

The background of the game

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>The Monster and the Rabbit</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
	</head>
	<body>

Davisonpro / main.css

Created February 3, 2019 17:22

Game css

	@import url('https://fonts.googleapis.com/css?family=Voltaire');

	html, body {
	height: 100%;
	padding: 0;
	margin: 0;
	}
	, :before, *:after {
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;

Davisonpro / main.js

Last active February 3, 2019 21:21

Initialize


	var scene,
	camera, fieldOfView, aspectRatio, nearPlane, farPlane,
	gobalLight, shadowLight, backLight,
	renderer,
	container;

	var delta = 0;
	var floorRadius = 200;
	var cameraPosGame = 160;

Davisonpro / lighting.js

Created February 3, 2019 18:32

	function createLights() {
	globalLight = new THREE.AmbientLight(0xffffff, .9);

	shadowLight = new THREE.DirectionalLight(0xffffff, 1);
	shadowLight.position.set(-30, 40, 20);
	shadowLight.castShadow = true;
	shadowLight.shadow.camera.left = -400;
	shadowLight.shadow.camera.right = 400;
	shadowLight.shadow.camera.top = 400;
	shadowLight.shadow.camera.bottom = -400;

Davisonpro / createFloor.js

Last active February 3, 2019 19:13

	function createFloor() {

	floorShadow = new THREE.Mesh(new THREE.SphereGeometry(floorRadius, 50, 50), new THREE.MeshPhongMaterial({
	color: 0x7abf8e,
	specular: 0x000000,
	shininess: 1,
	transparent: true,
	opacity: .5
	}));
	//floorShadow.rotation.x = -Math.PI / 2;

Davisonpro / materials.js

Created February 3, 2019 19:18

	// Materials
	var blackMat = new THREE.MeshPhongMaterial({
	color: 0x100707,
	shading: THREE.FlatShading,
	});

	var brownMat = new THREE.MeshPhongMaterial({
	color: 0xb44b39,
	shininess: 0,
	shading: THREE.FlatShading,