123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536 |
- <!DOCTYPE html><html lang="ru"><head>
- <meta charset="utf-8">
- <title>- Несколько холстов и Несколько сцен</title>
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
- <meta name="twitter:card" content="summary_large_image">
- <meta name="twitter:site" content="@threejs">
- <meta name="twitter:title" content="Three.js – - Несколько холстов и Несколько сцен">
- <meta property="og:image" content="https://threejs.org/files/share.png">
- <link rel="shortcut icon" href="../../files/favicon_white.ico" media="(prefers-color-scheme: dark)">
- <link rel="shortcut icon" href="../../files/favicon.ico" media="(prefers-color-scheme: light)">
- <link rel="stylesheet" href="../resources/lesson.css">
- <link rel="stylesheet" href="../resources/lang.css">
- <script type="importmap">
- {
- "imports": {
- "three": "../../build/three.module.js"
- }
- }
- </script>
- </head>
- <body>
- <div class="container">
- <div class="lesson-title">
- <h1>- Несколько холстов и Несколько сцен</h1>
- </div>
- <div class="lesson">
- <div class="lesson-main">
- <p>Допустим, вы хотите создать сайт электронной коммерции или сделать
- страницу с множеством трехмерных диаграмм. На первый взгляд все
- выглядит просто. Просто сделайте холст для каждой диаграммы.
- Для каждого холста сделайте <a href="/docs/#api/en/constants/Renderer"><code class="notranslate" translate="no">Renderer</code></a>.</p>
- <p>Вы быстро обнаружите, что у вас возникли проблемы.</p>
- <ol>
- <li><p>Браузер ограничивает количество контекстов WebGL, которые вы можете иметь.</p>
- <p>Обычно этот предел составляет около 8.
- Как только вы создадите 9-й контекст, самый старый будет потерян.</p>
- </li>
- <li><p>Ресурсы WebGL не могут быть разделены между контекстами (no shared memory)</p>
- <p>Это означает, что если вы хотите загрузить 10-мегабайтную модель в 2 полотна,
- и эта модель использует 20 мегабайт текстур, ваша 10-мегабайтная модель должна
- быть загружена дважды, а ваши текстуры также будут загружены дважды. Ничто не
- может быть разделено между контекстами. Это также означает, что вещи должны
- быть инициализированы дважды, шейдеры скомпилированы дважды и т.д. Всё
- ухудшается, когда появляется больше холстов.</p>
- </li>
- </ol>
- <p>Так в чем же решение?</p>
- <p>Решением является один холст, который заполняет область просмотра в фоновом режиме
- и некоторый другой элемент для представления каждого «виртуального» холста.
- Мы делаем один <a href="/docs/#api/en/constants/Renderer"><code class="notranslate" translate="no">Renderer</code></a> и затем одну <a href="/docs/#api/en/scenes/Scene"><code class="notranslate" translate="no">Scene</code></a> для каждого виртуального холста.
- Затем мы проверим положение элементов виртуального холста и, если они будут на
- экране, мы скажем THREE.js нарисовать их сцену в правильном месте.</p>
- <p>С этим решением есть только 1 холст, поэтому мы решаем обе задачи 1 и 2 выше.
- Мы не будем сталкиваться с ограничением контекста WebGL, потому что мы будем
- использовать только один контекст. Мы также не будем сталкиваться с проблемами
- обмена по тем же причинам.</p>
- <p>Давайте начнем с простого примера с двумя сценами. Сначала мы сделаем HTML</p>
- <pre class="prettyprint showlinemods notranslate lang-html" translate="no"><canvas id="c">шутки про three js</canvas>
- <p>
- <span id="box" class="diagram left"></span>
- Я люблю коробки (boxes). Подарки приходят в коробках.
- Когда я нахожу новую коробку, я всегда рад узнать, что внутри.
- </p>
- <p>
- <span id="pyramid" class="diagram right"></span>
- Когда я был ребенком, я мечтал отправиться в экспедицию внутри пирамиды (pyramid).
- и найти неоткрытую гробницу, полную мумий и сокровищ.
- </p>
- </pre>
- <p>Затем мы можем настроить CSS, как-то так</p>
- <pre class="prettyprint showlinemods notranslate lang-css" translate="no">#c {
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: block;
- z-index: -1;
- }
- .diagram {
- display: inline-block;
- width: 5em;
- height: 3em;
- border: 1px solid black;
- }
- .left {
- float: left;
- margin-right: .25em;
- }
- .right {
- float: right;
- margin-left: .25em;
- }
- </pre>
- <p>Мы устанавливаем холст, чтобы заполнить экран, и мы устанавливаем <code class="notranslate" translate="no">z-index</code> =
- -1 , чтобы он появлялся позади других элементов. Нам также нужно указать некоторую
- ширину и высоту для наших виртуальных элементов холста, поскольку внутри
- нет ничего, что могло бы придать им какой-либо размер.</p>
- <p>Теперь мы сделаем 2 сцены с подсветкой и камерой.
- К одной сцене мы добавим куб, а к другой ромб.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function makeScene(elem) {
- const scene = new THREE.Scene();
- const fov = 45;
- const aspect = 2; // по умолчанию для холста
- const near = 0.1;
- const far = 5;
- const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
- camera.position.z = 2;
- camera.position.set(0, 1, 2);
- camera.lookAt(0, 0, 0);
- {
- const color = 0xFFFFFF;
- const intensity = 1;
- const light = new THREE.DirectionalLight(color, intensity);
- light.position.set(-1, 2, 4);
- scene.add(light);
- }
- return {scene, camera, elem};
- }
- function setupScene1() {
- const sceneInfo = makeScene(document.querySelector('#box'));
- const geometry = new THREE.BoxGeometry(1, 1, 1);
- const material = new THREE.MeshPhongMaterial({color: 'red'});
- const mesh = new THREE.Mesh(geometry, material);
- sceneInfo.scene.add(mesh);
- sceneInfo.mesh = mesh;
- return sceneInfo;
- }
- function setupScene2() {
- const sceneInfo = makeScene(document.querySelector('#pyramid'));
- const radius = .8;
- const widthSegments = 4;
- const heightSegments = 2;
- const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
- const material = new THREE.MeshPhongMaterial({
- color: 'blue',
- flatShading: true,
- });
- const mesh = new THREE.Mesh(geometry, material);
- sceneInfo.scene.add(mesh);
- sceneInfo.mesh = mesh;
- return sceneInfo;
- }
- const sceneInfo1 = setupScene1();
- const sceneInfo2 = setupScene2();
- </pre>
- <p>И тогда мы сделаем функцию для рендеринга каждой сцены, только если элемент
- находится на экране. Мы можем указать THREE.js визуализировать только часть
- холста, включив тест <em>scissor</em> через <a href="/docs/#api/en/constants/Renderer.setScissorTest"><code class="notranslate" translate="no">Renderer.setScissorTest</code></a>, затем установим
- плоскость обрезания и область просмотра (Viewport) с помощью
- <a href="/docs/#api/en/constants/Renderer.setViewport"><code class="notranslate" translate="no">Renderer.setViewport</code></a> и <a href="/docs/#api/en/constants/Renderer.setScissor"><code class="notranslate" translate="no">Renderer.setScissor</code></a>.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function renderSceneInfo(sceneInfo) {
- const {scene, camera, elem} = sceneInfo;
- // получаем относительную позицию окна просмотра этого элемента
- const {left, right, top, bottom, width, height} =
- elem.getBoundingClientRect();
- const isOffscreen =
- bottom < 0 ||
- top > renderer.domElement.clientHeight ||
- right < 0 ||
- left > renderer.domElement.clientWidth;
- if (isOffscreen) {
- return;
- }
- camera.aspect = width / height;
- camera.updateProjectionMatrix();
- const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
- renderer.setScissor(left, positiveYUpBottom, width, height);
- renderer.setViewport(left, positiveYUpBottom, width, height);
- renderer.render(scene, camera);
- }
- </pre>
- <p>И тогда наша функция рендеринга просто сначала очистит экран,
- а затем отрисует каждую сцену.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
- time *= 0.001;
- resizeRendererToDisplaySize(renderer);
- renderer.setScissorTest(false);
- renderer.clear(true, true);
- renderer.setScissorTest(true);
- sceneInfo1.mesh.rotation.y = time * .1;
- sceneInfo2.mesh.rotation.y = time * .1;
- renderSceneInfo(sceneInfo1);
- renderSceneInfo(sceneInfo2);
- requestAnimationFrame(render);
- }
- </pre>
- <p>И вот оно</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/multiple-scenes-v1.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/multiple-scenes-v1.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <p>Вы можете увидеть, где на первом месте <code class="notranslate" translate="no"><span></code> находится красный куб,
- а на втором <code class="notranslate" translate="no">span</code> - синий ромб.</p>
- <h2 id="-">Синхронизация</h2>
- <p>Код выше работает, но есть одна небольшая проблема.
- Если ваши сцены сложные или по какой-либо причине требуется
- слишком много времени для рендеринга, положение сцен,
- нарисованных на холсте, будет отставать от остальной части страницы.</p>
- <p>Если мы дадим каждой области границу</p>
- <pre class="prettyprint showlinemods notranslate lang-css" translate="no">.diagram {
- display: inline-block;
- width: 5em;
- height: 3em;
- + border: 1px solid black;
- }
- </pre>
- <p>И устанавливаем фон каждой сцены</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const scene = new THREE.Scene();
- +scene.background = new THREE.Color('red');
- </pre>
- <p>И если мы <a href="../examples/multiple-scenes-v2.html" target="_blank">быстро прокрутим вверх и вниз</a>
- мы увидим проблему. Вот анимация прокрутки, замедленная в 10 раз.</p>
- <div class="threejs_center"><img class="border" src="../resources/images/multi-view-skew.gif"></div>
- <p>Мы можем использовать другой метод, который имеет другой компромисс.
- Мы переключим CSS холста с <code class="notranslate" translate="no">position: fixed</code> на <code class="notranslate" translate="no">position: absolute</code>. </p>
- <pre class="prettyprint showlinemods notranslate lang-css" translate="no">#c {
- - position: fixed;
- + position: absolute;
- </pre>
- <p>Затем мы установим преобразование (transform) холста, чтобы переместить его так,
- чтобы верх холста находился в верхней части любой части,
- на которую в данный момент прокручивается страница.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">function render(time) {
- ...
- const transform = `translateY(${window.scrollY}px)`;
- renderer.domElement.style.transform = transform;
- </pre>
- <p><code class="notranslate" translate="no">position: fixed</code> удерживает холст от прокрутки вообще,
- в то время как остальная часть страницы прокручивалась поверх него.
- <code class="notranslate" translate="no">position: absolute</code> позволит холсту прокручиваться с остальной частью
- страницы, что означает, что все, что мы рисуем, будет прилипать
- к странице, когда она прокручивается, даже если мы слишком медленны
- для рендеринга. Когда мы наконец получаем возможность
- рендеринга, мы перемещаем холст так, чтобы он соответствовал
- месту прокрутки страницы, и затем мы повторно визуализируем.
- Это означает, что только на краях окна будут отображаться некоторые не визуализированные биты, но
- <a href="../examples/multiple-scenes-v2.html" target="_blank"> материал в середине страницы должен совпадать</a>,
- а не скользить. Вот представление результатов нового метода, замедленного в 10 раз.</p>
- <div class="threejs_center"><img class="border" src="../resources/images/multi-view-fixed.gif"></div>
- <h2 id="-">Делаем это более универсальным</h2>
- <p>Теперь, когда у нас работает несколько сцен, давайте сделаем это немного более обобщенным.</p>
- <p>Мы могли бы сделать так, чтобы основная функция рендеринга, управляющая холстом, просто имела
- список элементов и связанную с ними функцию рендеринга. Для каждого элемента он проверяет,
- находится ли элемент на экране, и, если это так, вызывает соответствующую функцию рендеринга.
- Таким образом, у нас была бы общая система, в которой отдельные сцены на самом деле не знают,
- что знают, что их визуализируют в каком-то меньшем пространстве.</p>
- <p>Вот основная функция отрисовки</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const sceneElements = [];
- function addScene(elem, fn) {
- sceneElements.push({elem, fn});
- }
- function render(time) {
- time *= 0.001;
- resizeRendererToDisplaySize(renderer);
- renderer.setScissorTest(false);
- renderer.setClearColor(clearColor, 0);
- renderer.clear(true, true);
- renderer.setScissorTest(true);
- const transform = `translateY(${window.scrollY}px)`;
- renderer.domElement.style.transform = transform;
- for (const {elem, fn} of sceneElements) {
- // получаем относительную позицию окна просмотра этого элемента
- const rect = elem.getBoundingClientRect();
- const {left, right, top, bottom, width, height} = rect;
- const isOffscreen =
- bottom < 0 ||
- top > renderer.domElement.clientHeight ||
- right < 0 ||
- left > renderer.domElement.clientWidth;
- if (!isOffscreen) {
- const positiveYUpBottom = renderer.domElement.clientHeight - bottom;
- renderer.setScissor(left, positiveYUpBottom, width, height);
- renderer.setViewport(left, positiveYUpBottom, width, height);
- fn(time, rect);
- }
- }
- requestAnimationFrame(render);
- }
- </pre>
- <p>Вы можете видеть, что он зацикливается на массиве объектов <code class="notranslate" translate="no">sceneElements</code>,
- каждый из которых имеет свойство <code class="notranslate" translate="no">elem</code> и <code class="notranslate" translate="no">fn</code>.</p>
- <p>Он проверяет, находится ли элемент на экране. Если это так, то он вызывает <code class="notranslate" translate="no">fn</code>
- и передает ему текущее время и его прямоугольник.</p>
- <p>Теперь установочный код для каждой сцены просто добавляет себя в список сцен</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
- const elem = document.querySelector('#box');
- const {scene, camera} = makeScene();
- const geometry = new THREE.BoxGeometry(1, 1, 1);
- const material = new THREE.MeshPhongMaterial({color: 'red'});
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- addScene(elem, (time, rect) => {
- camera.aspect = rect.width / rect.height;
- camera.updateProjectionMatrix();
- mesh.rotation.y = time * .1;
- renderer.render(scene, camera);
- });
- }
- {
- const elem = document.querySelector('#pyramid');
- const {scene, camera} = makeScene();
- const radius = .8;
- const widthSegments = 4;
- const heightSegments = 2;
- const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
- const material = new THREE.MeshPhongMaterial({
- color: 'blue',
- flatShading: true,
- });
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- addScene(elem, (time, rect) => {
- camera.aspect = rect.width / rect.height;
- camera.updateProjectionMatrix();
- mesh.rotation.y = time * .1;
- renderer.render(scene, camera);
- });
- }
- </pre>
- <p>При этом нам больше не нужно <code class="notranslate" translate="no">sceneInfo1</code> и <code class="notranslate" translate="no">sceneInfo2</code>.
- Код, который вращал меши, теперь специфичен для каждой сцены.</p>
- <p></p><div translate="no" class="threejs_example_container notranslate">
- <div><iframe class="threejs_example notranslate" translate="no" style=" " src="/manual/examples/resources/editor.html?url=/manual/examples/multiple-scenes-generic.html"></iframe></div>
- <a class="threejs_center" href="/manual/examples/multiple-scenes-generic.html" target="_blank">нажмите здесь, чтобы открыть в отдельном окне</a>
- </div>
- <p></p>
- <h2 id="-html">Использование набора данных в HTML</h2>
- <p>Еще одна, еще более общая вещь, которую мы можем сделать, это использовать
- <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset">dataset</a>.
- Это способ добавить свои собственные данные в элемент HTML. Вместо использования <code class="notranslate" translate="no">id="..."</code>
- мы будем использовать <code class="notranslate" translate="no">data-diagram="..."</code> как тут</p>
- <pre class="prettyprint showlinemods notranslate lang-html" translate="no"><canvas id="c"></canvas>
- <p>
- - <span id="box" class="diagram left"></span>
- + <span data-diagram="box" class="left"></span>
- Я люблю коробки (boxes). Подарки приходят в коробках.
- Когда я нахожу новую коробку, я всегда рад узнать, что внутри.
- </p>
- <p>
- - <span id="pyramid" class="diagram left"></span>
- + <span data-diagram="pyramid" class="right"></span>
- Когда я был ребенком, я мечтал отправиться в экспедицию внутри пирамиды (pyramid).
- и найти неоткрытую гробницу, полную мумий и сокровищ.
- </p>
- </pre>
- <p>Мы можем их изменить селектор CSS, чтобы выбрать для этого</p>
- <pre class="prettyprint showlinemods notranslate lang-css" translate="no">-.diagram
- +*[data-diagram] {
- display: inline-block;
- width: 5em;
- height: 3em;
- }
- </pre>
- <p>Мы изменим код установки сцены, чтобы он представлял собой карту имен для <em>функций инициализации сцены</em>
- , которые возвращают функцию <em>отрисовки сцены</em>.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const sceneInitFunctionsByName = {
- 'box': () => {
- const {scene, camera} = makeScene();
- const geometry = new THREE.BoxGeometry(1, 1, 1);
- const material = new THREE.MeshPhongMaterial({color: 'red'});
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- return (time, rect) => {
- mesh.rotation.y = time * .1;
- camera.aspect = rect.width / rect.height; camera.updateProjectionMatrix();
- renderer.render(scene, camera);
- };
- },
- 'pyramid': () => {
- const {scene, camera} = makeScene();
- const radius = .8;
- const widthSegments = 4;
- const heightSegments = 2;
- const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
- const material = new THREE.MeshPhongMaterial({
- color: 'blue',
- flatShading: true,
- });
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- return (time, rect) => {
- mesh.rotation.y = time * .1;
- camera.aspect = rect.width / rect.height;
- camera.updateProjectionMatrix();
- renderer.render(scene, camera);
- };
- },
- };
- </pre>
- <p>И для инициализации мы можем просто использовать <code class="notranslate" translate="no">querySelectorAll</code>,
- чтобы найти все диаграммы и вызвать соответствующую функцию инициализации для этой диаграммы.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">document.querySelectorAll('[data-diagram]').forEach((elem) => {
- const sceneName = elem.dataset.diagram;
- const sceneInitFunction = sceneInitFunctionsByName[sceneName];
- const sceneRenderFunction = sceneInitFunction(elem);
- addScene(elem, sceneRenderFunction());
- });
- </pre>
- <p>Никаких изменений в визуальных элементах, но код легче переиспользовать.</p>
- <p></p>
- <h2 id="-">Добавление элементов управления к каждому элементу</h2>
- <p>Например, добавление <code class="notranslate" translate="no">TrackballControls</code> в интерактивном режиме так же просто.
- Сначала мы добавляем скрипт для контролов.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">import {TrackballControls} from 'three/addons/controls/TrackballControls.js';
- </pre>
- <p>И затем мы можем добавить <code class="notranslate" translate="no">TrackballControls</code> к каждой сцене, передавая элемент, связанный с этой сценой.</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">-function makeScene() {
- +function makeScene(elem) {
- const scene = new THREE.Scene();
- const fov = 45;
- const aspect = 2; // по умолчанию для canvas
- const near = 0.1;
- const far = 5;
- const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
- camera.position.set(0, 1, 2);
- camera.lookAt(0, 0, 0);
- + scene.add(camera);
- + const controls = new TrackballControls(camera, elem);
- + controls.noZoom = true;
- + controls.noPan = true;
- {
- const color = 0xFFFFFF;
- const intensity = 1;
- const light = new THREE.DirectionalLight(color, intensity);
- light.position.set(-1, 2, 4);
- - scene.add(light);
- + camera.add(light);
- }
- - return {scene, camera};
- + return {scene, camera, controls};
- }
- </pre>
- <p>Вы заметите, что мы добавили камеру на сцену и свет на камеру. Это делает свет
- относительно камеры. Поскольку <code class="notranslate" translate="no">TrackballControls</code> двигает камеру,
- это, вероятно, то, что мы хотим. Он сохраняет свет,
- сияющий на стороне объекта, на который мы смотрим.</p>
- <p>Нам нужно обновить эти элементы управления в наших функциях отрисовки</p>
- <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const sceneInitFunctionsByName = {
- - 'box': () => {
- - const {scene, camera} = makeScene();
- + 'box': (elem) => {
- + const {scene, camera, controls} = makeScene(elem);
- const geometry = new THREE.BoxGeometry(1, 1, 1);
- const material = new THREE.MeshPhongMaterial({color: 'red'});
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- return (time, rect) => {
- mesh.rotation.y = time * .1;
- camera.aspect = rect.width / rect.height;
- camera.updateProjectionMatrix();
- + controls.handleResize();
- + controls.update();
- renderer.render(scene, camera);
- };
- },
- - 'pyramid': () => {
- - const {scene, camera} = makeScene();
- + 'pyramid': (elem) => {
- + const {scene, camera, controls} = makeScene(elem);
- const radius = .8;
- const widthSegments = 4;
- const heightSegments = 2;
- const geometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
- const material = new THREE.MeshPhongMaterial({
- color: 'blue',
- flatShading: true,
- });
- const mesh = new THREE.Mesh(geometry, material);
- scene.add(mesh);
- return (time, rect) => {
- mesh.rotation.y = time * .1;
- camera.aspect = rect.width / rect.height;
- camera.updateProjectionMatrix();
- + controls.handleResize();
- + controls.update();
- renderer.render(scene, camera);
- };
- },
- };
- </pre>
- <p>Теперь, если вы перетащите объекты, они будут вращаться.</p>
- <p></p>
- <p>Эти методы используются на самом сайте. В частности,
- <a href="primitives.html">статья о примитивах</a> и <a href="materials.html">о материалах</a>
- используют эту технику для добавления различных примеров по всей статье.</p>
- </div>
- </div>
- </div>
- <script src="../resources/prettify.js"></script>
- <script src="../resources/lesson.js"></script>
- </body></html>
|