Блог

Главная - Вопросы по программированию - Правильное использование «three.module.js «?

Правильное использование «three.module.js «?

#javascript #module #three.js

#javascript #модуль #three.js

Вопрос:

я пытаюсь научиться использовать модули. Я думал, что начну с самого простого, но уже тогда у меня возникла проблема, что он не хочет запускаться. Я должен упустить что-то важное, но я просто не вижу, что. Включая «three.module.js » или выполнение скрипта как «модуля» не работает. У кого-нибудь есть рабочий пример? Я получил этот пример из:

https://threejs.org/examples/webgl_geometry_cube

Почему это не работает, если я делаю это локально

 <script type="module">

    import * as THREE from "lib/three.module.js";
            
    var camera, scene, renderer;            
    var mesh;
            
    init();         
    animate();
            
    function init() {
        camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );                
        camera.position.z = 400;
        scene = new THREE.Scene();
        var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );                
        var material = new THREE.MeshBasicMaterial({color: 0x00ff00}); 
                
        mesh = new THREE.Mesh( geometry, material );                
        scene.add( mesh );
                
        renderer = new THREE.WebGLRenderer( { antialias: true } );       
        renderer.setPixelRatio( window.devicePixelRatio );              
        renderer.setSize( window.innerWidth, window.innerHeight );      
        document.body.appendChild( renderer.domElement );
                
        window.addEventListener( 'resize', onWindowResize, false );
    }
            
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;             
        camera.updateProjectionMatrix();
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
            
    function animate() {
        requestAnimationFrame( animate );
        mesh.rotation.x  = 0.005;               
        mesh.rotation.y  = 0.01;
        renderer.render( scene, camera );
    }
</script>

Комментарии:

1. Можете ли вы поделиться конкретными ошибками, которые вы видите в консоли JS при попытке использования этого кода? Ваш код выглядит нормально, и пример, на который вы ссылаетесь, является рабочим примером, поэтому может быть что-то не так с вашим полным HTML-файлом или с тем, как вы размещаете код локально.

2. Работает ли это, если вы используете import * as THREE from "https://threejs.org/build/three.module.js" ?

3. Я протестировал ваше предложение, после чего оно снова заработает. Так что это отличается от того, где я включаю «three.module.js «. В чем разница?

Ответ №1:

Хорошо, я интенсивно исследовал последние два дня. «экспорт / импорт» работает только через http, а не с локальными каталогами. Итак, вам нужно настроить свой собственный сервер. Альтернатива, которую я сейчас использую, — это пакет. Посылка не совместима с моим планшетом, но webpack работает очень хорошо. Для этого мне сначала пришлось установить терминал. Я выбрал termux. Затем я установил node.js (версия 12.18.3) через termux, а затем webpack. Сначала это казалось мне большим усилием, но после того, как вы сделали все это один раз, это больше не кажется таким уж плохим. Важный момент! Termux должен быть настроен в диспетчере приложений на Android, чтобы иметь доступ к SD-карте в устройстве. По умолчанию доступ запрещен, и в командной строке отображается «отказано в разрешении», если вы хотите получить доступ к внутренней памяти с помощью «cd / sdcard /».

Я создал проект обычным способом с помощью редактора, для этого вам не нужен терминал. затем termux требуется только для запуска webpack с «npx webpack» после перехода в каталог проекта в termux.

Мой первый пример:

 //path-structure

webpack-demo
|
|_page.html
|_webpack.config.js
|_src
   |_index.js
   |_bar.js
  
 //page.html
<!doctype html> 
<html> 
<head>  </head> 
<body> 
<div id="message"></div> 
<script src="dist/bundle.js"></script> 
</body> 
</html>

  
 //webpack.config.js
const path = require('path'); 
module.exports = { 
//mode: 'development',
mode: 'production',
entry: './src/index.js', 
output: { path: path.resolve(__dirname, 'dist'), 
filename: 'bundle.js' } 
};
  
 //index.js
import bar from './bar'; 
bar();
  
 //bar.js
export default function bar() { 
 
document.getElementById("message").innerHTML = "Hello World";
}

Источник программного обеспечения:

termux: установить из Google Play

node.js :https://nodejs.org/en/download/package-manager /

веб-пакет:https://webpack.js.org/guides/installation /

теперь я доволен, потому что теперь я могу писать правильно структурированный код javascript 😁