Skip to content

Instantly share code, notes, and snippets.

@AVGP
Last active August 1, 2017 11:33
Show Gist options
  • Save AVGP/e7c0d6e6182f3dae4c26f46faac59b00 to your computer and use it in GitHub Desktop.
Save AVGP/e7c0d6e6182f3dae4c26f46faac59b00 to your computer and use it in GitHub Desktop.
Three.js demo during workshop
<!doctype html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/r86/examples/js/loaders/GLTF2Loader.js"></script>
<script>
var renderer = new THREE.WebGLRenderer()
renderer.setSize(500, 500)
renderer.setClearColor(0)
document.body.appendChild(renderer.domElement)
var cam = new THREE.PerspectiveCamera(
75, // field of view
1, // aspect ratio
0.01,
100
)
var scene = new THREE.Scene()
var geo = new THREE.BoxGeometry(5, 5, 5)
geo.faces.shift()
geo.faces.shift()
var boxIn = new THREE.Mesh(
geo,
new THREE.MeshBasicMaterial({
side: THREE.BackSide,
transparent: true,
opacity: 0.5,
map: THREE.ImageUtils.loadTexture('checkerboard.png')
})
)
var boxOut = new THREE.Mesh(
geo,
new THREE.MeshBasicMaterial({
map: THREE.ImageUtils.loadTexture('checkerboard.png')
})
)
scene.add(boxIn)
scene.add(boxOut)
var room = new THREE.Mesh(new THREE.SphereGeometry(80, 24, 24), new THREE.MeshBasicMaterial({
side: THREE.BackSide,
map: THREE.ImageUtils.loadTexture('whoop.jpg')
}))
scene.add(room)
/*
var duck = null, ducks = []
var loader = new THREE.GLTF2Loader()
loader.load('duck.gltf', function(gltf) {
duck = gltf.scene
duck.position.set(0, -1, 0)
scene.add(duck)
})
*/
scene.add(new THREE.AmbientLight())
var l = new THREE.PointLight(0xff0000)
l.position.set(-3, 0, 0)
scene.add(l)
var l2 = new THREE.PointLight(0x00ff00)
l2.position.set(3, 0, 0)
scene.add(l2)
requestAnimationFrame(function render() {
renderer.render(scene, cam)
requestAnimationFrame(render)
})
window.addEventListener('keydown', function(evt) {
switch(evt.key) {
case 'ArrowLeft':
cam.rotation.y += 0.05
break
case 'ArrowRight':
cam.rotation.y -= 0.05
break
case 'ArrowUp':
cam.translateZ(-0.5)
break
case 'ArrowDown':
cam.translateZ(0.5)
break
}
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment