Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for A Walkable Christmas Scene built with ThreeJS
Cody Pearce
Cody Pearce

Posted on • Edited on • Originally published atcodinhood.com

     

A Walkable Christmas Scene built with ThreeJS

Header

This simple 3D Christmas Scene was built with basic geometry and shapes provided byThree.js. The player controls were implemented using thePointerLockControls 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.

Top comments(3)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss
CollapseExpand
 
ben profile image
Ben Halpern
A Canadian software developer who thinks he’s funny.
  • Email
  • Location
    NY
  • Education
    Mount Allison University
  • Pronouns
    He/him
  • Work
    Co-founder at Forem
  • Joined

wow

CollapseExpand
 
nightcoder profile image
nightcoder
on the journey to become a good front-end developer 🤙🏾
  • Location
    Paris
  • Joined

wow indeed ❤️👍🏾

CollapseExpand
 
docthoi profile image
Long Vu
I'm still learning
  • Education
    Sheridan College
  • Joined

Hello Cody, I found out about you through the skybox tutorial. Great tutorial, it really helped me.

As for this, the demo seems to be not working, is there any chance you can take a look at it again?

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Front end developer working with React, React Native, and CSS.
  • Location
    Washington
  • Work
    Front End Developer at Fullstack Labs
  • Joined

More fromCody Pearce

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp