Skip to content

Instantly share code, notes, and snippets.

@garrafote

garrafote/index.html

Created February 24, 2015 22:03
Show Gist options
  • Save garrafote/fb338b56e1802c3b74f5 to your computer and use it in GitHub Desktop.
Save garrafote/fb338b56e1802c3b74f5 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/guqeba
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"></script>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
#container { width: 400; height: 400; }
</style>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container"/>
<script id="jsbin-javascript">
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
var container = document.getElementById("container");
renderer.setSize(400, 400);
container.appendChild(renderer.domElement);
var loader = new THREE.TextureLoader();
loader.crossOrigin = 'true';
loader.load(
'http://1.bp.blogspot.com/-XUfyIcuKVbE/UvnVN3xiztI/AAAAAAAAAC0/ZuAo6baXAKk/s1600/crate+difuse.jpg',
function(texture) {
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshPhongMaterial({ map: texture });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-2, 0, 0);
scene.add(cube);
}
);
loader.load(
'https://scontent.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10649590_10152835580256042_139981990988388808_n.jpg?oh=4fd7ce17cbad4084495059cbba722ab0&oe=5580D4C5',
function(texture) {
var sphereGeometry = new THREE.SphereGeometry(0.8, 32, 32);
var sphereMaterial = new THREE.MeshPhongMaterial({ map:texture });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(2, 0, 0);
scene.add(sphere);
}
);
loader.load(
'https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/1465276_10152042339018685_1708687199_n.jpg?oh=af91ab44cd4cf53feba6ffc95e96a313&oe=554F1E95&__gda__=1430804810_4df742c21fd92558fb64fb177b041b14',
function(texture) {
var coneGeometry = new THREE.CylinderGeometry(0, 1, 1.4, 64);
var coneMaterial = new THREE.MeshPhongMaterial({ map: texture });
var cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(0, 0, 0);
scene.add(cone);
}
);
loader.load(
'https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/1510348_266481790192307_301450626_n.jpg?oh=6a185ca6359a51bb7ae9814512cefc98&oe=5586D028&__gda__=1434362721_fd4a3177df0d2821d9934cc2c1c8174e',
function(texture) {
var planeGeometry = new THREE.PlaneGeometry(10, 10);
var planeMaterial = new THREE.MeshPhongMaterial({ map: texture });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.set(-1.57, 0, 0);
plane.position.set(0, -1.5, 0);
scene.add(plane);
}
);
var light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.set(1, 1, 1);
scene.add(light);
var light1 = new THREE.DirectionalLight(0xffffff, 0.2);
light1.position.set(-1, -1, -1);
scene.add(light1);
var light2 = new THREE.DirectionalLight(0xffffff, 0.2);
light2.position.set(1, -1, 1);
scene.add(light2);
var render = function() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r67/three.min.js"><\/script>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100%; }
#container { width: 400; height: 400; }
</style>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="container"/>
</body>
</html></script>
<script id="jsbin-source-javascript" type="text/javascript">var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
var container = document.getElementById("container");
renderer.setSize(400, 400);
container.appendChild(renderer.domElement);
var loader = new THREE.TextureLoader();
loader.crossOrigin = 'true';
loader.load(
'http://1.bp.blogspot.com/-XUfyIcuKVbE/UvnVN3xiztI/AAAAAAAAAC0/ZuAo6baXAKk/s1600/crate+difuse.jpg',
function(texture) {
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshPhongMaterial({ map: texture });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-2, 0, 0);
scene.add(cube);
}
);
loader.load(
'https://scontent.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10649590_10152835580256042_139981990988388808_n.jpg?oh=4fd7ce17cbad4084495059cbba722ab0&oe=5580D4C5',
function(texture) {
var sphereGeometry = new THREE.SphereGeometry(0.8, 32, 32);
var sphereMaterial = new THREE.MeshPhongMaterial({ map:texture });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(2, 0, 0);
scene.add(sphere);
}
);
loader.load(
'https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/1465276_10152042339018685_1708687199_n.jpg?oh=af91ab44cd4cf53feba6ffc95e96a313&oe=554F1E95&__gda__=1430804810_4df742c21fd92558fb64fb177b041b14',
function(texture) {
var coneGeometry = new THREE.CylinderGeometry(0, 1, 1.4, 64);
var coneMaterial = new THREE.MeshPhongMaterial({ map: texture });
var cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(0, 0, 0);
scene.add(cone);
}
);
loader.load(
'https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/1510348_266481790192307_301450626_n.jpg?oh=6a185ca6359a51bb7ae9814512cefc98&oe=5586D028&__gda__=1434362721_fd4a3177df0d2821d9934cc2c1c8174e',
function(texture) {
var planeGeometry = new THREE.PlaneGeometry(10, 10);
var planeMaterial = new THREE.MeshPhongMaterial({ map: texture });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.set(-1.57, 0, 0);
plane.position.set(0, -1.5, 0);
scene.add(plane);
}
);
var light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.set(1, 1, 1);
scene.add(light);
var light1 = new THREE.DirectionalLight(0xffffff, 0.2);
light1.position.set(-1, -1, -1);
scene.add(light1);
var light2 = new THREE.DirectionalLight(0xffffff, 0.2);
light2.position.set(1, -1, 1);
scene.add(light2);
var render = function() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();</script></body>
</html>
Raw
jsbin.guqeba.js
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
camera.position.z = 5;
var renderer = new THREE.WebGLRenderer();
var container = document.getElementById("container");
renderer.setSize(400, 400);
container.appendChild(renderer.domElement);
var loader = new THREE.TextureLoader();
loader.crossOrigin = 'true';
loader.load(
'http://1.bp.blogspot.com/-XUfyIcuKVbE/UvnVN3xiztI/AAAAAAAAAC0/ZuAo6baXAKk/s1600/crate+difuse.jpg',
function(texture) {
var cubeGeometry = new THREE.BoxGeometry(1, 1, 1);
var cubeMaterial = new THREE.MeshPhongMaterial({ map: texture });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.position.set(-2, 0, 0);
scene.add(cube);
}
);
loader.load(
'https://scontent.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/10649590_10152835580256042_139981990988388808_n.jpg?oh=4fd7ce17cbad4084495059cbba722ab0&oe=5580D4C5',
function(texture) {
var sphereGeometry = new THREE.SphereGeometry(0.8, 32, 32);
var sphereMaterial = new THREE.MeshPhongMaterial({ map:texture });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(2, 0, 0);
scene.add(sphere);
}
);
loader.load(
'https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/1465276_10152042339018685_1708687199_n.jpg?oh=af91ab44cd4cf53feba6ffc95e96a313&oe=554F1E95&__gda__=1430804810_4df742c21fd92558fb64fb177b041b14',
function(texture) {
var coneGeometry = new THREE.CylinderGeometry(0, 1, 1.4, 64);
var coneMaterial = new THREE.MeshPhongMaterial({ map: texture });
var cone = new THREE.Mesh(coneGeometry, coneMaterial);
cone.position.set(0, 0, 0);
scene.add(cone);
}
);
loader.load(
'https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/1510348_266481790192307_301450626_n.jpg?oh=6a185ca6359a51bb7ae9814512cefc98&oe=5586D028&__gda__=1434362721_fd4a3177df0d2821d9934cc2c1c8174e',
function(texture) {
var planeGeometry = new THREE.PlaneGeometry(10, 10);
var planeMaterial = new THREE.MeshPhongMaterial({ map: texture });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.set(-1.57, 0, 0);
plane.position.set(0, -1.5, 0);
scene.add(plane);
}
);
var light = new THREE.DirectionalLight(0xffffff, 0.8);
light.position.set(1, 1, 1);
scene.add(light);
var light1 = new THREE.DirectionalLight(0xffffff, 0.2);
light1.position.set(-1, -1, -1);
scene.add(light1);
var light2 = new THREE.DirectionalLight(0xffffff, 0.2);
light2.position.set(1, -1, 1);
scene.add(light2);
var render = function() {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment