项目作者: CrazyTim

项目描述 :
3D web animation
高级语言: JavaScript
项目地址: git://github.com/CrazyTim/countdown.git
创建时间: 2019-04-17T11:58:31Z
项目社区:https://github.com/CrazyTim/countdown

开源协议:MIT License

下载



thumbnail


Countdown

A replication of the countdown animation in the film Mission to Mars made with three.js and tween.js.

View the live version here.

Getting Started

Install Node.js, clone this repo, then run:

  1. npm install
  2. npm start

Notes

I love the design of this binary timer. The rings appear to be resting on a translucent surface, which gives a sense of depth as they rotate through it. I used many layers of transparency beneath the rings to create this effect.

Also it was challenging to position the camera and perspective the same as the movie. I had fun referencing the movie and learnt a lot.

Interesting fact: having only 7 rings rotating at this speed lasts about a minute, which wasn’t long enough for the scene in the movie!