fix links

build/templates/index.template

@@ -85,7 +85,7 @@ OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
     </div>
   </div>
 </div>
-<iframe class="background" src="threejs/background.html"></iframe>
+<iframe class="background" src="/threejs/background.html"></iframe>
 <style>
 #forkongithub a {
     background: #000;

threejs/lessons/ru/threejs-fundamentals.md

@@ -95,7 +95,7 @@ const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 думайте о слове "frustum" как о трехмерной фигуре,
 такой как сфера, куб и призма.
 
-<img src="../resources/frustum-3d.svg" width="500" class="threejs_center"/>
+<img src="resources/frustum-3d.svg" width="500" class="threejs_center"/>
 
 Высота ближней и дальней плоскостей определяется полем зрения (field of view). 
 Ширина обеих плоскостей определяется полем зрения и соотношением сторон (aspect).
@@ -113,7 +113,7 @@ camera.position.z = 2;
 
 Вот как мы её направили.
 
-<img src="../resources/scene-down.svg" width="500" class="threejs_center"/>
+<img src="resources/scene-down.svg" width="500" class="threejs_center"/>
 
 На диаграмме выше мы видим, что наша камера находится в `z = 2`. И смотрит вниз по оси -Z. 
 Усеченная пирамида начинается с 0.1 единицы спереди камеры и до 5 единиц перед камерой.

threejs/lessons/ru/threejs-responsive.md

@@ -63,12 +63,12 @@ HTML body по умолчанию имеет margin в 5 пикселей, по
 Слишком высокие или слишком широкие. Откройте пример в его отдельном окне и измените 
 его размер. Вы увидите, как кубы растягиваются то вширь, то ввысь.
 
-<img src="../resources/images/resize-incorrect-aspect.png" width="407" class="threejs_center">
+<img src="resources/images/resize-incorrect-aspect.png" width="407" class="threejs_center">
 
 2. Они выглядят пиксельно и размыто. 
 Растяните окно больше, и вы действительно увидите проблему.
 
-<img src="../resources/images/resize-low-res.png" class="threejs_center">
+<img src="resources/images/resize-low-res.png" class="threejs_center">
 
 Давайте сначала исправим проблему растяжения. Для этого нам нужно установить соотношение 
 сторон (aspect) камеры в соответствии с размером холста.
@@ -95,7 +95,7 @@ function render(time) {
 Откройте пример в отдельном окне и измените размер окна, и вы увидите, что кубы больше 
 не растянуты по высоте или ширине. Они остаются правильными, независимо от размера окна.
 
-<img src="../resources/images/resize-correct-aspect.png" width="407" class="threejs_center">
+<img src="resources/images/resize-correct-aspect.png" width="407" class="threejs_center">
 
 Теперь давайте исправим пиксильность.
 
@@ -173,7 +173,7 @@ function render(time) {
 соответствующим размеру изображения на холсте.
 
 Чтобы сделать так, чтобы CSS позволял обрабатывать изменение размера, 
-давайте возьмем наш код и поместим его в [отдельный `.js` файл](../../resources/threejs-responsive.js).
+давайте возьмем наш код и поместим его в [отдельный `.js` файл](../threejs-responsive.js).
 Вот еще несколько примеров, где мы позволяем CSS выбирать размер, без написания кода.
 
 Давайте поместим наши кубики в середине абзаца текста.

threejs/lessons/ru/threejs-scenegraph.md

@@ -9,13 +9,13 @@ Description: Что такое граф сцены?
 движке - это иерархия узлов в графе, где каждый узел представляет 
 локальное пространство.
 
-<img src="../resources/images/scenegraph-generic.svg" align="center">
+<img src="resources/images/scenegraph-generic.svg" align="center">
 
 Это своего рода абстракция, поэтому давайте попробуем привести несколько примеров.
 
 Одним из примеров может быть солнечная система, солнце, земля, луна.
 
-<img src="../resources/images/scenegraph-solarsystem.svg" align="center">
+<img src="resources/images/scenegraph-solarsystem.svg" align="center">
 
 Земля вращается вокруг Солнца. Луна вращается вокруг Земли. Луна движется по 
 кругу вокруг Земли. С точки зрения Луны она вращается в «локальном пространстве» 
@@ -155,7 +155,7 @@ objects.push(earthMesh);
 
 Наш граф сцены в настоящее время выглядит следующим образом
 
-<img src="../resources/images/scenegraph-sun-earth.svg" align="center">
+<img src="resources/images/scenegraph-sun-earth.svg" align="center">
 
 Чтобы это исправить, давайте добавим пустой узел графа сцены. 
 Мы будем связывать солнце и землю с этим узлом.
@@ -186,7 +186,7 @@ objects.push(earthMesh);
 
 Наш новый граф сцены выглядит следующим образом
 
-<img src="../resources/images/scenegraph-sun-earth-fixed.svg" align="center">
+<img src="resources/images/scenegraph-sun-earth-fixed.svg" align="center">
 
 И `sunMesh` и `earthMesh` дети `solarSystem`. Все 3 вращаются, и теперь, 
 поскольку они не являются потомками `earthMesh`, `sunMesh` больше не 
@@ -224,7 +224,7 @@ objects.push(earthMesh);
 Снова мы добавили еще один невидимый узел графа сцены `Object3D` под названием `earthOrbit`
 и добавили `earthMesh` и `moonMesh` к нему. Новый граф сцены выглядит следующим образом.
 
-<img src="../resources/images/scenegraph-sun-earth-moon.svg" align="center">
+<img src="resources/images/scenegraph-sun-earth-moon.svg" align="center">
 
 и вот что
 
@@ -362,7 +362,7 @@ class AxisGridHelper {
 Еще несколько примеров графов сцены. Автомобиль в простом игровом мире 
 может иметь такой граф сцены
 
-<img src="../resources/images/scenegraph-car.svg" align="center">
+<img src="resources/images/scenegraph-car.svg" align="center">
 
 Если вы двигаете кузов автомобиля, все колеса будут двигаться вместе с ним. 
 Если вы хотите, чтобы кузов отскакивал отдельно от колес, вы можете привязать 
@@ -370,7 +370,7 @@ class AxisGridHelper {
 
 Другой пример - человек в игровом мире.
 
-<img src="../resources/images/scenegraph-human.svg" align="center">
+<img src="resources/images/scenegraph-human.svg" align="center">
 
 Вы можете видеть, что график сцены становится довольно сложным для человека. 
 На самом деле этот граф сцены упрощен. Например, вы можете расширить его, 

threejs/lessons/threejs-lights.md

@@ -2,7 +2,7 @@ Title: Three.js Lights
 Description: Setting up Lights
 
 This article is part of a series of articles about three.js. The
-first article is [three.js fundamentals](three-fundamentals.html). If
+first article is [three.js fundamentals](threejs-fundamentals.html). If
 you haven't read that yet and you're new to three.js you might want to
 consider starting there. The 
 [previous article was about textures](threejs-textures.html).

threejs/lessons/threejs-load-gltf.md

@@ -145,7 +145,7 @@ gltfLoader.load('resources/models/cartoon_lowpoly_small_city_free_pack/scene.glt
   console.log(dumpObject(root).join('\n'));
 ```
 
-[Running that](.../threejs-load-gltf-dump-scenegraph.html) I got this listing
+[Running that](../threejs-load-gltf-dump-scenegraph.html) I got this listing
 
 ```text
 OSG_Scene [Scene]
@@ -485,7 +485,7 @@ function dumpObject(obj, lines, isLast = true, prefix = '') {
 }
 ```
 
-And the result from [running it](.../threejs-load-gltf-dump-scenegraph-extra.html)
+And the result from [running it](../threejs-load-gltf-dump-scenegraph-extra.html)
 
 ```text
 OSG_Scene [Scene]

threejs/lessons/threejs-load-obj.md

@@ -306,7 +306,7 @@ objLoader.load('resources/models/windmill_2/windmill.obj', (event) => {
 +  console.log(boxCenter);
 ```
 
-Looking in [the JavaScript console](threejs-debugging.html) I see
+Looking in [the JavaScript console](threejs-debugging-javascript.html) I see
 
 ```js
 size 2123.6499788469982

threejs/lessons/threejs-materials.md

@@ -2,7 +2,7 @@ Title: Three.js Materials
 Description: Materials in Three.js
 
 This article is part of a series of articles about three.js. The
-first article is [three.js fundamentals](three-fundamentals.html). If
+first article is [three.js fundamentals](threejs-fundamentals.html). If
 you haven't read that yet and you're new to three.js you might want to
 consider starting there.
  

threejs/lessons/threejs-picking.md

@@ -12,7 +12,7 @@ A few optimizations would include first checking if the ray intersects with an o
 THREE.js provides a `RayCaster` class that does exactly this.
 
 Let's make a scene with a 100 objects and try picking them. We'll
-start with an example from [the article on responsive pages](three.js)
+start with an example from [the article on responsive pages](threejs-responsive.html)
 
 A few changes
 

threejs/lessons/threejs-responsive.md

@@ -175,7 +175,7 @@ It should now render with a resolution that matches the display
 size of the canvas.
 
 To make the point about letting CSS handle the resizing let's take
-our code and put it in a [separate `.js` file](../resources/threejs-responsive.js).
+our code and put it in a [separate `.js` file](../threejs-responsive.js).
 Here then are a few more examples where we let CSS choose the size and notice we had
 to change zero code for them to work.
 

threejs/lessons/threejs-scenegraph.md

@@ -2,7 +2,7 @@ Title: Three.js Scenegraph
 Description: What's a scene graph?
 
 This article is part of a series of articles about three.js. The
-first article is [three.js fundamentals](three-fundamentals.html). If
+first article is [three.js fundamentals](threejs-fundamentals.html). If
 you haven't read yet you might want to consider starting there.
 
 Three.js's core is arguably its scene graph. A scene graph in a 3D

threejs/lessons/threejs-shadows.md

@@ -2,7 +2,7 @@ Title: Three.js Shadows
 Description: Shadows in Three.js
 
 This article is part of a series of articles about three.js. The
-first article is [three.js fundamentals](three-fundamentals.html). If
+first article is [three.js fundamentals](threejs-fundamentals.html). If
 you haven't read that yet and you're new to three.js you might want to
 consider starting there. The 
 [previous article was about cameras](threejs-cameras.html) which is

threejs/lessons/threejs-transparency.md

@@ -0,0 +1,4 @@
+Title: Three.js Transparency
+Description: How to deal with transparency issues in THREE.js
+
+TBD