{"id":15392647,"url":"https://github.com/jackdbd/threejs-es6-webpack-starter","last_synced_at":"2025-04-14T16:08:06.749Z","repository":{"id":20442631,"uuid":"89836698","full_name":"jackdbd/threejs-es6-webpack-starter","owner":"jackdbd","description":"Three.js ES6 starter project with a sane webpack configuration","archived":false,"fork":false,"pushed_at":"2023-08-01T03:20:02.000Z","size":41096,"stargazers_count":89,"open_issues_count":11,"forks_count":21,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-04-14T21:50:04.829Z","etag":null,"topics":["babel","es6","eslint","glsl","threejs","webpack"],"latest_commit_sha":null,"homepage":"https://jackdbd.github.io/threejs-es6-webpack-starter","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jackdbd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-04-30T07:35:18.000Z","updated_at":"2022-11-11T05:39:02.000Z","dependencies_parsed_at":"2024-10-01T15:15:36.032Z","dependency_job_id":"c28f2ff3-2c42-4a64-a242-244212e2d659","html_url":"https://github.com/jackdbd/threejs-es6-webpack-starter","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackdbd%2Fthreejs-es6-webpack-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackdbd%2Fthreejs-es6-webpack-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackdbd%2Fthreejs-es6-webpack-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jackdbd%2Fthreejs-es6-webpack-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jackdbd","download_url":"https://codeload.github.com/jackdbd/threejs-es6-webpack-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246273533,"owners_count":20750904,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","es6","eslint","glsl","threejs","webpack"],"created_at":"2024-10-01T15:15:28.422Z","updated_at":"2025-03-30T03:31:24.322Z","avatar_url":"https://github.com/jackdbd.png","language":"JavaScript","readme":"# three.js-es6-webpack-starter\n\n[![Build Status](https://travis-ci.org/jackdbd/threejs-es6-webpack-starter.svg?branch=master)](https://travis-ci.org/jackdbd/threejs-es6-webpack-starter) [![Renovate enabled](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://renovateapp.com/) [![Code style prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n\nThree.js ES6 starter project with a sane webpack configuration.\n\n![A GIF file showing a demo of the starter project](https://github.com/jackdbd/threejs-es6-webpack-starter/blob/main/demo.gif?raw=true \"A scene with a spotlight, a directional light, an ambient light, a particle system, a custom material and several helpers.\")\n\n## Features\n\n- ES6 support with [babel-loader](https://github.com/babel/babel-loader)\n- JS linting + code formatting with [eslint](https://eslint.org/) and [prettier](https://github.com/prettier/prettier)\n- Offscreen canvas rendering in a web worker with [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)\n- CSS support with [style-loader](https://github.com/webpack-contrib/style-loader)\n  and [css-loader](https://github.com/webpack-contrib/css-loader)\n- CSS linting with [stylelint](https://stylelint.io/)\n- Controls with [orbit-controls-es6](https://www.npmjs.com/package/orbit-controls-es6)\n- GUI with [dat.GUI](https://github.com/dataarts/dat.gui)\n- Tests with [jest](https://jestjs.io/en/)\n- Webpack configuration with:\n  - [@packtracker/webpack-plugin](https://github.com/packtracker/webpack-plugin) (bundle sizes [here](https://app.packtracker.io/organizations/129/projects/110))\n  - [circular-dependency-plugin](https://github.com/aackerman/circular-dependency-plugin)\n  - [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin)\n  - [compression-webpack-plugin](https://github.com/webpack-contrib/compression-webpack-plugin)\n  - [duplicate-package-checker-webpack-plugin](https://github.com/darrenscerri/duplicate-package-checker-webpack-plugin)\n  - [favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin)\n  - [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n  - [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)\n  - [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin)\n  - [terser-webpack-plugin](https://github.com/webpack-contrib/terser-webpack-plugin/)\n  - [webpack-bundle-analyzer](https://github.com/th0r/webpack-bundle-analyzer)\n  - [webpack-glsl-loader](https://github.com/grieve/webpack-glsl-loader)\n  - [worker-loader](https://github.com/webpack-contrib/worker-loader)\n\n## Installation\n\n```shell\ngit clone git@github.com:jackdbd/threejs-es6-webpack-starter.git\ncd threejs-es6-webpack-starter\nyarn\n```\n\n## Usage (development)\n\nRun `webpack-dev-server` (js/css bundles will be served from memory)\n\n```shell\nyarn start\n```\n\nGo to `localhost:8080` to see your project live!\n\n## Usage (production)\n\nGenerate all js/css bundles\n\n```shell\nyarn build\n```\n\n## Other\n\nAnalyze webpack bundles offline:\n\n```shell\nyarn build  # to generate build/stats.json\nyarn stats  # uses webpack-bundle-analyzer as CLI\n```\n\nor push to a CI (e.g. [Travis CI](https://travis-ci.com/)), let it build your project and analyze your bundles online at [packtracker.io](https://packtracker.io/).\n\nCheck outdated dependencies with [npm-check-updates](https://github.com/tjunnone/npm-check-updates):\n\n```shell\nyarn ncu\n```\n\nUpdate all outdated dependencies at once:\n\n```shell\nyarn ncuu\n```\n\nOr let [updtr](https://github.com/peerigon/updtr) update all your dependencies for you:\n\n```shell\nyarn updtr\n```\n\n## Credits\n\nThe setup of this starter project was inspired by two snippets on Codepen: [this one](http://codepen.io/mo4_9/pen/VjqRQX) and [this one](https://codepen.io/iamphill/pen/jPYorE).\n\nI understood how to work with lights and camera helpers thanks to\n[this snippet](http://jsfiddle.net/f17Lz5ux/5131/) on JSFiddle.\n\nThe code for `vertexShader.glsl` and `fragmentShader.glsl` is taken from\n[this blog post](http://blog.cjgammon.com/threejs-custom-shader-material).\n\nThe star used in the particle system is the PNG preview of [this image](https://commons.wikimedia.org/wiki/File:Star_icon-72a7cf.svg) by Offnfopt\n(Public domain or CC0, via Wikimedia Commons).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackdbd%2Fthreejs-es6-webpack-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjackdbd%2Fthreejs-es6-webpack-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjackdbd%2Fthreejs-es6-webpack-starter/lists"}