Javascript 如何使用导入语法加载三个OrbitControl？_Javascript_Reactjs_Three.js

Javascript 如何使用导入语法加载三个OrbitControl？

javascript reactjs three.js

Javascript 如何使用导入语法加载三个OrbitControl？,javascript,reactjs,three.js,Javascript,Reactjs,Three.js,有人试过在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

有人试过在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'

有人知道如何解决这个问题吗

问题是，当您导入三个时，“三个轨道控制”模块所依赖的不是全局范围

您可以使用此模块-“三轨道控制”（）

然后像这样导入它：

const-OrbitControls=require（'three-orbit-controls'）（三个）
轨道控制的使用方法与您现在使用的方法相同，但使用此方法时，将向轨道控制模块传递一个三的实例

编辑-2020
尽管上述答案在第一次被问到这个问题时是有用的，@Marquizzo正确地指出，情况已不再如此
Orbit Controls现在与three.js打包在一起，当您应该使用import
语句时，无需使用require（）

现在请参考此答案-
您可以使用npm软件包：轨道控制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';

我必须和阿努拉格一起做这件事。首先，我安装了danlong建议的三个orbit控件
，但在尝试启动WebClient时，我遇到了无法定义require的问题
之后，我切换到轨道控制-es6
，一切正常。
还有一个选项可以直接从“三个”软件包导入轨道控制，如下所示：
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);

domeElement
必须作为Three.js最新版本中的第二个参数传递。React ref可用于它
这是一个带有最新React和Three.js的现场演示，我在使用parcel bundler时就是这样做的：
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>

我想你还没讲到3d物体运动部分。但我不确定到底是什么问题。这可能与您正在使用的模块有关。这一行看起来不正确：import*为“react”中的三个除OrbitControl模块外，这三个模块的所有其他功能都工作正常。我正在尝试不同的方法。当我得到一个解决方案时，我会把它贴在这里，以防其他人需要帮助。如果你对答案不满意，请留下评论，以便我可以改进！正如@mikael lepistö也评论的那样，这是官方的方法：谢谢，这比添加另一个包要好得多，我必须做OrbitControls（camera，renderer.doElement）require（）。我相信你已经找到了一个更好、最新的解决方案，所以请随时与社区分享，而不是批评：）抱歉批评，我希望你不要把它当成个人问题。只是这个，我已经向几个人指出了这个问题。我想让新访问者知道，您下面的答案使用了推荐的import
语句，并且没有理由使用require（）
或three-orbit-controls，因为它本机包含在three.js中。并非所有，我很高兴有人仍在查看，并且可以向人们指出最新的信息。我对这个问题的回答也会与20年前完全不同。我将编辑我的答案，并将人们推至最新信息。谢谢：）
{
  "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"
  }
}