generate toc

build/js/build.js

@@ -2,9 +2,15 @@
 /* eslint no-undef: "error" */
 /* eslint no-console: "off" */
 
+/*
+
+This entire file is one giant hack and really needs to be cleaned up!
+
+*/
+
 'use strict';
 
-const requiredNodeVersion = 11;
+const requiredNodeVersion = 12;
 if (parseInt((/^v(\d+)\./).exec(process.version)[1]) < requiredNodeVersion) {
   throw Error(`requires at least node: ${requiredNodeVersion}`);
 }
@@ -137,7 +143,7 @@ Handlebars.registerHelper('include', function(filename, options) {
   if (options && options.hash && options.hash.filename) {
     const varName = options.hash.filename;
     filename = options.data.root[varName];
-    context = options.hash;
+    context = Object.assign({}, options.data.root, options.hash);
   } else {
     context = options.data.root;
   }
@@ -216,13 +222,16 @@ const Builder = function(outBaseDir, options) {
   const g_articlesByLang = {};
   let g_articles = [];
   let g_langInfo;
+  let g_originalLangInfo;
   const g_langDB = {};
   const g_outBaseDir = outBaseDir;
   const g_origPath = options.origPath;
+  const g_originalByFileName = {};
 
-  // This are the english articles.
-  const g_origArticles = glob.
-      sync(path.join(g_origPath, '*.md'))
+  const toc = hanson.parse(fs.readFileSync('toc.hanson', {encoding: 'utf8'}));
+
+  // These are the english articles.
+  const g_origArticles = glob.sync(path.join(g_origPath, '*.md'))
       .map(a => path.basename(a))
       .filter(a => a !== 'index.md')
       .filter(articleFilter);
@@ -255,7 +264,9 @@ const Builder = function(outBaseDir, options) {
 
   const loadMD = function(contentFileName) {
     const content = cache.readFileSync(contentFileName, 'utf-8');
-    return parseMD(content);
+    const data = parseMD(content);
+    data.link = contentFileName.replace(/\\/g, '/').replace(/\.md$/, '.html');
+    return data;
   };
 
   function extractHandlebars(content) {
@@ -426,6 +437,7 @@ const Builder = function(outBaseDir, options) {
     metaData['dst_file_name'] = relativeOutName;
     metaData['basedir'] = '';
     metaData['toc'] = opt_extra.toc;
+    metaData['tocHtml'] = g_langInfo.tocHtml;
     metaData['templateOptions'] = opt_extra.templateOptions;
     metaData['langInfo'] = g_langInfo;
     metaData['url'] = pageUrl;
@@ -457,6 +469,59 @@ const Builder = function(outBaseDir, options) {
         .sync(filesSpec)
         .sort()
         .filter(articleFilter);
+
+    const byFilename = {};
+    files.forEach((fileName) => {
+      const data = loadMD(fileName);
+      if (!data.headers.category) {
+        throw new Error(`no catgeory for article: ${fileName}`);
+      }
+      byFilename[path.basename(fileName)] = data;
+    });
+
+    // HACK
+    if (extra.lang === 'en') {
+      Object.assign(g_originalByFileName, byFilename);
+      g_originalLangInfo = g_langInfo;
+    }
+
+    function getLocalizedCategory(category) {
+      const localizedCategory = g_langInfo.categoryMapping[category];
+      if (localizedCategory) {
+        return localizedCategory;
+      }
+      console.error(`no localization for category: ${category}`);
+      const categoryName = g_originalLangInfo.categoryMapping[category];
+      if (!categoryName) {
+        throw new Error(`no English mapping for category: ${category}`);
+      }
+      return categoryName;
+    }
+
+    function tocLink(fileName) {
+      let data = byFilename[fileName];
+      if (!data) {
+        data = g_originalByFileName[fileName];
+      }
+      const toc = data.headers.toc;
+      if (toc === '#') {
+        return [...data.content.matchAll(/<a\s*id="(.*?)"\s*data-toc="(.*?)"\s*><\/a>/g)].map(([, id, title]) => {
+          const link = `${data.link}#${id}`;
+          return `<li><a href="${link}">${title}</a></li>`;
+        }).join('\n');
+      }
+      const link = data.link;
+      return `<li><a href="${link}">${toc}</a></li>`;
+    }
+
+    g_langInfo.tocHtml = `<ul>${
+      Object.entries(toc).map(([category, files]) => `  <li>${getLocalizedCategory(category)}</li>
+      <ul>
+        ${files.map(tocLink).join('\n')}
+      </ul>`
+      ).join('\n')
+    }</ul>`;
+
     files.forEach(function(fileName) {
       const ext = path.extname(fileName);
       const baseName = fileName.substr(0, fileName.length - ext.length);
@@ -677,6 +742,7 @@ const Builder = function(outBaseDir, options) {
       applyTemplateToFile('build/templates/index.template', path.join(options.lessons, 'index.md'), path.join(g_outBaseDir, options.lessons, 'index.html'), {
         table_of_contents: '',
         templateOptions: g_langInfo,
+        tocHtml: g_langInfo.tocHtml,
       });
       return Promise.resolve();
     }, function(err) {

threejs/lessons/langinfo.hanson

@@ -8,6 +8,15 @@
   commentSectionHeader: '<div>Questions? <a href="http://stackoverflow.com/questions/tagged/three.js">Ask on stackoverflow</a>.</div>\n        <div><a href="https://github.com/greggman/threejsfundamentals/issues/new?assignees=&labels=suggested+topic&template=suggest-topic.md&title=%5BSUGGESTION%5D">Suggestion</a>? <a href="https://github.com/greggman/threejsfundamentals/issues/new?assignees=&labels=&template=request.md&title=">Request</a>? <a href="https://github.com/greggman/threejsfundamentals/issues/new?assignees=&labels=bug+%2F+issue&template=bug-issue-report.md&title=">Issue</a>? <a href="https://github.com/greggman/threejsfundamentals/issues/new?assignees=&labels=bug+%2F+issue&template=bug-issue-report.md&title=">Bug</a>?</div>',
   missing: "Sorry this article has not been translated yet. [Translations Welcome](https://github.com/greggman/threejsfundamentals)! 😄\n\n[Here's the original English article for now]({{{origLink}}}).",
   toc: 'Table of Contents',
+  categoryMapping: {
+    'basics': 'Basics',
+    'solutions': 'Solutions',
+    'webvr': 'WebVR',
+    'optimization': 'Optimization',
+    'tips': 'Tips',
+    'fundamentals': 'Fundamentals',
+    'reference': 'Reference',
+  },
 }
 
 

threejs/lessons/ru/langinfo.hanson

@@ -8,6 +8,13 @@
   commentSectionHeader: '<div>Вопросы? <a href="http://stackoverflow.com/questions/tagged/three.js">Спросите на stackoverflow</a>.</div>\n        <div>Нашли ошибку? <a href="http://github.com/greggman/threejsfundamentals/issues">Создайте issue на github</a>.</div>',
   missing: "К сожалению, страница ещё не переведена. [Я всегда рад переводчикам](https://github.com/greggman/threejsfundamentals)! 😄\n\n[А пока можете почитать статью на английском языке]({{{origLink}}}).",
   toc: 'Оглавление',
+  categoryMapping: {
+    'basics': 'Введение',
+    'solutions': 'Решения',
+    'tips': 'Советы',
+    'fundamentals': 'Фунаментальные понятия',
+    'reference': 'Ссылки',
+  },
 }
 
 

threejs/lessons/ru/threejs-cameras.md

@@ -1,5 +1,7 @@
 Title: Three.js - Камера
 Description: Как использовать камеру в Three.js
+Category: fundamentals
+TOC: Камера
 
 Эта статья является частью серии статей о three.js. 
 Первая была [об основах](threejs-fundamentals.html).

threejs/lessons/ru/threejs-fundamentals.md

@@ -1,5 +1,7 @@
 Title: Основы Three.js
 Description: Твой первый урок по Three.js начинаетсся с основ
+Category: basics
+TOC: Базовые принципы
 
 Это первая статья в серии статей о three.js.
 [Three.js](http://threejs.org) это 3D-библиотека, которая максимально 

threejs/lessons/ru/threejs-lights.md

@@ -1,5 +1,7 @@
 Title: Three.js - Освещение
 Description: Настройка освещения
+Category: fundamentals
+TOC: Освещение
 
 Эта статья является частью серии статей о three.js. 
 Первая была [об основах](threejs-fundamentals.html).

threejs/lessons/ru/threejs-material-table.md

@@ -1,5 +1,7 @@
 Title: Таблица характеристик материалов
 Description: Таблица, показывающая, какие функции поддерживают каждый из материалов
+Category: reference
+TOC: Таблица материалов
 
 Наиболее распространенными материалами в three.js являются материалы 
 Mesh. Вот таблица, показывающая, какие функции поддерживают каждый из материалов.

threejs/lessons/ru/threejs-materials.md

@@ -1,5 +1,7 @@
 Title: Материалы Three.js
 Description: Материалы в Three.js
+Category: fundamentals
+TOC: Материалы
 
 Эта статья является частью серии статей о three.js. 
 Первая была [об основах](threejs-fundamentals.html).

threejs/lessons/ru/threejs-multiple-scenes.md

@@ -1,5 +1,7 @@
 Title: Three.js - Несколько холстов и Несколько сцен
 Description: Kак рисовать на всей web-странице с THREE.js
+Category: solutions
+TOC: Несколько холстов, несколько сцен
 
 Допустим, вы хотите создать сайт электронной коммерции или сделать 
 страницу с множеством трехмерных диаграмм. На первый взгляд все 

threejs/lessons/ru/threejs-primitives.md

@@ -1,5 +1,7 @@
 Title: Примитивы Three.js
 Description: Обзор примитивов three.js.
+Category: fundamentals
+TOC: Примитивы
 
 Эта статья является частью серии статей о three.js. 
 Первая была [об основах](threejs-fundamentals.html).

threejs/lessons/ru/threejs-responsive.md

@@ -1,5 +1,7 @@
 Title: Three.js Oтзывчивый Дизайн
 Description: Как приспособить three.js под дисплеи разного размера.
+Category: basics
+TOC: Адаптивный дизайн
 
 Это вторая статья в серии статей о three.js.
 Первая была [об основах](threejs-fundamentals.html).

threejs/lessons/ru/threejs-scenegraph.md

@@ -1,5 +1,7 @@
 Title: Граф сцены Three.js
 Description: Что такое граф сцены?
+Category: fundamentals
+TOC: Граф сцены
 
 Эта статья является частью серии статей о three.js. 
 Первая статья - [основы Three.js](threejs-fundamentals.html).

threejs/lessons/ru/threejs-setup.md

@@ -1,5 +1,7 @@
 Title: Настройка окружения Three.js
 Description: Как настроить разрабочее окружение для Three.js
+Category: basics
+TOC: Настройка
 
 Эта статья является частью серии статей о three.js. 
 Первая статья - [основы Three.js](threejs-fundamentals.html).

threejs/lessons/ru/threejs-textures.md

@@ -1,5 +1,7 @@
 Title: Three.js Текстуры
 Description: Использование текстур в three.js
+Category: fundamentals
+TOC: Текстуры
 
 Эта статья является частью серии статей о three.js. 
 Первая статья - [основы Three.js](threejs-fundamentals.html).

threejs/lessons/ru/toc.html

@@ -1,41 +1,4 @@
-<ul>
-  <li>Введение</li>
-  <ul>
-    <li><a href="/threejs/lessons/ru/threejs-fundamentals.html">Базовые принципы</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-responsive.html">Адаптивный дизайн</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-prerequisites.html">Предварительные условия</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-setup.html">Настройка</a></li>
-  </ul>
-  <li>Решения</li>
-  <ul>
-    <li><a href="/threejs/lessons/ru/threejs-load-obj.html">Загрузить файл .OBJ</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-load-gltf.html">Загрузить файл .GLTF</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-multiple-scenes.html"> Несколько холстов, несколько сцен</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-picking.html">Выбор объектов с помощью мыши</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-post-processing.html">Постобработка</a></li>
-  </ul>
-  <li>Советы</li>
-  <ul>
-    <li><a href="/threejs/lessons/ru/threejs-debugging-javascript.html">Отладка JavaScript</a></li>
-  </ul>
-  <li>Фунаментальные понятия</li>
-  <ul>
-    <li><a href="/threejs/lessons/ru/threejs-primitives.html">Примитивы</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-scenegraph.html">Граф сцены</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-materials.html">Материалы</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-textures.html">Текстуры</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-lights.html">Освещение</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-cameras.html">Камера</a></li>
-    <li><a href="#"><del>Мотор!</del></a></li>
-    <li><a href="/threejs/lessons/ru/threejs-shadows.html">Тени</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-fog.html">Туман</a></li>
-    <li><a href="/threejs/lessons/ru/threejs-rendertargets.html">Цели рендеринга</a></li>
-  </ul>
-  <li>Ссылки</li>
-  <ul>
-    <li><a href="/threejs/lessons/ru/threejs-material-table.html">Таблица материалов</a></li>
-  </ul>
-</ul>
+{{{tocHtml}}}
 <ul>
   <li><a href="https://github.com/greggman/threejsfundamentals">github</a></li>
   <li><a href="https://threejs.org">three.js</a></li>

threejs/lessons/threejs-align-html-elements-to-3d.md

@@ -1,5 +1,7 @@
 Title: Three.js Aligning HTML Elements to 3D
 Description: How to line up an HTML Element to match a point in 3D space
+Category: solutions
+TOC: Aligning HTML Elements to 3D
 
 This article is part of a series of articles about three.js. The first article
 is [three.js fundamentals](threejs-fundamentals.html). If you haven't read that

threejs/lessons/threejs-backgrounds.md

@@ -1,5 +1,7 @@
 Title: Three.js Backgrounds and Skyboxes
 Description: How to add a background in THREE.js
+Category: solutions
+TOC: Load a .GLTF file
 
 Most of the articles here use a solid color for a background.
 

threejs/lessons/threejs-billboards.md

@@ -1,5 +1,7 @@
 Title: Three.js Billboards
 Description: How to make things always face the camera.
+Category: solutions
+TOC: Billboards and Facades
 
 In [a previous article](threejs-canvas-textures.html) we used a `CanvasTexture`
 to make labels / badges on characters. Sometimes we'd like to make labels or

threejs/lessons/threejs-cameras.md

@@ -1,5 +1,7 @@
 Title: Three.js Cameras
 Description: How to use Cameras in Three.js
+Category: fundamentals
+TOC: Cameras
 
 This article is one in a series of articles about three.js.
 The first article was [about fundamentals](threejs-fundamentals.html).

threejs/lessons/threejs-canvas-textures.md

@@ -1,5 +1,7 @@
 Title: Three.js Canvas Textures
 Description: How to use a canvas as a texture in Three.js
+Category: solutions
+TOC: Using A Canvas for Dynamic Textures
 
 This article continues from [the article on textures](threejs-textures.html).
 If you haven't read that yet you should probably start there.

threejs/lessons/threejs-cleanup.md

@@ -1,5 +1,7 @@
 Title: Three.js Cleanup
 Description: How to use free memory used by Three.js
+Category: solutions
+TOC: Freeing Resources
 
 Three.js apps often use lots of memory. A 3D model
 might be 1 to 20 meg memory for all of its vertices.

threejs/lessons/threejs-custom-buffergeometry.md

@@ -1,5 +1,7 @@
 Title: Three.js Custom BufferGeometry
 Description: How to make your own BufferGeometry.
+Category: fundamentals
+TOC: Custom BufferGeometry
 
 A [previous article](threejs-custom-geometry.html) covered
 how to use `Geometry`. This article is about `BufferGeometry`.

threejs/lessons/threejs-custom-geometry.md

@@ -1,5 +1,7 @@
 Title: Three.js Custom Geometry
 Description: How to make your own geometry.
+Category: fundamentals
+TOC: Custom Geometry
 
 A [previous article](threejs-primitives.html) gave a tour of
 the various built in primitives included in THREE.js. In this

threejs/lessons/threejs-debugging-glsl.md

@@ -1,5 +1,7 @@
 Title: Debugging Three.js - GLSL
 Description: How to debug GLSL Shaders
+Category: tips
+TOC: Debugging GLSL
 
 This site so far does not teach GLSL just like it does not teach JavaScript.
 Those are really large topics. If you want to learn GLSL consider checking out

threejs/lessons/threejs-debugging-javascript.md

@@ -1,5 +1,7 @@
 Title: Three.js Debugging JavaScript
 Description: How to debug JavaScript with THREE.js
+Category: tips
+TOC: Debugging JavaScript
 
 Most of this article is not directly about THREE.js but is
 rather about debugging JavaScript in general. It seemed important in

threejs/lessons/threejs-fog.md

@@ -1,5 +1,7 @@
 Title: Three.js Fog
 Description: Fog in Three.js
+Category: fundamentals
+TOC: Fog
 
 This article is part of a series of articles about three.js. The
 first article is [three.js fundamentals](threejs-fundamentals.html). If

threejs/lessons/threejs-fundamentals.md

@@ -1,5 +1,7 @@
 Title: Three.js Fundamentals
 Description: Your first Three.js lesson starting with the fundamentals
+Category: basics
+TOC: Fundamentals
 
 This is the first article in a series of articles about three.js.
 [Three.js](http://threejs.org) is a 3D library that tries to make

threejs/lessons/threejs-indexed-textures.md

@@ -1,5 +1,7 @@
 Title: Three.js Indexed Textures for Picking and Color
 Description: Using Indexed Textures for Picking and Color
+Category: solutions
+TOC: Using Indexed Textures for Picking and Color
 
 This article is a continuation of [an article about aligning html elements to 3d](threejs-align-html-elements-to-3d.html).
 If you haven't read that yet you should start there before continuing here.

threejs/lessons/threejs-lights.md

@@ -1,5 +1,7 @@
 Title: Three.js Lights
 Description: Setting up Lights
+Category: fundamentals
+TOC: Lights
 
 This article is part of a series of articles about three.js. The
 first article is [three.js fundamentals](threejs-fundamentals.html). If

threejs/lessons/threejs-load-gltf.md

@@ -1,5 +1,7 @@
 Title: Three.js Loading a .GLTF File
 Description: Loading a .GLTF File
+Category: solutions
+TOC: Load a .GLTF file
 
 In a previous lesson we [loaded an .OBJ file](threejs-load-obj.html). If
 you haven't read it you might want to check it out first.

threejs/lessons/threejs-load-obj.md

@@ -1,5 +1,7 @@
 Title: Three.js Loading a .OBJ File
 Description: Loading a .OBJ File
+Category: solutions
+TOC: Load an .OBJ file
 
 One of the most common things people want to do with three.js
 is to load and display 3D models. A common format is the .OBJ

threejs/lessons/threejs-material-table.md

@@ -1,5 +1,7 @@
 Title: Material Feature Table
 Description: A Table showing which matierals have which features
+Category: reference
+TOC: Material Table
 
 The most common materials in three.js are the Mesh materials. Here
 is a table showing which material support which features.

threejs/lessons/threejs-materials.md

@@ -1,5 +1,7 @@
 Title: Three.js Materials
 Description: Materials in Three.js
+Category: fundamentals
+TOC: Materials
 
 This article is part of a series of articles about three.js. The
 first article is [three.js fundamentals](threejs-fundamentals.html). If

threejs/lessons/threejs-multiple-scenes.md

@@ -1,5 +1,7 @@
 Title: Three.js Multiple Canvases Multiple Scenes
 Description: How to draw stuff all over the page with THREE.js
+Category: solutions
+TOC: Multiple Canvases, Multiple Scenes
 
 A common question is how to use THREE.js with multiple canvases.
 Let's say you want to make an e-commerce site or you want to make

threejs/lessons/threejs-offscreencanvas.md

@@ -1,5 +1,7 @@
 Title: Three.js OffscreenCanvas
 Description: How to use three.js in a web worker
+Category: optimization
+TOC: Using OffscreenCanvas in a Web Worker
 
 [`OffscreenCanvas`](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas)
 is a relatively new browser feature currently only available in Chrome but apparently

threejs/lessons/threejs-optimize-lots-of-objects-animated.md

@@ -1,5 +1,7 @@
 Title: Three.js Optimize Lots of Objects Animated
 Description: Animated merged objects with Morphtargets
+Category: optimization
+TOC: Optimizing Lots of Objects Animated
 
 This article is a continuation of [an article about optimizing lots of objects
 ](threejs-optimize-lots-of-objects.html). If you haven't read that

threejs/lessons/threejs-optimize-lots-of-objects.md

@@ -1,5 +1,7 @@
 Title: Three.js Optimize Lots of Objects
 Description: Optimize by merging Objects
+Category: optimization
+TOC: Optimizing Lots of Objects
 
 This article is part of a series of articles about three.js. The first article
 is [three.js fundamentals](threejs-fundamentals.html). If you haven't read that

threejs/lessons/threejs-picking.md

@@ -1,5 +1,7 @@
 Title: Three.js Picking
 Description: Selecting Objects with the Mouse in Three.js
+Category: solutions
+TOC: Picking Objects with the mouse
 
 *Picking* refers to the process of figuring out which object a user clicked on or touched. There are tons of ways to implement picking each with their tradeoffs. Let's go over the 2 most common.
 

threejs/lessons/threejs-post-processing-3dlut.md

@@ -1,5 +1,7 @@
 Title: Three.js Post Processing 3DLUT
 Description: How to implement a 3DLUT Post Process in THREE.js
+Category: solutions
+TOC: Applying a LUT File for effects
 
 In the last article we went over [post processing](threejs-post-processing.html).
 On of the common ways to post process is called a LUT or 3DLUT. LUT stands for LookUp Table. A 3DLUT is therefore a 3 dimensional look up table.

threejs/lessons/threejs-post-processing.md

@@ -1,5 +1,7 @@
 Title: Three.js Post Processing
 Description: How to Post Process in THREE.js
+Category: solutions
+TOC: Post Processing
 
 *Post processing* generally refers to applying some kind of effect or filter to
 a 2D image. In the case of THREE.js we have a scene with a bunch of meshes in

threejs/lessons/threejs-prerequisites.md

@@ -1,5 +1,7 @@
 Title: Three.js Prerequisites
 Description: What you need to know to use this site.
+Category: basics
+TOC: Prerequisites
 
 These articles are meant to help you learn how to use three.js.
 They assume you know how to program in JavaScript. They assume

threejs/lessons/threejs-primitives.md

@@ -1,5 +1,7 @@
 Title: Three.js Primitives
 Description: A tour of three.js primitives.
+Category: fundamentals
+TOC: Primitives
 
 This article is one in a series of articles about three.js.
 The first article was [about fundamentals](threejs-fundamentals.html).

threejs/lessons/threejs-rendering-on-demand.md

@@ -1,5 +1,7 @@
 Title: Three.js Rendering on Demand
 Description: How to use less energy.
+Category: tips
+TOC: Rendering On Demand
 
 The topic might be obvious to many people but just in case ... most Three.js
 examples render continuously. In other words they setup a

threejs/lessons/threejs-rendertargets.md

@@ -1,5 +1,7 @@
 Title: Three.js Render Targets
 Description: How to render to a texture.
+Category: fundamentals
+TOC: Render Targets
 
 A render target in three.js is basicaly a texture you can render to.
 After you render to it you can use that texture like any other texture.

threejs/lessons/threejs-responsive.md

@@ -1,5 +1,7 @@
 Title: Three.js Responsive Design
 Description: How to make your three.js fit different sized displays.
+Category: basics
+TOC: Responsive Design
 
 This is the second article in a series of articles about three.js.
 The first article was [about fundamentals](threejs-fundamentals.html).

threejs/lessons/threejs-scenegraph.md

@@ -1,5 +1,7 @@
 Title: Three.js Scene Graph
 Description: What's a scene graph?
+Category: fundamentals
+TOC: Scenegraph
 
 This article is part of a series of articles about three.js. The
 first article is [three.js fundamentals](threejs-fundamentals.html). If

threejs/lessons/threejs-setup.md

@@ -1,5 +1,7 @@
 Title: Three.js Setup
 Description: How to setup your development environment for three.js
+Category: basics
+TOC: Setup
 
 This article is one in a series of articles about three.js.
 The first article was [about three.js fundamentals](threejs-fundamentals.html).

threejs/lessons/threejs-shadertoy.md

@@ -1,5 +1,7 @@
 Title: Three.js and Shadertoy
 Description: How to use Shadertoy shaders in THREE.js
+Category: solutions
+TOC: Using Shadertoy shaders
 
 [Shadertoy](https://shadertoy.com) is a famous website hosting amazing shader experiments. People often ask how they can use those shaders with Three.js.
 

threejs/lessons/threejs-shadows.md

@@ -1,5 +1,7 @@
 Title: Three.js Shadows
 Description: Shadows in Three.js
+Category: fundamentals
+TOC: Shadows
 
 This article is part of a series of articles about three.js. The
 first article is [three.js fundamentals](threejs-fundamentals.html). If

threejs/lessons/threejs-textures.md

@@ -1,5 +1,7 @@
 Title: Three.js Textures
 Description: Using textures in three.js
+Category: fundamentals
+TOC: Textures
 
 This article is one in a series of articles about three.js.
 The first article was [about three.js fundamentals](threejs-fundamentals.html).

threejs/lessons/threejs-tips.md

@@ -1,12 +1,14 @@
 Title: Three.js Tips
 Description: Small issues that might trip you up using three.js
+Category: tips
+TOC: #
 
 This article is a collection of small issues you might run into
 using three.js that seemed too small to have their own article.
 
 ---
 
-<a id="screenshot"></a>
+<a id="screenshot" data-toc="Taking a screenshot"></a>
 
 # Taking A Screenshot of the Canvas
 
@@ -124,7 +126,7 @@ For a different solution see the next item.
 
 ---
 
-<a id="preservedrawingbuffer"></a>
+<a id="preservedrawingbuffer" data-toc="Prevent the Canvas Being Cleared"></a>
 
 # Preventing the canvas being cleared
 
@@ -159,7 +161,7 @@ If you really wanted to make a drawing program you'd
 
 ---
 
-<a id="tabindex"></a>
+<a id="tabindex" data-toc="Get Keyboard Input From a Canvas"></a>
 
 # Getting Keyboard Input
 
@@ -236,7 +238,7 @@ canvas has both solutions applied.
 
 ---
 
-<a id="transparent-canvas"></a>
+<a id="transparent-canvas" data-toc="Make the Canvas Transparent"></a>
  
 # Making the Canvas Transparent
 
@@ -337,7 +339,7 @@ and touch events so you can select the text beneath.
 
 ---
 
-<a id="html-background"></a>
+<a id="html-background" data-toc="Use three.js as Background in HTML"></a>
 
 # Making your background a three.js animation
 

threejs/lessons/threejs-transparency.md

@@ -1,5 +1,7 @@
 Title: Three.js Transparency
 Description: How to deal with transparency issues in THREE.js
+Category: solutions
+TOC: How to Draw Transparent Objects
 
 Transparency in three.js is both easy and hard.
 

threejs/lessons/threejs-voxel-geometry.md

@@ -1,5 +1,7 @@
 Title: Three.js Voxel(Minecraft Like) Geometry
 Description: How to make voxel geometry like Minecraft
+Category: solutions
+TOC: Making Voxel Geometry (Minecraft)
 
 I've seen this topic come up more than once in various places.
 That is basically, "How do I make a voxel display like Minecraft".

threejs/lessons/threejs-webvr-look-to-select.md

@@ -1,5 +1,7 @@
 Title: Three.js WebVR - Look to Select
 Description: How to implement Look to Select.
+Category: webvr
+TOC: WebVR - Look To Select
 
 **NOTE: The examples on this page require a VR capable
 device. Without one they won't work. See [previous article](threejs-webvr.html)

threejs/lessons/threejs-webvr-point-to-select.md

@@ -1,5 +1,7 @@
 Title: Three.js WebVR - 3DOF Point to Select
 Description: How to implement 3DOF Point to Select.
+Category: webvr
+TOC: WebVR - Point To Select
 
 **NOTE: The examples on this page require a VR capable
 device with a pointing device. Without one they won't work. See [this article](threejs-webvr.html)

threejs/lessons/threejs-webvr.md

@@ -1,5 +1,7 @@
 Title: Three.js WebVR
 Description: How to use Virtual Reality in Three.js.
+Category: webvr
+TOC: WebVR - Basics
 
 Making WebVR apps in three.js is pretty simple. You basically just have to tell
 three.js you want to use WebVR. If you think about it a few things about WebVR

threejs/lessons/toc.html

@@ -1,71 +1,4 @@
-<ul>
-  <li>Basics</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-fundamentals.html">Fundamentals</a></li>
-    <li><a href="/threejs/lessons/threejs-responsive.html">Responsive Design</a></li>
-    <li><a href="/threejs/lessons/threejs-prerequisites.html">Prerequisites</a></li>
-    <li><a href="/threejs/lessons/threejs-setup.html">Setup</a></li>
-  </ul>
-  <li>Solutions</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-load-obj.html">Load an .OBJ file</a></li>
-    <li><a href="/threejs/lessons/threejs-load-gltf.html">Load a .GLTF file</a></li>
-    <li><a href="/threejs/lessons/threejs-backgrounds.html">Add a Background or Skybox</a></li>
-    <li><a href="/threejs/lessons/threejs-transparency.html">How to Draw Transparent Objects</a></li>
-    <li><a href="/threejs/lessons/threejs-multiple-scenes.html">Multiple Canvases, Multiple Scenes</a></li>
-    <li><a href="/threejs/lessons/threejs-picking.html">Picking Objects with the mouse</a></li>
-    <li><a href="/threejs/lessons/threejs-post-processing.html">Post Processing</a></li>
-    <li><a href="/threejs/lessons/threejs-post-processing-3dlut.html">Applying a LUT File for effects</a></li>
-    <li><a href="/threejs/lessons/threejs-shadertoy.html">Using Shadertoy shaders</a></li>
-    <li><a href="/threejs/lessons/threejs-align-html-elements-to-3d.html">Aligning HTML Elements to 3D</a></li>
-    <li><a href="/threejs/lessons/threejs-indexed-textures.html">Using Indexed Textures for Picking and Color</a></li>
-    <li><a href="/threejs/lessons/threejs-canvas-textures.html">Using A Canvas for Dynamic Textures</a></li>
-    <li><a href="/threejs/lessons/threejs-billboards.html">Billboards and Facades</a></li>
-    <li><a href="/threejs/lessons/threejs-cleanup.html">Freeing Resources</a></li>
-    <li><a href="/threejs/lessons/threejs-voxel-geometry.html">Making Voxel Geometry (Minecraft)</a></li>
-  </ul>
-  <li>WebVR</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-webvr.html">WebVR - Basics</a></li>
-    <li><a href="/threejs/lessons/threejs-webvr-look-to-select.html">WebVR - Look To Select</a></li>
-    <li><a href="/threejs/lessons/threejs-webvr-point-to-select.html">WebVR - Point To Select</a></li>
-  </ul>
-  <li>Optimization</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-optimize-lots-of-objects.html">Optimizing Lots of Objects</a></li>
-    <li><a href="/threejs/lessons/threejs-optimize-lots-of-objects-animated.html">Optimizing Lots of Objects Animated</a></li>
-    <li><a href="/threejs/lessons/threejs-offscreencanvas.html">Using OffscreenCanvas in a Web Worker</a></li>
-  </ul>
-  <li>Tips</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-rendering-on-demand.html">Rendering On Demand</a></li>
-    <li><a href="/threejs/lessons/threejs-debugging-javascript.html">Debugging JavaScript</a></li>
-    <li><a href="/threejs/lessons/threejs-debugging-glsl.html">Debugging GLSL</a></li>
-    <li><a href="/threejs/lessons/threejs-tips.html#screenshot">Taking a screenshot</a></li>
-    <li><a href="/threejs/lessons/threejs-tips.html#preservedrawingbuffer">Prevent the Canvas Being Cleared</a></li>
-    <li><a href="/threejs/lessons/threejs-tips.html#tabindex">Get Keyboard Input From a Canvas</a></li>
-    <li><a href="/threejs/lessons/threejs-tips.html#transparent-canvas">Make the Canvas Transparent</a></li>
-    <li><a href="/threejs/lessons/threejs-tips.html#html-background">Use three.js as Background in HTML</a></li>
-  </ul>
-  <li>Fundamentals</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-primitives.html">Primitives</a></li>
-    <li><a href="/threejs/lessons/threejs-scenegraph.html">Scenegraph</a></li>
-    <li><a href="/threejs/lessons/threejs-materials.html">Materials</a></li>
-    <li><a href="/threejs/lessons/threejs-textures.html">Textures</a></li>
-    <li><a href="/threejs/lessons/threejs-lights.html">Lights</a></li>
-    <li><a href="/threejs/lessons/threejs-cameras.html">Cameras</a></li>
-    <li><a href="/threejs/lessons/threejs-shadows.html">Shadows</a></li>
-    <li><a href="/threejs/lessons/threejs-fog.html">Fog</a></li>
-    <li><a href="/threejs/lessons/threejs-rendertargets.html">Render Targets</a></li>
-    <li><a href="/threejs/lessons/threejs-custom-geometry.html">Custom Geometry</a></li>
-    <li><a href="/threejs/lessons/threejs-custom-buffergeometry.html">Custom BufferGeometry</a></li>
-  </ul>
-  <li>Reference</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-material-table.html">Material Table</a></li>
-  </ul>
-</ul>
+{{{tocHtml}}}
 <ul>
   <li><a href="https://github.com/greggman/threejsfundamentals">github</a></li>
   <li><a href="https://threejs.org">three.js</a></li>

threejs/lessons/zh_cn/langinfo.hanson

@@ -8,6 +8,15 @@
   commentSectionHeader: '<div>Questions? <a href="http://stackoverflow.com/questions/tagged/three.js">Ask on stackoverflow</a>.</div>\n        <div><a href="https://github.com/greggman/threejsfundamentals/issues/new?assignees=&labels=suggested+topic&template=suggest-topic.md&title=%5BSUGGESTION%5D">Suggestion</a>? <a href="https://github.com/greggman/threejsfundamentals/issues/new?assignees=&labels=&template=request.md&title=">Request</a>? <a href="https://github.com/greggman/threejsfundamentals/issues/new?assignees=&labels=bug+%2F+issue&template=bug-issue-report.md&title=">Issue</a>? <a href="https://github.com/greggman/threejsfundamentals/issues/new?assignees=&labels=bug+%2F+issue&template=bug-issue-report.md&title=">Bug</a>?</div>',
   missing: "Sorry this article has not been translated yet. [Translations Welcome](https://github.com/greggman/threejsfundamentals)! 😄\n\n[Here's the original English article for now]({{{origLink}}}).",
   toc: '内容列表',
+  categoryMapping: {
+    'basics': '基础',
+    'solutions': 'Solutions',
+    'webvr': 'WebVR',
+    'optimization': 'Optimization',
+    'tips': 'Tips',
+    'fundamentals': 'Fundamentals',
+    'reference': 'Reference',
+  },
 }
 
 

threejs/lessons/zh_cn/threejs-fundamentals.md

@@ -1,5 +1,7 @@
 Title: Three.js基础
 Description: 学习Three.js的第一篇文章
+Category: basics
+TOC: 基础
 
 这是Three.js系列文章的第一篇。
 [Three.js](http://threejs.org)是一个尽可能简化在网页端获取3D

threejs/lessons/zh_cn/threejs-prerequisites.md

@@ -1,5 +1,7 @@
 Title: Three.js先决条件
 Description: 使用此网站你需要了解的。
+Category: basics
+TOC: 先决条件
 
 这些文章意在帮助你学习如何使用three.js。
 假设你知道怎么使用JavaScript编程。假设

threejs/lessons/zh_cn/threejs-responsive.md

@@ -1,5 +1,7 @@
 Title: Three.js响应式设计
 Description: 如何让你的three.js适应不同尺寸的显示器。
+Category: basics
+TOC: 响应式设计
 
 这是three.js系列文章的第二篇。
 第一篇是[关于基础](threejs-fundamentals.html).

threejs/lessons/zh_cn/threejs-setup.md

@@ -1,5 +1,7 @@
 Title: Three.js设置
 Description: 如何为你的three.js设置开发环境
+Category: basics
+TOC: 设置
 
 这是three.js系列文章的其中之一。
 第一篇是[关于three.js基础](threejs-fundamentals.html)。

threejs/lessons/zh_cn/toc.html

@@ -1,64 +1,4 @@
-<ul>
-  <li>Basics</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-fundamentals.html">Fundamentals</a></li>
-    <li><a href="/threejs/lessons/threejs-responsive.html">Responsive Design</a></li>
-    <li><a href="/threejs/lessons/threejs-prerequisites.html">Prerequisites</a></li>
-    <li><a href="/threejs/lessons/threejs-setup.html">Setup</a></li>
-  </ul>
-  <li>Solutions</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-load-obj.html">Load an .OBJ file</a></li>
-    <li><a href="/threejs/lessons/threejs-load-gltf.html">Load a .GLTF file</a></li>
-    <li><a href="/threejs/lessons/threejs-backgrounds.html">Add a Background or Skybox</a></li>
-    <li><a href="/threejs/lessons/threejs-transparency.html">How to Draw Transparent Objects</a></li>
-    <li><a href="/threejs/lessons/threejs-multiple-scenes.html">Multiple Canvases, Multiple Scenes</a></li>
-    <li><a href="/threejs/lessons/threejs-picking.html">Picking Objects with the mouse</a></li>
-    <li><a href="/threejs/lessons/threejs-post-processing.html">Post Processing</a></li>
-    <li><a href="/threejs/lessons/threejs-post-processing-3dlut.html">Applying a LUT File for effects</a></li>
-    <li><a href="/threejs/lessons/threejs-shadertoy.html">Using Shadertoy shaders</a></li>
-    <li><a href="/threejs/lessons/threejs-align-html-elements-to-3d.html">Aligning HTML Elements to 3D</a></li>
-    <li><a href="/threejs/lessons/threejs-indexed-textures.html">Using Indexed Textures for Picking and Color</a></li>
-    <li><a href="/threejs/lessons/threejs-canvas-textures.html">Using A Canvas for Dynamic Textures</a></li>
-    <li><a href="/threejs/lessons/threejs-billboards.html">Billboards and Facades</a></li>
-  </ul>
-  <li>WebVR</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-webvr.html">WebVR - Basics</a></li>
-    <li><a href="/threejs/lessons/threejs-webvr-look-to-select.html">WebVR - Look To Select</a></li>
-    <li><a href="/threejs/lessons/threejs-webvr-point-to-select.html">WebVR - Point To Select</a></li>
-  </ul>
-  <li>Optimization</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-optimize-lots-of-objects.html">Optimizing Lots of Objects</a></li>
-    <li><a href="/threejs/lessons/threejs-optimize-lots-of-objects-animated.html">Optimizing Lots of Objects Animated</a></li>
-    <li><a href="/threejs/lessons/threejs-offscreencanvas.html">Using OffscreenCanvas in a Web Worker</a></li>
-  </ul>
-  <li>Tips</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-rendering-on-demand.html">Rendering On Demand</a></li>
-    <li><a href="/threejs/lessons/threejs-debugging-javascript.html">Debugging JavaScript</a></li>
-    <li><a href="/threejs/lessons/threejs-debugging-glsl.html">Debugging GLSL</a></li>
-  </ul>
-  <li>Fundamentals</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-primitives.html">Primitives</a></li>
-    <li><a href="/threejs/lessons/threejs-scenegraph.html">Scenegraph</a></li>
-    <li><a href="/threejs/lessons/threejs-materials.html">Materials</a></li>
-    <li><a href="/threejs/lessons/threejs-textures.html">Textures</a></li>
-    <li><a href="/threejs/lessons/threejs-lights.html">Lights</a></li>
-    <li><a href="/threejs/lessons/threejs-cameras.html">Cameras</a></li>
-    <li><a href="/threejs/lessons/threejs-shadows.html">Shadows</a></li>
-    <li><a href="/threejs/lessons/threejs-fog.html">Fog</a></li>
-    <li><a href="/threejs/lessons/threejs-rendertargets.html">Render Targets</a></li>
-    <li><a href="/threejs/lessons/threejs-custom-geometry.html">Custom Geometry</a></li>
-    <li><a href="/threejs/lessons/threejs-custom-buffergeometry.html">Custom BufferGeometry</a></li>
-  </ul>
-  <li>Reference</li>
-  <ul>
-    <li><a href="/threejs/lessons/threejs-material-table.html">Material Table</a></li>
-  </ul>
-</ul>
+{{{tocHtml}}}
 <ul>
   <li><a href="https://github.com/greggman/threejsfundamentals">github</a></li>
   <li><a href="https://threejs.org">three.js</a></li>

toc.hanson

@@ -0,0 +1,57 @@
+{
+  'basics': [
+    'threejs-fundamentals.md',
+    'threejs-responsive.md',
+    'threejs-prerequisites.md',
+    'threejs-setup.md',
+  ],
+  'solutions': [
+    'threejs-load-obj.md',
+    'threejs-load-gltf.md',
+    'threejs-backgrounds.md',
+    'threejs-transparency.md',
+    'threejs-multiple-scenes.md',
+    'threejs-picking.md',
+    'threejs-post-processing.md',
+    'threejs-post-processing-3dlut.md',
+    'threejs-shadertoy.md',
+    'threejs-align-html-elements-to-3d.md',
+    'threejs-indexed-textures.md',
+    'threejs-canvas-textures.md',
+    'threejs-billboards.md',
+    'threejs-cleanup.md',
+    'threejs-voxel-geometry.md',
+  ],
+  'webvr': [
+    'threejs-webvr.md',
+    'threejs-webvr-look-to-select.md',
+    'threejs-webvr-point-to-select.md',
+  ],
+  'optimization': [
+    'threejs-optimize-lots-of-objects.md',
+    'threejs-optimize-lots-of-objects-animated.md',
+    'threejs-offscreencanvas.md',
+  ],
+  'tips': [
+    'threejs-rendering-on-demand.md',
+    'threejs-debugging-javascript.md',
+    'threejs-debugging-glsl.md',
+    'threejs-tips.md',
+  ],
+  'fundamentals': [
+    'threejs-primitives.md',
+    'threejs-scenegraph.md',
+    'threejs-materials.md',
+    'threejs-textures.md',
+    'threejs-lights.md',
+    'threejs-cameras.md',
+    'threejs-shadows.md',
+    'threejs-fog.md',
+    'threejs-rendertargets.md',
+    'threejs-custom-geometry.md',
+    'threejs-custom-buffergeometry.md',
+  ],
+  'reference': [
+    'threejs-material-table.md',
+  ],
+}