Skip to content

Instantly share code, notes, and snippets.

@lifebeyondfife

lifebeyondfife/bear.html

Created May 1, 2017 18:56
Show Gist options
  • Save lifebeyondfife/3dc210d5548f13da5fc86d5a56f307a1 to your computer and use it in GitHub Desktop.
Save lifebeyondfife/3dc210d5548f13da5fc86d5a56f307a1 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bear.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Furtive Bear</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
<script>
var materialLightGrey = new THREE.MeshBasicMaterial({ color: 0xE7E7E7 });
var materialGrey = new THREE.MeshBasicMaterial({ color: 0xCECECE });
var materialDarkGrey = new THREE.MeshBasicMaterial({ color: 0x7A7A7A });
var materialBlack = new THREE.MeshBasicMaterial({ color: 0x000000 });
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var lightGreyBricks = [
{ x: 1, y: 2 },
{ x: 1, y: 3 },
{ x: 1, y: 11 },
{ x: 1, y: 12 },
{ x: 2, y: 1 },
{ x: 2, y: 2 },
{ x: 2, y: 3 },
{ x: 2, y: 4 },
{ x: 2, y: 5 },
{ x: 2, y: 6 },
{ x: 2, y: 7 },
{ x: 2, y: 8 },
{ x: 2, y: 9 },
{ x: 2, y: 10 },
{ x: 2, y: 11 },
{ x: 2, y: 12 },
{ x: 2, y: 13 },
{ x: 3, y: 2 },
{ x: 3, y: 3 },
{ x: 3, y: 4 },
{ x: 3, y: 5 },
{ x: 3, y: 6 },
{ x: 3, y: 7 },
{ x: 3, y: 8 },
{ x: 3, y: 9 },
{ x: 3, y: 10 },
{ x: 3, y: 11 },
{ x: 3, y: 12 },
{ x: 4, y: 2 },
{ x: 4, y: 3 },
{ x: 4, y: 4 },
{ x: 4, y: 5 },
{ x: 4, y: 6 },
{ x: 4, y: 7 },
{ x: 4, y: 8 },
{ x: 4, y: 9 },
{ x: 4, y: 10 },
{ x: 4, y: 11 },
{ x: 4, y: 12 },
{ x: 5, y: 2 },
{ x: 5, y: 3 },
{ x: 5, y: 4 },
{ x: 5, y: 5 },
{ x: 5, y: 6 },
{ x: 5, y: 7 },
{ x: 5, y: 8 },
{ x: 5, y: 9 },
{ x: 5, y: 10 },
{ x: 5, y: 11 },
{ x: 5, y: 12 },
{ x: 6, y: 2 },
{ x: 6, y: 3 },
{ x: 6, y: 4 },
{ x: 6, y: 5 },
{ x: 6, y: 6 },
{ x: 6, y: 7 },
{ x: 6, y: 8 },
{ x: 6, y: 9 },
{ x: 6, y: 10 },
{ x: 6, y: 11 },
{ x: 6, y: 12 },
{ x: 7, y: 2 },
{ x: 7, y: 3 },
{ x: 7, y: 4 },
{ x: 7, y: 5 },
{ x: 7, y: 6 },
{ x: 7, y: 7 },
{ x: 7, y: 8 },
{ x: 7, y: 9 },
{ x: 7, y: 10 },
{ x: 7, y: 11 },
{ x: 7, y: 12 },
{ x: 8, y: 2 },
{ x: 8, y: 3 },
{ x: 8, y: 4 },
{ x: 8, y: 5 },
{ x: 8, y: 6 },
{ x: 8, y: 7 },
{ x: 8, y: 8 },
{ x: 8, y: 9 },
{ x: 8, y: 10 },
{ x: 8, y: 11 },
{ x: 8, y: 12 },
{ x: 9, y: 3 },
{ x: 9, y: 4 },
{ x: 9, y: 5 },
{ x: 9, y: 6 },
{ x: 9, y: 7 },
{ x: 9, y: 8 },
{ x: 9, y: 9 },
{ x: 9, y: 10 },
{ x: 9, y: 11 },
{ x: 10, y: 4 },
{ x: 10, y: 5 },
{ x: 10, y: 6 },
{ x: 10, y: 7 },
{ x: 10, y: 8 },
{ x: 10, y: 9 },
{ x: 10, y: 10 },
{ x: 11, y: 5 },
{ x: 11, y: 6 },
{ x: 11, y: 7 },
{ x: 11, y: 8 },
{ x: 11, y: 9 },
{ x: 12, y: 6 },
{ x: 12, y: 7 },
{ x: 12, y: 8 }
];
var greyBricks = [
{ x: 2, y: 2 },
{ x: 2, y: 3 },
{ x: 2, y: 11 },
{ x: 2, y: 12 },
{ x: 3, y: 3 },
{ x: 3, y: 4 },
{ x: 3, y: 5 },
{ x: 3, y: 6 },
{ x: 3, y: 7 },
{ x: 3, y: 8 },
{ x: 3, y: 9 },
{ x: 3, y: 10 },
{ x: 3, y: 11 },
{ x: 4, y: 3 },
{ x: 4, y: 4 },
{ x: 4, y: 5 },
{ x: 4, y: 6 },
{ x: 4, y: 7 },
{ x: 4, y: 8 },
{ x: 4, y: 9 },
{ x: 4, y: 10 },
{ x: 4, y: 11 },
{ x: 5, y: 3 },
{ x: 5, y: 4 },
{ x: 5, y: 5 },
{ x: 5, y: 6 },
{ x: 5, y: 7 },
{ x: 5, y: 8 },
{ x: 5, y: 9 },
{ x: 5, y: 10 },
{ x: 5, y: 11 },
{ x: 6, y: 3 },
{ x: 6, y: 4 },
{ x: 6, y: 5 },
{ x: 6, y: 6 },
{ x: 6, y: 7 },
{ x: 6, y: 8 },
{ x: 6, y: 9 },
{ x: 6, y: 10 },
{ x: 6, y: 11 },
{ x: 7, y: 3 },
{ x: 7, y: 4 },
{ x: 7, y: 5 },
{ x: 7, y: 6 },
{ x: 7, y: 7 },
{ x: 7, y: 8 },
{ x: 7, y: 9 },
{ x: 7, y: 10 },
{ x: 7, y: 11 },
{ x: 8, y: 3 },
{ x: 8, y: 4 },
{ x: 8, y: 5 },
{ x: 8, y: 6 },
{ x: 8, y: 7 },
{ x: 8, y: 8 },
{ x: 8, y: 9 },
{ x: 8, y: 10 },
{ x: 8, y: 11 },
{ x: 9, y: 4 },
{ x: 9, y: 5 },
{ x: 9, y: 6 },
{ x: 9, y: 7 },
{ x: 9, y: 8 },
{ x: 9, y: 9 },
{ x: 9, y: 10 },
{ x: 10, y: 5 },
{ x: 10, y: 6 },
{ x: 10, y: 7 },
{ x: 10, y: 8 },
{ x: 10, y: 9 },
{ x: 11, y: 6 },
{ x: 11, y: 7 },
{ x: 11, y: 8 }
];
var darkGreyBricks = [
{ x: 6, y: 5 },
{ x: 6, y: 9 },
{ x: 7, y: 5 },
{ x: 7, y: 9 },
{ x: 8, y: 6 },
{ x: 8, y: 7 },
{ x: 8, y: 8 },
{ x: 9, y: 5 },
{ x: 9, y: 6 },
{ x: 9, y: 7 },
{ x: 9, y: 8 },
{ x: 9, y: 9 },
{ x: 10, y: 6 },
{ x: 10, y: 7 },
{ x: 10, y: 8 }
];
var blackBricks = [
{ x: 7, y: 5 },
{ x: 7, y: 9 },
{ x: 9, y: 7 },
{ x: 9, y: 8 },
{ x: 10, y: 7 }
]
var geometry = new THREE.BoxGeometry(1, 1, 0.5);
lightGreyBricks.forEach(position => {
var brick = new THREE.Mesh(geometry, materialLightGrey);
brick.position.x += position.x;
brick.position.y += position.y;
scene.add(brick);
});
greyBricks.forEach(position => {
var brick = new THREE.Mesh(geometry, materialGrey);
brick.position.x += position.x;
brick.position.y += position.y;
brick.position.z = 0.5;
scene.add(brick);
});
darkGreyBricks.forEach(position => {
var brick = new THREE.Mesh(geometry, materialDarkGrey);
brick.position.x += position.x;
brick.position.y += position.y;
brick.position.z = 1;
scene.add(brick);
});
blackBricks.forEach(position => {
var brick = new THREE.Mesh(geometry, materialBlack);
brick.position.x += position.x;
brick.position.y += position.y;
brick.position.z = 1.5;
scene.add(brick);
})
camera.rotation.z = Math.PI / 2;
camera.position.z = 12;
camera.position.x = 8;
camera.position.y = 4;
var renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize(window.innerWidth - 10, window.innerHeight - 10);
document.body.appendChild(renderer.domElement);
var moveX = 0.01;
var moveY = 0.02;
function render() {
requestAnimationFrame(render);
moveCameraX();
moveCameraY();
renderer.render(scene, camera);
}
render();
function moveCameraX() {
if (camera.position.x < 4 && moveX < 0) {
moveX *= -1;
} else if (camera.position.x > 9 && moveX > 0) {
moveX *= -1;
}
camera.position.x += moveX;
}
function moveCameraY() {
if (camera.position.y < 3 && moveY < 0) {
moveY *= -1;
} else if (camera.position.y > 12 && moveY > 0) {
moveY *= -1;
}
camera.position.y += moveY;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment