在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么?

问题描述

在我的 webpack 配置中:

解析:{别名:{'三': path.resolve('node_modules', 'three/build/three.js'),'OrbitControls': path.resolve('node_modules', 'three/examples/js/controls/OrbitControls.js'),'OBJLoader': path.resolve('node_modules', '三个/examples/js/loaders/OBJLoader.js')}

在我的模块中:

import * as THREE from 'three'//如果我确实从 'three' 导入了 THREE，它会失败，因为三个未定义从轨道控制"导入轨道控制从 'OBJLoader' 导入 OBJLoader

如果我使用 import * THREE from 'three' 一切都很好，我可以定义三个并轻松完成立方体教程.如果我更改为 import * as THREE from 'three' 加载了 Three.js - 所以这不是问题吗?

如何让 OrbitControls 和 OBJLoader 加载?当我尝试让它们加载时，我在 OrbitControls.js 中得到 Uncaught ReferenceError: THREE is not defined(...): THREE.OrbitControls = function ( object, domElement ) { 三个未定义.

那么模块的包装有问题吗?我从 https://www.npmjs.com/package/three

那是什么?Three.js 在 npm 上的打包方式是问题还是我的 webpack.config 中的配置错误?有没有办法告诉webpack先打包rootthree.js文件，然后打包OrbitControls.js文件"?

解决方案

我需要通过 npm 安装 three-orbit-controls 和 three-obj-loader.

然后在我的模块中，它只是要求它们:

var OBJLoader = require('three-obj-loader')(THREE)var OrbitControls = require('three-orbit-controls')(THREE)

一切就绪！

In my webpack config:

resolve: {
      alias: {
        'three': path.resolve('node_modules', 'three/build/three.js'),
        'OrbitControls': path.resolve('node_modules', 'three/examples/js/controls/OrbitControls.js'),
        'OBJLoader': path.resolve('node_modules', 'three/examples/js/loaders/OBJLoader.js')
      }

In my module:

import * as THREE from 'three' // if I do import THREE from 'three' it fails with three being undefined
import OrbitControls from 'OrbitControls'
import OBJLoader from 'OBJLoader'

If I use import * THREE from 'three' all is well and I can get THREE to be defined and complete the cube tutorial without hassle. If I change to import * as THREE from 'three' three.js is loaded - so that's not the problem?

How do I get the OrbitControls and the OBJLoader to load? When I try to get them to load, I get Uncaught ReferenceError: THREE is not defined(…) within OrbitControls.js: THREE.OrbitControls = function ( object, domElement ) { THREE is undefined.

So there's a problem with the packaging of the modules? I installed this from https://www.npmjs.com/package/three

So what gives? Is it a problem how Three.js is packaged on npm or is it a misconfiguration in my webpack.config? Is there a way to tell webpack "let's package the root three.js file, and then package the OrbitControls.js file"?

解决方案

I needed to install the three-orbit-controls and the three-obj-loader via npm.

Then in my module, it was simply requiring them:

var OBJLoader = require('three-obj-loader')(THREE)
var OrbitControls = require('three-orbit-controls')(THREE)

All set!

这篇关于在 Webpack 中使用 Three.js 以便我可以使用 OrbitControls 的正确方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！