Global

Members

camera :THREE.PerspectiveCamera

Three.js camera.
Type:
Source:

(constant) colorTable :Object.<String, THREE.Color>

Color table.
Type:
Source:

container :HTMLDivElement

A container holding the greeting and the canvas.
Type:
  • HTMLDivElement
Source:

group :THREE.Group

Three.js group.
Type:
Source:

help :Boolean

Display help.
Type:
  • Boolean
Source:

(constant) imageNames :Object.<Symbol, Array.<String>>

Not the best for a skybox, but the effect is quite psychadelic.
Type:
  • Object.<Symbol, Array.<String>>
Source:

inAndOutCamera :Boolean

Camera will move around the tree in and out.
Type:
  • Boolean
Source:

(constant) lightHelpers

Light helpers.
Properties:
Name Type Description
lightHelpers Object container for helpers.
Properties
Name Type Description
dhelper THREE.DirectionalLightHelper directional light helper.
shelper THREE.SpotLightHelper spot light helper.
phelper THREE.PointlLightHelper point light helper.
chelper THREE.CameraHelper camera helper.
Source:

mouseX :Number

An event (clientX - windowHalfX).
Type:
  • Number
Source:

mouseXOnMouseDown :Number

An event (clientX - windowHalfX) when a movement starts.
Type:
  • Number
Source:

(constant) oLoader :THREE.OBJLoader

ObjectLoader object.
Type:
Source:

(constant) path :String

Image directory.
Type:
  • String
Source:

paused :Boolean

Will pause the camera rotation.
Type:
  • Boolean
Source:

renderer :THREE.WebGLRenderer

Three.js renderer.
Type:
Source:

scene :THREE.Scene

Three.js scene.
Type:
Source:

showHelpers :Boolean

Light helpers switch.
Type:
  • Boolean
Source:

targetRotation :Number

Rotation about the "Y" axis, applied by the renderer to the scene, based on mouse displacement.
Type:
  • Number
Source:

targetRotationOnMouseDown :Number

Target rotation when the mouse is clicked.
Type:
  • Number
Source:

teaPotGroup :THREE.Group

Three.js group.
Type:
Source:

windowHalfX :Number

Half of the window innerWidth property.
Type:
  • Number
Source:

windowHalfY :Number

Half of the window innerHeight property.
Type:
  • Number
Source:

Methods

addBaubles(group, materials)

Add 28 baubles.

Yeah, kind of hardcoded... no, I'm not proud.

But this was the most straightforward way to add trinkets to the tree that actually looked like they were on the tree.
Parameters:
Name Type Description
group THREE.Group the given group to add the baubles to.
materials Object.<String, THREE.Material> the given material object.
Source:

addGround(group)

Add ground to scene.

The average user doesn't have a calibrated monitor and has never heard of gamma correction; therefore, many visual materials are precorrected for them. For example, by convention, all JPEG files are precorrected for a gamma of 2.2. That's not exact for any monitor, but it's in the ballpark, so the image will probably look acceptable on most monitors. This means that JPEG images (including scans and photos taken with a digital camera) are not linear, so they should not be used as texture maps by shaders that assume linear input.
Parameters:
Name Type Description
group THREE.Group the given group to add the ground to.
Source:
See:

addLight(scene)

Lights galore - includes point lights, spot lights, and a directional light because why not?

We also created a camera helper for the spot light.

Lighting and color has changed a lot since version 155.

It’s important to understand that using the new lighting mode is just one prerequisite for physically correct lighting.
You also have to:
  • apply a real-world scale to your scene (meaning 1 world unit = 1 meter).
  • not change the default decay values of 2 for all spot and point lights in your scene.

Only then you can actually consider SI units for point, spot and area lights. Ambient and hemisphere lights (which are special kind of lights and essentially simplified models of light probes), as well as directional lights, do not use SI units.

These updates enable a “linear workflow” by default, for better image quality.

To set “renderer.useLegacyLights = false;” in init, I had to increase the light intensities,
and set decay to zero (my lights are too far away from the scene borders):

  • ambient light 0.2 → 2
  • point light 2 → 4
  • spot light 1 → 2
  • ambient light 2 → Math.PI * 2
  • pointLight.decay = 0;
  • spotLight.decay = 0;
Parameters:
Name Type Description
scene THREE.Scene the given scene.
Source:
See:

addObject(group, objectFile, x, y, z, size, rotate, color)

Loads an object to the scene.

Used to add the teapot and the bunnies. Frigging bunnies all around, everyone loves bunnies. Teapot is our new Christmas tree star.
Parameters:
Name Type Description
group THREE.Group the given group to add the object to.
objectFile String the object file to be read.
x Number position x
y Number position y
z Number position z
size Number the object's size.
rotate Number rotation amount.
color THREE.Color the objects's color.
Source:

addPresent(group, size, x, y, z, images, imgpath)

I developed a certain dislike for skyboxes or at least for the clunky ones. As such, the PRESENTS are going to be skyboxes.

