正确使用“ three.module.js”吗？

如何解决正确使用“ three.module.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>

解决方法

好的，最近两天我进行了深入的研究。 “导出/导入”仅通过http起作用，不适用于本地目录。因此，您必须设置自己的服务器。我当前正在使用的替代方法是捆绑器。包裹与我的平板电脑不兼容，但webpack效果很好。为此，我首先必须安装一个终端。我选择了termux。然后我通过termux和webpack安装了node.js（v12.18.3）。刚开始时，这对我来说似乎是一项巨大的努力，但是当您完成全部一次之后，它看起来就不再那么糟糕了。很重要的一点！必须在android上的应用程序管理器中配置Termux才能访问设备中的sdcard。默认情况下，如果要使用“ cd / sdcard /”访问内部存储器，则禁止访问，并且命令行随后显示“ permission denied”（拒绝访问）。

我通常用编辑器创建项目，您不需要终端。然后，仅在转到termux中的项目目录之后，termux才需要使用“ npx webpack”运行webpack。

我的第一个例子：

//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/

webpack：https://webpack.js.org/guides/installation/

现在我很满意，因为现在我可以编写结构正确的javascript代码?

正确使用“ three.module.js”吗？

如何解决正确使用“ three.module.js”吗？

解决方法

相关推荐