如何使用导入语法加载三轨道控件？
Posted
技术标签:
【中文标题】如何使用导入语法加载三轨道控件？【英文标题】：How to load three-orbitcontrols with import syntax? 【发布时间】：2019-02-20 08:16:31 【问题描述】：有没有人尝试在 ReactJS 中使用 OrbitControls 函数？ 这是我写的示例代码：
import React, Component from 'react';
import 'tachyons';
import * as THREE from 'react';
import OrbitControls from 'three-orbitcontrols';
class App extends Component
render()
...
//Controls
const controls = new OrbitControls(camera, renderer.domElement)
controls.dampingFactor = 0.25
controls.enableZoom = false
它返回以下错误：
./node_modules/three-orbitcontrols/OrbitControls.js
1054:70-89 "export 'OrbitControls' (imported as 'THREE') was not found in 'three'
有谁知道如何解决这个问题？
【问题讨论】：
我认为您没有了解 3d 对象运动部分。但我不确定这里到底是什么问题。它可能与您正在使用的模块有关。 这条线看起来不正确：import * as THREE from 'react';
三个模块中的所有其他功能都可以正常工作，除了 OrbitControls 之一。我正在尝试不同的方法。当我得到解决方案时，我会在这里发布，以防其他人需要帮助。
【参考方案1】：
还有一个选项可以直接从“三个”包中导入 OrbitControls，如下所示：
import React, Component from "react";
import ReactDOM from "react-dom";
import * as THREE from 'three';
import OrbitControls from "three/examples/jsm/controls/OrbitControls";
并在应用程序中毫无问题地使用它：
this.controls = new OrbitControls(camera, domElement);
domElement 在 Three.js 的最新版本中必须作为第二个参数传递。可以使用 React ref。
这是一个带有最新 React 和 Three.js 的现场演示 https://codesandbox.io/s/github/supromikali/react-three-demo
【讨论】：
如果您对答案不满意，请发表评论，以便我改进 谢谢！正如@mikael-lepistö 也一样，这是官方方法：threejs.org/docs/#manual/en/introduction/Import-via-modules 谢谢，这比添加另一个包要好 我不得不这样做OrbitControls(camera, renderer.domElement);不知道为什么
正是我想要的......谢谢！【参考方案2】：
问题在于，当您导入 THREE 时，它不是全局范围的，而这正是“三轨道控制”模块所依赖的。
您可以改用这个模块 - '三轨道控制' (https://www.npmjs.com/package/three-orbit-controls)
并像这样导入它：
const OrbitControls = require('three-orbit-controls')(THREE);
轨道控制的使用与您现在使用的相同，但有了这个，THREE 的一个实例被传递到轨道控制模块。
编辑 - 2020 年
虽然在第一次提出问题时上述答案很有用，但@Marquizzo 正确地指出现在情况不再如此。
Orbit Controls 现在与 three.js 一起打包，无需使用 require()，而应使用 import 语句。
请立即参考这个答案 - https://***.com/a/55929101/8837901
【讨论】：
尽管这是公认的答案，但它已经过时了。建议的库已经 4 年没有维护了，现在require() 不再有用，因为 javascript 允许模块 imports。
是的，答案是 2 岁，就像科技领域的大多数事情一样，没有经受住时间的考验。我相信你已经找到了更好和最新的解决方案，所以请随时与社区分享，而不是批评:)
很抱歉批评，希望大家不要当真。只是这个gets asked all the time，我已经向几个人指出了这个问题。我想让新访问者知道，您下面的答案使用推荐的import 语句，没有理由使用require() 或three-orbit-controls，因为它本身就包含在 Three.js 中。
不是全部，我很高兴仍有人在寻找并可以将人们指向最新的信息。我也会以与两年前完全不同的方式回答这个问题。我将编辑我的答案并将人们推送到最新信息。谢谢:)【参考方案3】：
我在使用包裹捆绑器时就是这样做的：
app.js：
import * as THREE from "three";
import OrbitControls from "three/examples/jsm/controls/OrbitControls";
// the rest of the example from threejs web page
// https://github.com/mrdoob/three.js/blob/master/examples/misc_controls_orbit.html
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Parcel threejs example</title>
<style>
body
margin: 0;
</style>
</head>
<body>
<script src="app.js"></script>
</body>
</html>
package.json:
"name": "test-threejs-with-parcel",
"version": "0.1.0",
"description": "Threejs with parcel test",
"main": "app.js",
"scripts":
"start": "parcel index.html",
"test": "echo \"Error: no test specified\" && exit 1"
,
"author": "",
"license": "ISC",
"devDependencies":
"parcel-bundler": "^1.10.0"
,
"dependencies":
"three": "^0.109.0"
【讨论】：
【参考方案4】：您可以使用一个 npm 包：Orbit Controls ES6
链接：https://www.npmjs.com/package/orbit-controls-es6
安装：
npm i orbit-controls-es6 --save
用法：
import OrbitControls from 'orbit-controls-es6';
const controls = new OrbitControls(camera, renderer.domElement);
2020 年更新：
three.js 现在默认将OrbitControls 导出为模块，正如其他人指出的那样，它可以按如下方式使用：
import * as THREE from 'three';
import OrbitControls from 'three/examples/jsm/controls/OrbitControls';
【讨论】：
【参考方案5】：我必须和阿努拉格一起去。首先我安装了 danlong 建议的three-orbit-controls，但我最终遇到了在尝试启动 WebClient 时未定义要求的问题。
之后我切换到orbit-controls-es6，一切正常。
【讨论】：
以上是关于如何使用导入语法加载三轨道控件？的主要内容，如果未能解决你的问题，请参考以下文章
Swift REPL：如何导入、加载、评估或需要 .swift 文件？
如何将加载 .sql 或 .csv 文件导入 SQLite？
使用vue学习three.js之移动相机-使用轨道控件OrbitControls控制相机