Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
html,body,#objects {
width: 100%; height: 100%
}
body{
background:white;
}
<!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>
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
You can’t perform that action at this time.