Three.js is an open-source, free-to-use programming language. It can be used to create interactive games, such as SimCity. In this article we’ll look at the creation of a mini-city full of post effects and micro-interactions using Three.js.
Table of contents
IntroductionCreative challengePerformanceCreating the 3D model in BlenderCreating natural lightDistributing trees in Blender with geometry nodesBake lighting for exportExport to Three.js and the tree performance issueLoading everything in Three.jsUsing VertexShader for the animation of the treesAnimating the birds and other elements of the experienceLights, shadows, and the night mode + apocalypticPost Processing with Effect ComposerClicking and Selecting a BuildingResponsive tweaks: Also working on mobileDynamic quality: Adjusting performance dynamically with the power of the user deviceAlso working on smartwatchesThree.js Boilerplate: Create your own WindlandInteresting facts1 Comment
Sort: