The Beginner’s Guide to Beginning Three.js

Ben Coleman
Sep 18, 2017 · 8 min read

What is Three.js?

What is WebGL?

Our Goals


Setup

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 )
const renderer = new THREE.WebGLRenderer({ antialias: true})
renderer.setSize( window.innerWidth, window.innerHeight )
document.body.appendChild( renderer.domElement )
var geometry = new THREE.BoxGeometry( 1, 1, 1)
var material = new THREE.MeshBasicMaterial( { color: 0xff0051 })
var cube = new THREE.Mesh ( geometry, material )
scene.add( cube )
renderer.render( scene, camera )
camera.position.z = 5
3D rendering at it’s finest

Animation Time

function animate() {
requestAnimationFrame( animate )
cube.rotation.x += 0.04;
cube.rotation.y += 0.04;
renderer.render( scene, camera )
}
animate()

Let There Be Light

var ambientLight = new THREE.AmbientLight ( 0xffffff, 0.5)
scene.add( ambientLight )
var pointLight = new THREE.PointLight( 0xffffff, 1 );
pointLight.position.set( 25, 50, 25 );
scene.add( pointLight );
var material = new THREE.MeshStandardMaterial( { color: 0xff0051 })
var geometry = new THREE.BoxGeometry( 3, 3, 3)
var material = new THREE.MeshBasicMaterial( {
color: "#dadada", wireframe: true, transparent: true
})
var wireframeCube = new THREE.Mesh ( geometry, material )
scene.add( wireframeCube )
function animate() {
requestAnimationFrame( animate )
cube.rotation.x += 0.04;
cube.rotation.y += 0.04;
wireframeCube.rotation.x -= 0.01;
wireframeCube.rotation.y -= 0.01;

renderer.render( scene, camera )
}
animate()

Just the beginning

Ben Coleman

Written by

Aspiring developer, former designer, current Warriors hater http://benjamincoleman.me/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade