Created
November 10, 2017 06:06
-
-
Save Fallenstedt/ed4b9e7f556cf72af4d7a179beb71699 to your computer and use it in GitHub Desktop.
Three js cube
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
| <html> | |
| <head> | |
| <title>My first three.js app</title> | |
| <style> | |
| body { margin: 0; } | |
| canvas { width: 100%; height: 100% } | |
| </style> | |
| </head> | |
| <body> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script> | |
| <script> | |
| var scene = new THREE.Scene(); | |
| scene.fog = new THREE.Fog(0x00000, 0.015, 20); | |
| var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 ); | |
| var renderer = new THREE.WebGLRenderer(); | |
| renderer.shadowMap.enabled = true; | |
| renderer.shadowMap.type = THREE.PCFSoftShadowMap; | |
| renderer.setSize( window.innerWidth, window.innerHeight ); | |
| document.body.appendChild( renderer.domElement ); | |
| var light = makeSpotLight() | |
| scene.add( light ); | |
| var plane = makePlane() | |
| scene.add( plane ); | |
| var cube = makeCube() | |
| scene.add( cube ); | |
| camera.position.y = 3; | |
| camera.position.x = -2; | |
| camera.position.z = 2; | |
| camera.lookAt(cube.position) | |
| function makeSpotLight() { | |
| var light = new THREE.SpotLight( 0xffffff, 4, 50, 20, 1, 2 ); | |
| light.position.set( 5, 5, 5 ); | |
| light.shadowMapWidth = 4096; // default is 512 | |
| light.shadowMapHeight = 4096; // default is 512 | |
| light.castShadow = true; | |
| return light | |
| } | |
| function makePlane() { | |
| var geometry = new THREE.PlaneGeometry( 900, 20, 60 ); | |
| var material = new THREE.MeshLambertMaterial( {color: 0x23282d, side: THREE.DoubleSide} ); | |
| var plane = new THREE.Mesh( geometry, material ); | |
| plane.receiveShadow = true; | |
| plane.position.set(0, -4, 0) | |
| plane.rotation.set(-89 * (180/Math.PI), 0, 0) | |
| return plane | |
| } | |
| function makeDirectionalLight(x, y, z) { | |
| var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 ); | |
| directionalLight.position.set( x, y, z ).normalize(); | |
| return directionalLight | |
| } | |
| function makeCube() { | |
| var geometry = new THREE.BoxGeometry( 1, 1, 1 ); | |
| var material = new THREE.MeshLambertMaterial( { color: 0x778899 } ); | |
| var mesh = new THREE.Mesh( geometry, material ); | |
| mesh.castShadow = true; | |
| return mesh | |
| } | |
| var animate = function () { | |
| requestAnimationFrame( animate ); | |
| cube.rotation.x += 0.01; | |
| cube.rotation.y += 0.01; | |
| renderer.render(scene, camera); | |
| }; | |
| animate(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment