add deep links to primitives

threejs/lessons/resources/lesson.css

@@ -27,6 +27,10 @@ table {
 .footnotes {
   font-size: smaller;
 }
+.deep-link {
+  position: absolute;
+  transform: translateX(-1em);
+}
 
 pre {
   background: rgb(143, 140, 140);

threejs/lessons/resources/threejs-lesson-utils.js

@@ -1,5 +1,5 @@
 import * as THREE from '../../resources/threejs/r115/build/three.module.js';
-import {TrackballControls} from '../../resources/threejs/r115/examples/jsm/controls/TrackballControls.js';
+import {OrbitControls} from '../../resources/threejs/r115/examples/jsm/controls/OrbitControls.js';
 
 export const threejsLessonUtils = {
   _afterPrettifyFuncs: [],
@@ -147,10 +147,13 @@ export const threejsLessonUtils = {
       targetFOVDeg = camera.fov;
 
       if (settings.trackball !== false) {
-        const controls = new TrackballControls(camera, elem);
-        controls.noZoom = true;
-        controls.noPan = true;
-        resizeFunctions.push(controls.handleResize.bind(controls));
+        const controls = new OrbitControls(camera, elem);
+        controls.rotateSpeed = 1 / 6;
+        controls.enableZoom = false;
+        controls.enablePan = false;
+        controls.enableKeys = false;
+        elem.removeAttribute('tabIndex');
+        //resizeFunctions.push(controls.handleResize.bind(controls));
         updateFunctions.push(controls.update.bind(controls));
       }
 

threejs/lessons/resources/threejs-primitives.js

@@ -642,9 +642,9 @@ const geometry = new THREE.WireframeGeometry(
     },
   };
 
-  function addLink(parent, name) {
+  function addLink(parent, name, href) {
     const a = document.createElement('a');
-    a.href = `https://threejs.org/docs/#api/geometries/${name}`;
+    a.href = href || `https://threejs.org/docs/#api/geometries/${name}`;
     const code = document.createElement('code');
     code.textContent = name;
     a.appendChild(code);
@@ -652,6 +652,15 @@ const geometry = new THREE.WireframeGeometry(
     return a;
   }
 
+  function addDeepLink(parent, name, href) {
+    const a = document.createElement('a');
+    a.href = href || `https://threejs.org/docs/#api/geometries/${name}`;
+    a.textContent = name;
+    a.className = 'deep-link';
+    parent.appendChild(a);
+    return a;
+  }
+
   function addElem(parent, type, className, text) {
     const elem = document.createElement(type);
     elem.className = className;
@@ -680,6 +689,7 @@ const geometry = new THREE.WireframeGeometry(
     const elem = addDiv(pair, 'shape');
 
     const right = addDiv(pair, 'desc');
+    addDeepLink(right, '#', `#${base.id}`);
     addLink(right, name);
     if (info.nonBuffer !== false) {
       addElem(right, 'span', '', ', ');

threejs/lessons/ru/threejs-primitives.md

@@ -18,30 +18,30 @@ Three.js имеет большое количество примитивов. П
 создание и загрузку данных из нескольких программ 3D-моделирования. 
 А сейчас давайте рассмотрим некоторые из доступных примитивов.
 
-<div data-primitive="BoxBufferGeometry">Прямоугольный параллелепипед</div>
-<div data-primitive="CircleBufferGeometry">Круг</div>
-<div data-primitive="ConeBufferGeometry">Конус</div>
-<div data-primitive="CylinderBufferGeometry">Цилиндр</div>
-<div data-primitive="DodecahedronBufferGeometry">Додекаэдр (12 граней)</div>
-<div data-primitive="ExtrudeBufferGeometry">Выдавленная 2d фигура с скругленными краями.
+<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">Прямоугольный параллелепипед</div>
+<div id="Diagram-CircleBufferGeometry" data-primitive="CircleBufferGeometry">Круг</div>
+<div id="Diagram-ConeBufferGeometry" data-primitive="ConeBufferGeometry">Конус</div>
+<div id="Diagram-CylinderBufferGeometry" data-primitive="CylinderBufferGeometry">Цилиндр</div>
+<div id="Diagram-DodecahedronBufferGeometry" data-primitive="DodecahedronBufferGeometry">Додекаэдр (12 граней)</div>
+<div id="Diagram-ExtrudeBufferGeometry" data-primitive="ExtrudeBufferGeometry">Выдавленная 2d фигура с скругленными краями.
 Здесь мы выдавливаем форму сердца. Обратите внимание, это основа 
 для <code>TextBufferGeometry</code> и <code>TextGeometry</code> соответственно.</div>
-<div data-primitive="IcosahedronBufferGeometry">Икосаэдр (20 граней)</div>
-<div data-primitive="LatheBufferGeometry">Форма, созданная вращением линии. Например, лампы, кегли для боулинга, свечи, подсвечники, бокалы для вина, стаканы для питья и т. Д. Вы указываете 2-мерный силуэт в виде серии точек, а затем указываете three.js , сколько секций нужно сделать, когда он вращает силуэт вокруг оси.</div>
-<div data-primitive="OctahedronBufferGeometry">Октаэдр (8 граней)</div>
-<div data-primitive="ParametricBufferGeometry">Поверхность, созданная путем предоставления функции, которая берет 2d точку из сетки и возвращает соответствующую 3d точку.</div>
-<div data-primitive="PlaneBufferGeometry">2D плоскость</div>
-<div data-primitive="PolyhedronBufferGeometry">Берет набор треугольников с центром вокруг точки и проецирует их на сферу</div>
-<div data-primitive="RingBufferGeometry">2D диск с отверстием в центре</div>
-<div data-primitive="ShapeBufferGeometry">2D контур, который строится из треугольников</div>
-<div data-primitive="SphereBufferGeometry">Сфера</div>
-<div data-primitive="TetrahedronBufferGeometry">Тераэдр (4 грани)</div>
-<div data-primitive="TextBufferGeometry">3D-текст, сгенерированный из 3D-шрифта и строки</div>
-<div data-primitive="TorusBufferGeometry">Тор (пончик)</div>
-<div data-primitive="TorusKnotBufferGeometry">Торический узел</div>
-<div data-primitive="TubeBufferGeometry">Труба - круг проходящий путь</div>
-<div data-primitive="EdgesGeometry">Вспомогательный объект, который принимает другую геометрию в качестве входных данных и генерирует ребра, только если угол между гранями больше некоторого порога. Например, если вы посмотрите на прямоугольник сверху, он показывает линию, проходящую через каждую грань, показывая каждый треугольник, из которого состоит прямоугольник. Используя EdgesGeometry, вместо этого удаляются средние линии.</div>
-<div data-primitive="WireframeGeometry">Создает геометрию, которая содержит один отрезок (2 точки) на ребро в заданной геометрии. Без этого вы часто теряете ребра или получаете дополнительные ребра, поскольку WebGL обычно требует 2 точки на отрезок. Например, если бы у вас был только один треугольник, было бы только 3 очка. Если вы попытаетесь нарисовать его, используя материал с <code>wireframe: true</code> вы получите только одну линию. А передача этой triangle geometry в <code>WireframeGeometry</code> создаст новую геометрию, которая имеет 3 отрезка линий, используя 6 точек..</div>
+<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">Икосаэдр (20 граней)</div>
+<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">Форма, созданная вращением линии. Например, лампы, кегли для боулинга, свечи, подсвечники, бокалы для вина, стаканы для питья и т. Д. Вы указываете 2-мерный силуэт в виде серии точек, а затем указываете three.js , сколько секций нужно сделать, когда он вращает силуэт вокруг оси.</div>
+<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">Октаэдр (8 граней)</div>
+<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">Поверхность, созданная путем предоставления функции, которая берет 2d точку из сетки и возвращает соответствующую 3d точку.</div>
+<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">2D плоскость</div>
+<div id="Diagram-PolyhedronBufferGeometry" data-primitive="PolyhedronBufferGeometry">Берет набор треугольников с центром вокруг точки и проецирует их на сферу</div>
+<div id="Diagram-RingBufferGeometry" data-primitive="RingBufferGeometry">2D диск с отверстием в центре</div>
+<div id="Diagram-ShapeBufferGeometry" data-primitive="ShapeBufferGeometry">2D контур, который строится из треугольников</div>
+<div id="Diagram-SphereBufferGeometry" data-primitive="SphereBufferGeometry">Сфера</div>
+<div id="Diagram-TetrahedronBufferGeometry" data-primitive="TetrahedronBufferGeometry">Тераэдр (4 грани)</div>
+<div id="Diagram-TextBufferGeometry" data-primitive="TextBufferGeometry">3D-текст, сгенерированный из 3D-шрифта и строки</div>
+<div id="Diagram-TorusBufferGeometry" data-primitive="TorusBufferGeometry">Тор (пончик)</div>
+<div id="Diagram-TorusKnotBufferGeometry" data-primitive="TorusKnotBufferGeometry">Торический узел</div>
+<div id="Diagram-TubeBufferGeometry" data-primitive="TubeBufferGeometry">Труба - круг проходящий путь</div>
+<div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">Вспомогательный объект, который принимает другую геометрию в качестве входных данных и генерирует ребра, только если угол между гранями больше некоторого порога. Например, если вы посмотрите на прямоугольник сверху, он показывает линию, проходящую через каждую грань, показывая каждый треугольник, из которого состоит прямоугольник. Используя EdgesGeometry, вместо этого удаляются средние линии.</div>
+<div id="Diagram-WireframeGeometry" data-primitive="WireframeGeometry">Создает геометрию, которая содержит один отрезок (2 точки) на ребро в заданной геометрии. Без этого вы часто теряете ребра или получаете дополнительные ребра, поскольку WebGL обычно требует 2 точки на отрезок. Например, если бы у вас был только один треугольник, было бы только 3 очка. Если вы попытаетесь нарисовать его, используя материал с <code>wireframe: true</code> вы получите только одну линию. А передача этой triangle geometry в <code>WireframeGeometry</code> создаст новую геометрию, которая имеет 3 отрезка линий, используя 6 точек..</div>
 
 Вы можете заметить, что большинство из них приходят парами `Geometry` 
 или `BufferGeometry`. Разница между этими двумя типами заключается 

threejs/lessons/threejs-primitives.md

@@ -24,30 +24,30 @@ primitives.
 Many of the primitives below have defaults for some or all of their
 parameters so you can use more or less depending on your needs.
 
-<div data-primitive="BoxBufferGeometry">A Box</div>
-<div data-primitive="CircleBufferGeometry">A flat circle</div>
-<div data-primitive="ConeBufferGeometry">A Cone</div>
-<div data-primitive="CylinderBufferGeometry">A Cylinder</div>
-<div data-primitive="DodecahedronBufferGeometry">A dodecahedron (12 sides)</div>
-<div data-primitive="ExtrudeBufferGeometry">An extruded 2d shape with optional bevelling.
+<div id="Diagram-BoxBufferGeometry" data-primitive="BoxBufferGeometry">A Box</div>
+<div id="Diagram-CircleBufferGeometry" data-primitive="CircleBufferGeometry">A flat circle</div>
+<div id="Diagram-ConeBufferGeometry" data-primitive="ConeBufferGeometry">A Cone</div>
+<div id="Diagram-CylinderBufferGeometry" data-primitive="CylinderBufferGeometry">A Cylinder</div>
+<div id="Diagram-DodecahedronBufferGeometry" data-primitive="DodecahedronBufferGeometry">A dodecahedron (12 sides)</div>
+<div id="Diagram-ExtrudeBufferGeometry" data-primitive="ExtrudeBufferGeometry">An extruded 2d shape with optional bevelling.
 Here we are extruding a heart shape. Note this is the basis
 for <code>TextBufferGeometry</code> and <code>TextGeometry</code> respectively.</div>
-<div data-primitive="IcosahedronBufferGeometry">An icosahedron (20 sides)</div>
-<div data-primitive="LatheBufferGeometry">A shape generated by spinning a line. Examples would be: lamps, bowling pins, candles, candle holders, wine glasses, drinking glasses, etc... You provide the 2d silhouette as series of points and then tell three.js how many subdivisions to make as it spins the silhouette around an axis.</div>
-<div data-primitive="OctahedronBufferGeometry">An Octahedron (8 sides)</div>
-<div data-primitive="ParametricBufferGeometry">A surface generated by providing a function that takes a 2D point from a grid and returns the corresponding 3d point.</div>
-<div data-primitive="PlaneBufferGeometry">A 2D plane</div>
-<div data-primitive="PolyhedronBufferGeometry">Takes a set of triangles centered around a point and projects them onto a sphere</div>
-<div data-primitive="RingBufferGeometry">A 2D disc with a hole in the center</div>
-<div data-primitive="ShapeBufferGeometry">A 2D outline that gets triangulated</div>
-<div data-primitive="SphereBufferGeometry">A sphere</div>
-<div data-primitive="TetrahedronBufferGeometry">A tetrahedron (4 sides)</div>
-<div data-primitive="TextBufferGeometry">3D text generated from a 3D font and a string</div>
-<div data-primitive="TorusBufferGeometry">A torus (donut)</div>
-<div data-primitive="TorusKnotBufferGeometry">A torus knot</div>
-<div data-primitive="TubeBufferGeometry">A circle traced down a path</div>
-<div data-primitive="EdgesGeometry">A helper object that takes another geometry as input and generates edges only if the angle between faces is greater than some threshold. For example if you look at the box at the top it shows a line going through each face showing every triangle that makes the box. Using an <code>EdgesGeometry</code> instead the middle lines are removed. Adjust the thresholdAngle below and you'll see the edges below that threshold disappear.</div>
-<div data-primitive="WireframeGeometry">Generates geometry that contains one line segment (2 points) per edge in the given geometry. Without this you'd often be missing edges or get extra edges since WebGL generally requires 2 points per line segment. For example if all you had was a single triangle there would only be 3 points. If you tried to draw it using a material with <code>wireframe: true</code> you would only get a single line. Passing that triangle geometry to a <code>WireframeGeometry</code> will generate a new geometry that has 3 lines segments using 6 points..</div>
+<div id="Diagram-IcosahedronBufferGeometry" data-primitive="IcosahedronBufferGeometry">An icosahedron (20 sides)</div>
+<div id="Diagram-LatheBufferGeometry" data-primitive="LatheBufferGeometry">A shape generated by spinning a line. Examples would be: lamps, bowling pins, candles, candle holders, wine glasses, drinking glasses, etc... You provide the 2d silhouette as series of points and then tell three.js how many subdivisions to make as it spins the silhouette around an axis.</div>
+<div id="Diagram-OctahedronBufferGeometry" data-primitive="OctahedronBufferGeometry">An Octahedron (8 sides)</div>
+<div id="Diagram-ParametricBufferGeometry" data-primitive="ParametricBufferGeometry">A surface generated by providing a function that takes a 2D point from a grid and returns the corresponding 3d point.</div>
+<div id="Diagram-PlaneBufferGeometry" data-primitive="PlaneBufferGeometry">A 2D plane</div>
+<div id="Diagram-PolyhedronBufferGeometry" data-primitive="PolyhedronBufferGeometry">Takes a set of triangles centered around a point and projects them onto a sphere</div>
+<div id="Diagram-RingBufferGeometry" data-primitive="RingBufferGeometry">A 2D disc with a hole in the center</div>
+<div id="Diagram-ShapeBufferGeometry" data-primitive="ShapeBufferGeometry">A 2D outline that gets triangulated</div>
+<div id="Diagram-SphereBufferGeometry" data-primitive="SphereBufferGeometry">A sphere</div>
+<div id="Diagram-TetrahedronBufferGeometry" data-primitive="TetrahedronBufferGeometry">A tetrahedron (4 sides)</div>
+<div id="Diagram-TextBufferGeometry" data-primitive="TextBufferGeometry">3D text generated from a 3D font and a string</div>
+<div id="Diagram-TorusBufferGeometry" data-primitive="TorusBufferGeometry">A torus (donut)</div>
+<div id="Diagram-TorusKnotBufferGeometry" data-primitive="TorusKnotBufferGeometry">A torus knot</div>
+<div id="Diagram-TubeBufferGeometry" data-primitive="TubeBufferGeometry">A circle traced down a path</div>
+<div id="Diagram-EdgesGeometry" data-primitive="EdgesGeometry">A helper object that takes another geometry as input and generates edges only if the angle between faces is greater than some threshold. For example if you look at the box at the top it shows a line going through each face showing every triangle that makes the box. Using an <code>EdgesGeometry</code> instead the middle lines are removed. Adjust the thresholdAngle below and you'll see the edges below that threshold disappear.</div>
+<div id="Diagram-WireframeGeometry" data-primitive="WireframeGeometry">Generates geometry that contains one line segment (2 points) per edge in the given geometry. Without this you'd often be missing edges or get extra edges since WebGL generally requires 2 points per line segment. For example if all you had was a single triangle there would only be 3 points. If you tried to draw it using a material with <code>wireframe: true</code> you would only get a single line. Passing that triangle geometry to a <code>WireframeGeometry</code> will generate a new geometry that has 3 lines segments using 6 points..</div>
 
 You might notice of most of them come in pairs of `Geometry`
 or `BufferGeometry`. The difference between the 2 types is effectively flexibility