The document discusses using the three.js library to create 3D drawings in a web browser. It introduces key three.js concepts like scenes, objects, cameras, and renderers. It then demonstrates how to build objects with children, move objects relative to parents, add camera controls, and setup lighting and shadows. The demos show a basic scene with objects, adding interactivity with camera controls, and debugging lights and shadows.

1. © 2018 Solteq. All rights reserved.
Easy 3d drawing with three.js
TampereJS June 2018

2. © 2018 Solteq. All rights reserved.
Jere Kuusela
• Software Developer at Solteq
• jere.kuusela@iki.fi
• jere.kuusela@solteq.com
• First talk ever!

3. © 2018 Solteq. All rights reserved.
WebGL
• JavaScript API to implement 3d graphics in modern browsers
• Wide support
• Uses HTML <canvas> element
• Uses hardware-acceleration
• Low level -> 
• Multiple higher level libraries
• three.js
• PhiloGL
• GLGE
• J3D
• …

4. © 2018 Solteq. All rights reserved.© 2018 Solteq. All rights reserved.
Demo 1

5. © 2018 Solteq. All rights reserved.
Recap of Demo 1
• Scene: Container for objects which you want to draw
• Objects: Actual objects which usually need both geometry and material
• Camera: Location and direction where you are looking at the scene
• Renderer: Uses WebGL to draw pixels based on the scene and the camera

6. © 2018 Solteq. All rights reserved.
Closer look at objects
• Base class for points, lines, meshes, cameras, scenes, lights …
• Every object can have children
• For example a camera can be attached to a geometry
• Most objects should have a parent
• You can only render one object (usually the scene) and its children
• Object’s location is relative to its parent <- IMPORTANT!
• Allows easily moving complex objects

7. © 2018 Solteq. All rights reserved.© 2018 Solteq. All rights reserved.
Demo 2

8. © 2018 Solteq. All rights reserved.
Recap of Demo 2
• A car built from a cone, 4 cylinders (tires) and a camera
• Cars were attached to a proxy object which was used to move them around
• No need to update locations of cars and tires manually
• An image was added as a floor for visual purposes
• The scene only directly included the floor and the proxy object!
• Camera can be toggled by simply changing which camera is used in render function

9. © 2018 Solteq. All rights reserved.
Controlling camera manually?
• No first class support for moving a camera with mouse
• But lots of examples which contain reusable code: https://threejs.org/examples/
• https://threejs.org/examples/#misc_controls_orbit
• https://threejs.org/examples/#misc_controls_trackball
• Have to download the required JS file manually
• But only a few lines of codes required to get it working

10. © 2018 Solteq. All rights reserved.
Lights and shadows
• Multiple choices: ambient, directional, spotlight, point, …
• This is where the easy ends
• Lots of things which can go wrong -> nothing appears on the screen 
• Use helpers to visualize lights and shadows when debugging

11. © 2018 Solteq. All rights reserved.© 2018 Solteq. All rights reserved.
Demo 3

12. © 2018 Solteq. All rights reserved.
Recap of Demo 3
• Imported camera controls JS-file
• One line of code to get it working properly
• Added a light to cars (copypaste from three.js documentation)
• But no light shows up
• Helper objects appear so can see that the light is there

13. © 2018 Solteq. All rights reserved.
Lights and shadows, again
• Lights require:
• Proper material (MeshStandardMaterial instead of MeshBasicMaterial)
• Ambient light unless you want the world be pitch black
• Spotlight must have the target location set and added to scene
• Shadows require:
• Light must be set to cast shadow
• Light shadow camera must have proper near and far
• Renderer must have shadowmap enabled
• Floor must be set to receive shadow
• Any other objects must be set to cast shadow

14. © 2018 Solteq. All rights reserved.© 2018 Solteq. All rights reserved.
Demo 4

15. © 2018 Solteq. All rights reserved.
Recap of Demo 4
• Changed floor material
• Added ambient light
• Fixed location of lights, added target location
• Also added another light to cars with help of clone()
• Fixed shadow near and far settings
• Added shadowmap to renderer
• Added receive shadows to floor
• Added static towers to cast shadows