Skip to content

Instantly share code, notes, and snippets.

@satyagames

satyagames/index.html

Created August 11, 2017 08:03
Show Gist options
  • Save satyagames/6fb51819180e6b0d4383b82d2789814b to your computer and use it in GitHub Desktop.
Save satyagames/6fb51819180e6b0d4383b82d2789814b to your computer and use it in GitHub Desktop.
Download ZIP
three.js webgl - interactive cubes // source https://jsbin.com/vupenil
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - interactive cubes</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body style="margin:0;overflow:hidden;">
<div style="position:fixed;background:silver;left:0;top:50%;width:100%;height:1px;z-index:10;"></div><div style="position:fixed;background:silver;top:0;left:50%;height:100%;width:1px;z-index:10;"></div>
<div style="position:fixed;background:rgba(255,255,255,0.9);" onmouseout="new function(){controls=new function(){this.moveX=0;this.moveY=0;this.moveZ=0;this.rotateX=0;this.rotateY=0;};}"><a href="javascript:void(0);" onmousedown="new function(){controls.moveX=1;clickedIn=false;}" onmouseup="new function(){controls.moveX=0;}">Move Right</a> <a href="javascript:void(0);" onmousedown="new function(){controls.moveX-=1;clickedIn=false;}" onmouseup="new function(){controls.moveX=0;}">Move Left</a> <a href="javascript:void(0);" onmousedown="new function(){controls.moveY=-1;clickedIn=false;}" onmouseup="new function(){controls.moveY=0;}">Move Down</a> <a href="javascript:void(0);" onmousedown="new function(){controls.moveY=1;clickedIn=false;}" onmouseup="new function(){controls.moveY=0;}">Move Up</a> <a href="javascript:void(0);" onmousedown="new function(){controls.moveZ=1;clickedIn=false;}" onmouseup="new function(){controls.moveZ=0;}">Move Back</a> <a href="javascript:void(0);" onmousedown="new function(){controls.moveZ=-1;clickedIn=false;}" onmouseup="new function(){controls.moveZ=0;}">Move Front</a> <a href="javascript:void(0);" onmousedown="new function(){controls.rotateY=1;clickedIn=false;}" onmouseup="new function(){controls.rotateY=0;}">Rotate Right</a> <a href="javascript:void(0);" onmousedown="new function(){controls.rotateY=-1;clickedIn=false;}" onmouseup="new function(){controls.rotateY=0;}">Rotate Left</a> <a href="javascript:void(0);" onmousedown="new function(){controls.rotateX=1;clickedIn=false;}" onmouseup="new function(){controls.rotateX=0;}">Rotate Up</a> <a href="javascript:void(0);" onmousedown="new function(){controls.rotateX=-1;clickedIn=false;}" onmouseup="new function(){controls.rotateX=0;}">Rotate Down</a></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<script>
var container;
var camera, scene, raycasterClick, raycasterCenter, renderer;
var mouse = new THREE.Vector2(),
center=new THREE.Vector2(),
INTERSECTED=[],clickedIn=false,controls;
var clock = new THREE.Clock();
init();
animate();
function init() {
controls = new function () {
this.moveX = 0;
this.moveY = 0;
this.moveZ = 0;
this.rotateX = 0;
this.rotateY = 0;
}
container = document.createElement('div');
document.body.appendChild(container);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z=200;
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(1, 1, 1).normalize();
scene.add(light);
var geometry = new THREE.BoxBufferGeometry(20, 20, 20);
for (var i = 0; i < 50; i++) {
var object = new THREE.Mesh(geometry, new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff }));
object.name = 'Index:' + i;
object.userData.foo = 'foo';
object.position.x = Math.floor(Math.random() * 201) - 100;
object.position.y = Math.floor(Math.random() * 201) - 100;
object.position.z = Math.floor(Math.random() * 201) - 100;
object.rotation.x = Math.random() * 2 * Math.PI;
object.rotation.y = Math.random() * 2 * Math.PI;
object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.x = Math.random() + 0.5;
object.scale.y = Math.random() + 0.5;
object.scale.z = Math.random() + 0.5;
scene.add(object);
}
renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xf0f0f0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.sortObjects = false;
container.appendChild(renderer.domElement);
container.addEventListener('click', function (event) {
event.preventDefault();
clickedIn = true;
mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
}, false);
window.addEventListener('resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}, false);
raycasterClick = new THREE.Raycaster();
raycasterCenter = new THREE.Raycaster();
raycasterCenter.x=window.innerWidth/2;
raycasterCenter.y=window.innerHeight/2;
}
function animate() {
requestAnimationFrame(animate);
// motion
var delta = clock.getDelta(), step = 100, stepAngle = Math.PI / 2;
if (controls.moveX == 1) camera.translateX(step * delta);
else if (controls.moveX == -1) camera.translateX(-step * delta);
if (controls.moveY == 1) camera.translateY(step * delta);
else if (controls.moveY == -1) camera.translateY(-step * delta);
if (controls.moveZ == 1) camera.translateZ(step * delta);
else if (controls.moveZ == -1) camera.translateZ(-step * delta);
if (controls.rotateX == 1) camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), stepAngle * delta);
else if (controls.rotateX == -1) camera.rotateOnAxis(new THREE.Vector3(1, 0, 0), -stepAngle * delta);
if (controls.rotateY == 1) camera.rotateOnAxis(new THREE.Vector3(0, 1, 0), stepAngle * delta);
else if (controls.rotateY == -1) camera.rotateOnAxis(new THREE.Vector3(0, 1, 0), -stepAngle * delta);
camera.updateMatrixWorld();
// clear intersected
for (var i = 0; i < INTERSECTED.length; i++) {
INTERSECTED[i].material.emissive.setHex(INTERSECTED[i].currentHex);
INTERSECTED.splice(i, 1);
}
// click
raycasterClick.setFromCamera(mouse, camera);
var intersects = raycasterClick.intersectObjects(scene.children);
for (var i = 0; clickedIn && i < intersects.length; i++) {
var length = INTERSECTED.push(intersects[0].object) - 1;
INTERSECTED.currentHex = INTERSECTED[length].material.emissive.getHex();
INTERSECTED[length].material.emissive.setHex(0xff0000);
}
// center
raycasterCenter.setFromCamera(center, camera);
var intersects = raycasterCenter.intersectObjects(scene.children);
for (var i = 0; i < intersects.length; i++) {
var length = INTERSECTED.push(intersects[0].object) - 1;
INTERSECTED.currentHex = INTERSECTED[length].material.emissive.getHex();
INTERSECTED[length].material.emissive.setHex(0xff0000);
if(intersects[0].distance<=2&&controls.moveZ==-1)controls.moveZ=0;
}
// render
renderer.render(scene, camera);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment