Skip to content

Instantly share code, notes, and snippets.

@haehn

haehn/index.html

Created September 27, 2019 03:33
Show Gist options
  • Save haehn/b7f407a93fb5bbecb1f654ec9214e65f to your computer and use it in GitHub Desktop.
Save haehn/b7f407a93fb5bbecb1f654ec9214e65f to your computer and use it in GitHub Desktop.
Download ZIP
CS460 Assignment 3
Raw
index.html
<html>
<head>
<meta charset="UTF-8" />
<style>
html, body {
background-color:#000;
margin: 0;
padding: 0;
height: 100%;
overflow: hidden !important;
}
</style>
<script src="https://threejs.org/build/three.min.js" type="text/javascript"></script>
<script src="https://threejs.org/examples/js/controls/TrackballControls.js" type="text/javascript"></script>
<script>
window.onload = function() {
scene = new THREE.Scene();
fov = 75;
ratio = window.innerWidth / window.innerHeight;
zNear = 1;
zFar = 10000;
// console.log(ratio);
camera = new THREE.PerspectiveCamera(fov, ratio, zNear, zFar);
camera.position.set( 0, 0, 100);
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
ambientLight = new THREE.AmbientLight();
scene.add( ambientLight );
light = new THREE.DirectionalLight( 0xffffff, 5.0 );
light.position.set( 10, 100, 10 );
scene.add( light );
//
// The invisible plane
//
geometry = new THREE.PlaneBufferGeometry( 10000, 10000 );
material = new THREE.MeshBasicMaterial( {
visible: false
});
invisible_plane = new THREE.Mesh( geometry, material );
scene.add( invisible_plane );
//
//
//
controls = new THREE.TrackballControls( camera );
animate();
//
// ACTION!
//
totalObjects = 0;
renderer.domElement.onmousemove = function(e) {
if (!e.shiftKey) {
e.preventDefault();
return false;
}
console.log('yes! you clicked!');
pixel_coords = new THREE.Vector2( e.clientX, e.clientY );
console.log('Pixel coordinates', pixel_coords);
vp_coords = new THREE.Vector2( ( pixel_coords.x / window.innerWidth ) * 2 - 1,
-( pixel_coords.y / window.innerHeight ) * 2 + 1);
console.log('Viewport coordinates', vp_coords);
vp_coords_near = new THREE.Vector3( vp_coords.x, vp_coords.y, 0);
raycaster = new THREE.Raycaster();
raycaster.setFromCamera(vp_coords_near, camera);
intersects = raycaster.intersectObject(invisible_plane);
// choose random geometry
random_geometry = Math.floor((Math.random() * 6));
switch(random_geometry) {
case 0:
geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
break;
case 1:
geometry = new THREE.BoxBufferGeometry( 20, 20, 20 );
break;
case 2:
geometry = new THREE.SphereBufferGeometry(20,20,10);
break;
case 3:
geometry = new THREE.OctahedronBufferGeometry(20);
break;
case 4:
geometry = new THREE.ConeBufferGeometry(20,10);
break;
case 5:
geometry = new THREE.RingBufferGeometry( 1, 20, 32 );
}
random_geometry += 1
// choose random color
colors = ['red', 'blue', 'green', 'white', 'purple', 'yellow'];
random_color = colors[Math.floor((Math.random() * colors.length))];
material = new THREE.MeshStandardMaterial({ color: random_color });
mesh = new THREE.Mesh( geometry, material );
mesh.position.set(intersects[0].point.x, intersects[0].point.y,intersects[0].point.z)
scene.add(mesh);
totalObjects += 1;
console.log('Total objects', totalObjects);
};
};
function animate() {
requestAnimationFrame( animate );
controls.update();
renderer.render( scene, camera );
};
</script>
</head>
<body></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment