Skip to content

Instantly share code, notes, and snippets.

/JS Cube.markdown

Created February 7, 2016 08:43
Show Gist options
  • Save anonymous/12a0d84fac4e9234f591 to your computer and use it in GitHub Desktop.
Save anonymous/12a0d84fac4e9234f591 to your computer and use it in GitHub Desktop.
Download ZIP
JS Cube
Raw
script.js
// Create scene, camera, and renderer
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x222222);
// Append <canvas> to <body>
document.body.appendChild(renderer.domElement);
// Create a texture loader and enable cross-origin resource loading
// CORS headers must still be present on resource!
var loader = new THREE.TextureLoader();
loader.setCrossOrigin('anonymous');
// Create box
var box = new THREE.Mesh(new THREE.BoxGeometry(10,10,10), new THREE.MeshFaceMaterial([
new THREE.MeshPhongMaterial({map: loader.load('http://45.55.193.224:1234/JS.png')}),
new THREE.MeshPhongMaterial({map: loader.load('http://45.55.193.224:1234/ES6.png')}),
new THREE.MeshPhongMaterial({map: loader.load('http://45.55.193.224:1234/nodejs.png')}),
new THREE.MeshPhongMaterial({map: loader.load('http://45.55.193.224:1234/bionode.png')}),
new THREE.MeshPhongMaterial({map: loader.load('http://45.55.193.224:1234/biojs.png')}),
new THREE.MeshPhongMaterial({map: loader.load('http://45.55.193.224:1234/webgl.png')})
]));
// Create lights
var aLight = new THREE.AmbientLight(0x404040);
var pLight = new THREE.PointLight(0xffffff, 1, 100);
// Position objects
camera.position.z = 15;
// Add objects
scene.add(box);
scene.add(aLight);
camera.add(pLight);
// Need to explicitly add camera since pLight is a child
scene.add(camera);
// Add Orbit controls
var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.enableZoom = false;
// Update object properties
function update() {
box.rotation.y += 0.01;
box.rotation.x += 0.005;
}
// Render and request next frame
function render() {
update();
renderer.render(scene, camera);
requestAnimationFrame(render);
}
// Start the animation
render();
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js"></script>
<script src="http://threejs.org/examples/js/controls/OrbitControls.js"></script>
Raw
style.css
body {
margin: 0;
}
canvas {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment