Created
July 10, 2014 01:27
-
-
Save olizilla/7f1e2f03ff82cb2b7ade to your computer and use it in GitHub Desktop.
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,body,#objects { | |
width: 100%; height: 100% | |
} | |
body{ | |
background:white; | |
} |
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script> | |
</head> | |
<body> | |
<div id="objects"></div> | |
</body> | |
</html> |
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
var scene = new THREE.Scene(); | |
var camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 200); | |
// position and point the camera to the center of the scene | |
camera.position.x = 0; | |
camera.position.y = 24; | |
camera.position.z = 40 | |
camera.lookAt(scene.position); | |
var renderer = new THREE.WebGLRenderer(); | |
renderer.setClearColor(new THREE.Color(0xFFFFFF, 1.0)); | |
renderer.setSize(window.innerWidth, window.innerHeight); | |
renderer.shadowMapEnabled = true; | |
// renderer.shadowMapSoft = true; | |
// add subtle ambient lighting | |
var ambientLight = new THREE.AmbientLight(0x404040); | |
scene.add(ambientLight); | |
// add spotlight for the shadows | |
var spotLight = new THREE.SpotLight( 0xffffff ); | |
spotLight.position.set( 0, 80, 9 ); | |
spotLight.castShadow = true; | |
spotLight.shadowCameraVisible = true; | |
scene.add( spotLight ); | |
// var directionalLight = new THREE.DirectionalLight( 0xeeeeee, 0.8 ); | |
// directionalLight.position.set( 10, 800, 0 ); | |
// directionalLight.castShadow = true; | |
// directionalLight.shadowCameraVisible = true; | |
// scene.add( directionalLight ); | |
// var shapeMaterial = new THREE.MeshLambertMaterial({color: 0xeeeeee }); | |
var shapeMaterial = new THREE.MeshBasicMaterial({ | |
color: 0x444444, | |
wireframe:true, | |
wireframeLinewidth:3, | |
}); | |
var shapes = [makeCube(), makePyramid(), makeTorus()] | |
shapes.forEach(function(shape, index){ | |
shape.position.x = (20 * index) - 20 | |
shape.position.y = 14; | |
scene.add(shape) | |
}) | |
// create the ground plane | |
var planeGeometry = new THREE.PlaneGeometry(70,34); | |
var planeMaterial = new THREE.MeshLambertMaterial( | |
{color: 0xeeeeee}); | |
planeMaterial.opacity = 1 | |
var plane = new THREE.Mesh(planeGeometry, planeMaterial); | |
plane.receiveShadow = true; | |
plane.rotation.x=-0.5*Math.PI; | |
plane.position.x=0; | |
plane.position.y=0; | |
plane.position.z=0; | |
scene.add(plane); | |
// add the output of the renderer to the html element | |
$("#objects").append(renderer.domElement); | |
function render() { | |
requestAnimationFrame(render); | |
renderer.render(scene, camera); | |
shapes.forEach(function(s,i){ | |
s.rotation.x += -0.0007; | |
s.rotation.y += 0.0005; | |
s.rotation.z += 0.0008; | |
}) | |
} | |
render(); | |
function makeCube(){ | |
var cubeSize = 10; | |
var cubeGeometry = new THREE.CubeGeometry(cubeSize,cubeSize,cubeSize); | |
var obj = new THREE.Mesh(cubeGeometry,shapeMaterial); | |
obj.castShadow = true; | |
obj.receiveShadow = false; | |
return obj | |
} | |
function makePyramid(){ | |
var size = 10; | |
var geometry = new THREE.TetrahedronGeometry(size); | |
var obj = new THREE.Mesh(geometry, shapeMaterial); | |
obj.castShadow = true; | |
obj.receiveShadow = false; | |
return obj | |
} | |
function makeTorus(){ | |
var size = 7; | |
var geometry = new THREE.IcosahedronGeometry(size); | |
var material = new THREE.MeshLambertMaterial({color: 0xffffff }); | |
var obj = new THREE.Mesh(geometry, material); | |
obj.castShadow = true; | |
obj.receiveShadow = false; | |
return obj | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment