Fatal编程技术网
  • javascript/
  • Javascript 通过npm和browserify导入three.js时出错

Javascript 通过npm和browserify导入three.js时出错

javascript npm three.js

Javascript 通过npm和browserify导入three.js时出错,javascript,npm,three.js,browserify,require,Javascript,Npm,Three.js,Browserify,Require,我对npms非常陌生，我正试图将three.js导入到我的场景中，但它出现了此错误，尽管在我的html中的脚本标记中声明了type=“module” 我通过npm安装了它，下面是我的javascript： var $ = require('jquery'); var three = require('three'); import * as THREE from 'three'; import OrbitControls from 'three/examples/jsm/controls/

我对npms非常陌生，我正试图将three.js导入到我的场景中，但它出现了此错误，尽管在我的html中的脚本标记中声明了
type=“module”
我通过npm安装了它，下面是我的javascript：

var $ = require('jquery');

var three = require('three');

import * as THREE from 'three';
 import OrbitControls from 'three/examples/jsm/controls/OrbitControls';

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
    camera.position.z = 1;

    scene = new THREE.Scene();

    geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}
这是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="#"/>
    <title>Document</title>
    <script type = "module" src="/bundle.js"></script>
</head>
<body>

</body>
</html>
除了我想用的以外，它还能用

import { MapControls } from 'three/examples/jsm/controls/OrbitControls.js';
只有从orbitcontrols库中提取才能使用。没有ES6导入，而是使用
require（）
，有没有办法做到这一点？

首先为什么要使用require和browserfy？只使用进口商品。如果你想支持较旧的浏览器，那么就使用babel。“所以在官方文档中，它说要这样做”。。。。。。表示使用require或import，而不是bothHi，感谢您的评论@2pha。我之所以使用它，是因为它更容易组织我的文件，而且我尝试将three.js与tween和threex.doEvents.js结合使用，但它们在使用import时似乎都不能很好地工作。我已经尝试过官方文档，它可以正常工作，但是我想使用'three/examples/jsm/controls/OrbitControls.js'中的'import{MapControls}；'这只能通过从orbitcontrols库中提取来实现，我不知道如何通过require来实现。我尝试过使用just Imports and no require（），但错误仍然存在。Threex.doEvents非常古老，但它展示了如何使它与es6导入一起工作。您指的是什么“tween”？据我所见，Browserfy希望您使用require而不是import加载模块。因此，我认为您必须选择使用browserfy和require，或者使用imports，而不是两者都使用。您首先为什么要使用require和browserfy？只使用进口商品。如果你想支持较旧的浏览器，那么就使用babel。“所以在官方文档中，它说要这样做”。。。。。。表示使用require或import，而不是bothHi，感谢您的评论@2pha。我之所以使用它，是因为它更容易组织我的文件，而且我尝试将three.js与tween和threex.doEvents.js结合使用，但它们在使用import时似乎都不能很好地工作。我已经尝试过官方文档，它可以正常工作，但是我想使用'three/examples/jsm/controls/OrbitControls.js'中的'import{MapControls}；'这只能通过从orbitcontrols库中提取来实现，我不知道如何通过require来实现。我尝试过使用just Imports and no require（），但错误仍然存在。Threex.doEvents非常古老，但它展示了如何使它与es6导入一起工作。您指的是什么“tween”？据我所见，Browserfy希望您使用require而不是import加载模块。因此，我认为您必须选择使用browserfy和require，或者使用导入，而不是两者都使用。 
import { MapControls } from 'three/examples/jsm/controls/OrbitControls.js';