DEV Community

loading...
Cover image for A Walkable Christmas Scene built with ThreeJS

A Walkable Christmas Scene built with ThreeJS

codypearce profile image Cody Pearce Originally published at codinhood.com Updated on ・1 min read

Header

This simple 3D Christmas Scene was built with basic geometry and shapes provided by Three.js. The player controls were implemented using the PointerLockControls module along with a few functions to handle keyboard input. Collision detection was implemented only on the top surface, which means you can walk through objects like trees and snowmen but jump on other objects like the top hats.

The Code

The entire project, from drawing and placing objects to adding interactivity, only took about 700 lines of Javascript. The code is also broken into 28 functions that initialize variables, render objects, respond to user input, and animate.

Folders

This is the first Three.js project I've worked on, so any improvements would be greatly appreciated. Let me know what you think so far.

Discussion (2)

pic
Editor guide
Collapse
ben profile image
Collapse
nightcoder profile image
nightcoder

wow indeed ❤️👍🏾