Why not, am I right? No specification were given saying that the skyboxes had to be used as the 'environment'.
Parameters:
Name Type Description
group THREE.Group the given group to add the presents to.
size Number the size of the box -- will correspond to width, length, and height.
x Number position x
y Number position y
z Number position z
images Array.<String> image array to use.
imgpath String path to the image array.
Source:
See:

addSnowflakes(group)

Christmas needs frigging snowflakes.

Except Christmas in Brazil, then it is just palm trees... Based on a tutorial found on huzzah
Parameters:
Name Type Description
group THREE.Group the given group to add the snowflakes to.
Source:

cameraControl(c, ch)

The camera control.
Parameters:
Name Type Description
c THREE.Camera the given camera.
ch String a given character.
Source:

displayHelpers()

Add or remove light or normal helpers.
Source:

getChar(event)

Translate keydown events to strings.
Parameters:
Name Type Description
event KeyboardEvent keyboard event.
Source:
See:

handleKeyPress(event)

Handler for key press events.
Parameters:
Name Type Description
event KeyboardEvent keydown event.
Source:

init()

Initialize our scene's components.

Add listeners for "mousedown", "touchstart", and "touchmove".

The listeners are added to the canvas element (renderer.domElement), so to prevent "the pull to refresh" on a swipe-down.
Source:

makeCamera(scene)

Set the camera and add it to the given scene.
Parameters:
Name Type Description
scene THREE.Scene given scene.
Source:

makeGreeting()

Display a greeting and information at the top of the page.
Source:

makeTree(group, materials)

Make the Christmas tree, which is just a bunch of stacked cones (cylinders).
Parameters:
Name Type Description
group THREE.Object3D the given group to add the tree to.
materials Object.<String, THREE.Material> the given material object.
Source:
See:

onWindowResize()

Resizes the scene according to the screen size.

Many thanks.
Source:

prepareMaterials(group)

Prepare materials and creates the tree.
Parameters:
Name Type Description
group THREE.Group the given group.
Source:

render() → {animate}

A closure to render the application.
Source:
See:
Returns:
animation callback.
Type
animate

setAnimationLoop(loop)

A built in function that can be used instead of requestAnimationFrame.

The renderer.setAnimationLoop parameter is a callback, which will be called every available frame.
If null is passed it will stop any already ongoing animation.
Parameters:
Name Type Description
loop function callback.
Source:

Type Definitions

animate()

Rotates the camera around the tree and calls the renderer.render method.
Source:

Events

keydown

Key handler.

Fired when a key is pressed.

Calls handleKeyPress when pressing assigned keys:
  • Space - pause
  • h - help
  • l - light helpers
  • w, s, a, d - forward, backward, left, right
  • I, K, J, L - orbit down, up, left, right
  • +, - - field of view (zoom)
  • ↑, ↓- up, down
  • n - move camera close/farther away wile rotating, or not
Source:
See:

load

Load the applicarion.

Fired when the whole page has loaded, including all dependent resources such as stylesheets, scripts, iframes, and images, except those that are loaded lazily. Initialize and start animation.
Parameters:
Name Type Description
event Event a generic Event.
Source:
See:

onDocumentMouseDown

The mousedown event is fired at an Element when a pointing device button is pressed while the pointer is inside the element.

Add listeners for "mousemove", "mouseup", and "mouseout".

Parameters:
Name Type Description
event MouseEvent mouse event.
Source:
See:

onDocumentMouseMove

The mousemove event is fired at an element when a pointing device (usually a mouse) is moved while the cursor's hotspot is inside it.
Parameters:
Name Type Description
event MouseEvent mouse event.
Source:
See:

onDocumentMouseOut

The mouseout event is fired at an Element when a pointing device (usually a mouse) is used to move the cursor so that it is no longer contained within the element or one of its children.

Removes the listeners for "mousemove", "mouseup", and "mouseout".

Parameters:
Name Type Description
event MouseEvent mouse event.
Source:
See:

onDocumentMouseUp

The mouseup event is fired at an Element when a button on a pointing device (such as a mouse or trackpad) is released while the pointer is located inside it.

Remove listeners for "mousemove", "mouseup", and "mouseout".

Parameters:
Name Type Description
event MouseEvent mouse event.
Source:
See:

onDocumentTouchMove

The touchmove event is fired when one or more touch points are moved along the touch surface.
Parameters:
Name Type Description
event TouchEvent touch event.
Source:
See:

onDocumentTouchStart

The touchstart event is fired when one or more touch points are placed on the touch surface.
Parameters:
Name Type Description
event TouchEvent touch event.
Source:
See:

resize

Appends an event listener for events whose type attribute value is resize.

Fires when the document view (window) has been resized.

The callback argument sets the callback that will be invoked when the event is dispatched.

Parameters:
Name Type Description
event Event the document view is resized.
function callback function to run when the event occurs.
useCapture Boolean handler is executed in the bubbling or capturing phase.
Source:
See: