This Gist was automatically created by Carbide, a free online programming environment.
-
-
Save gituser768/18a06175818d397f861560ab095ce4a4 to your computer and use it in GitHub Desktop.
Three.JS Cubes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import './style.css' | |
import THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.js' | |
declare document; | |
var container; | |
var camera, scene, renderer; | |
var geometry, group; | |
var mouseX = 0, mouseY = 0; | |
var windowHalfX = window.innerWidth / 2; | |
var windowHalfY = window.innerHeight / 2; | |
document.addEventListener( 'mousemove', onDocumentMouseMove, false ); | |
init(); | |
animate(); | |
function init() { | |
container = document.createElement( 'div' ); | |
document.body.appendChild( container ); | |
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 ); | |
camera.position.z = 500; | |
scene = new THREE.Scene(); | |
scene.fog = new THREE.Fog( 0xffffff, 1, 10000 ); | |
var geometry = new THREE.BoxGeometry( 100, 100, 100 ); | |
var material = new THREE.MeshNormalMaterial(); | |
group = new THREE.Group(); | |
for ( var i = 0; i < 1000; i ++ ) { | |
var mesh = new THREE.Mesh( geometry, material ); | |
mesh.position.x = Math.random() * 2000 - 1000; | |
mesh.position.y = Math.random() * 2000 - 1000; | |
mesh.position.z = Math.random() * 2000 - 1000; | |
mesh.rotation.x = Math.random() * 2 * Math.PI; | |
mesh.rotation.y = Math.random() * 2 * Math.PI; | |
mesh.matrixAutoUpdate = false; | |
mesh.updateMatrix(); | |
group.add( mesh ); | |
} | |
scene.add( group ); | |
renderer = new THREE.WebGLRenderer(); | |
renderer.setClearColor( 0xffffff ); | |
renderer.setPixelRatio( window.devicePixelRatio ); | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
renderer.sortObjects = false; | |
container.appendChild( renderer.domElement ); | |
// | |
window.addEventListener( 'resize', onWindowResize, false ); | |
return 5 | |
} | |
function onWindowResize() { | |
windowHalfX = window.innerWidth / 2; | |
windowHalfY = window.innerHeight / 2; | |
camera.aspect = window.innerWidth / window.innerHeight; | |
camera.updateProjectionMatrix(); | |
renderer.setSize( window.innerWidth, window.innerHeight ); | |
} | |
function onDocumentMouseMove(event) { | |
mouseX = ( event.clientX - windowHalfX ) * 10; | |
mouseY = ( event.clientY - windowHalfY ) * 10; | |
} | |
// | |
var frame | |
function animate() { | |
frame = requestAnimationFrame( animate ); | |
render(); | |
} | |
export function __unload(){ | |
document.body.innerHTML = '' | |
cancelAnimationFrame(frame) | |
} | |
function render() { | |
var time = Date.now() * 0.001; | |
var rx = Math.sin( time * 0.8281 ) * 0.5, | |
ry = Math.sin( time * 0.3 ) * 0.5, | |
rz = Math.sin( time * 0.2 ) * 0.5; | |
camera.position.x += ( mouseX - camera.position.x ) * .05; | |
camera.position.y += ( - mouseY - camera.position.y ) * .05; | |
camera.lookAt( scene.position ); | |
group.rotation.x = rx; | |
group.rotation.y = ry; | |
group.rotation.z = rz; | |
renderer.render( scene, camera ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
margin: 0 | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment