-
π Only 13 files (excluding .gitignore, assets and this file)
-
π Not another over configurated boilerplate ! It's just what you need to start you own project
-
π¦ Only small packages are included, if you don't need them, it's simple to erase them
-
π¨ No UI framework added by default, you could add one depending on your needs : vue-bootstrap, vuetify, vue-material
eventemitter3
(minified : 1.1KB) : Event Emittertweenjs/tween.js
(minified: 3.1KB) : TWEEN for animationsanimate.css
(minified: 5.2KB) : Fancy css animationspostprocessing
(minified: 91.6KB, tree shakable) : Postprocessing library for THREE.js
npm run dev
β Start the projet in development modenpm run generate
β Generate the static site ready for production (in ./dist)
- Project is built on the assessment you need both "classic" web pages combined with pages that includes 3D
/components/Artwork/Engine.js
contains all the basic Three.js logic : Scene, Renderer, Camera management/components/Artwork/AssetManager.js
is used to load assets in general (Textures, Models etc..)- There is a notion of "Component" (Unity 3D way) to separate logic for specific 3D elements :
Each component has two methods :
init()
: Setup of elements inside the component
update()
: Called every frame
You can find an example component here :/components/Artwork/CubeComponent.js
.
βββ assets/css/main.scss # main SCSS file
βββ components
β βββ Artwork
β β βββ Artwork.vue # Vue component for 3D content
β β βββ AssetManager.js # Class in charge of asset loading
β β βββ CubeComponent.js # Example 3D Component with init() & update() methods
β β βββ Engine.js # Class in charge of Three.js core features
β β βββ Nav.js # Vue component to control 3D scene
β βββ Header.vue # Vue component for all pages Header
βββ layouts/default.vue # Layout shared by all pages
βββ pages
β βββ about.vue # Page for demo "/about" route
β βββ index.vue # Home page
βββ static
β βββ assets # Assets : Models & Textures needed by 3D
β βββ images # Image needed for web pages
βββ app.html # Skeleton of the page with static loader image
βββ nuxt.config.js # Nuxt.js configuration file
βββ package.json # Node configuration file
Following error "PostCSS received undefined instead of CSS string at new Input" Can be resolved with this command :
npm rebuild node-sass
MIT
"Forest House" (https://skfb.ly/6QSKT) by peachyroyalty is licensed under Creative Commons Attribution-NonCommercial (http://creativecommons.org/licenses/by-nc/4.0/).