Путь к Three.js с использованием модуля узла - PullRequest
Новая
       13

Путь к Three.js с использованием модуля узла

7 голосов
/ 24 октября 2019

Я изучаю Three.js и настроил базовый проект, работающий на сервере node.js и импортирующий Three.js в качестве узла moudule.

На самом деле моя установка работает, но я немного запутался, если это хорошая установка?

То, о чем я думаю, это в основном длинный путь для моего node_module. На некоторых страницах Three.js импортируется только через: 

import * as THREE from 'three';

, но в моем случае я должен написать полный путь: 

import * as THREE from './node_modules/three/build/three.module.js';

Это правильная реализация?

Вот мой полный код:

index.html 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #cce0ff;
            color: #000;
        }

        a {
            color: #080;
        }
    </style>
</head>

<body>
    <script type="module" src="index.js"></script>
</body>

</html>

index.js 

**import * as THREE from './node_modules/three/build/three.module.js';**

const scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

var animate = function () {
    requestAnimationFrame(animate);

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
};

animate();

Нужно ли мне использовать веб-пакет для комплектации. Может ли это решить, что он не может найти путь к моим модулям узлов?

Ответы [ 3 ]

4 голосов
/ 01 ноября 2019

Вам не нужно приводить Webpack в уравнение, если у вас нет нескольких файлов JS, которые вы хотите объединить в один. Простое решение - просто указать на three.module.js сборку Three.js, где бы он ни хранился. В приведенном ниже примере я импортирую его из CDN, но он может быть и из вашей папки node_modules, если хотите. 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>three.js webgl</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body {
            background-color: #cce0ff;
            color: #000;
        }

        a {
            color: #080;
        }
    </style>
</head>

<body>
    <script type="module">
        import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.module.js';

        const scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        var geometry = new THREE.BoxGeometry(1, 1, 1);
        var material = new THREE.MeshBasicMaterial({ color: 0xff9900 });
        var cube = new THREE.Mesh(geometry, material);
        scene.add(cube);

        camera.position.z = 5;

        var animate = function () {
            requestAnimationFrame(animate);

            cube.rotation.x += 0.01;
            cube.rotation.y += 0.01;

            renderer.render(scene, camera);
        };

        animate();
    </script>
</body>

</html>

Имейте в виду, что использование <script type="module"> - это , которое не поддерживается в Edge и IE , поэтому, если вам требуется поддержка этих браузеров, вы можете захотетьиспользовать WebPack. Это очень широкая тема, поэтому вы можете следовать инструкциям в разделе документации Getting Started.

4 голосов
/ 28 октября 2019

Моя рекомендация, если вы новичок в работе с упаковщиками, будет использовать посылка . Вот стартовый проект , который может помочь вам. Вам нужен пакет, если вы не хотите использовать полный путь таким образом.

1 голос
/ 01 ноября 2019

Вы могли бы рассмотреть возможность импорта three.js из CDN, полагаясь на пакет UMD (Universal Module Definition), предоставляемый библиотекой. 

<script src="https://unpkg.com/three@0.110.0/build/three.js"></script>
<script src="./path/to/your/index.js"></script>

Это приведет к извлечению библиотеки и представлению THREE в вашем глобальномобъект. Именно так веб-интерфейс работал 10 лет назад, и он все еще должен работать в любом браузере. 

// index.js
const scene = new THREE.Scene();
...

Тем не менее, вам, вероятно, скоро понадобится пакет для поддержки будущих требований вашегопроект.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...