Question

有人尝试过将OrbitControls函数与ReactJS一起使用吗？这是我编写的示例代码：

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'

有人知道如何解决此问题吗？

Answer 1

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

您可以改用此模块-'三个轨道控制'（https://www.npmjs.com/package/three-orbit-controls）

并以如下方式导入它：

const OrbitControls = require('three-orbit-controls')(THREE);

轨道控件的用法与您现在使用的相同，但与此同时，三个实例被传递到了“轨道控件”模块。

Answer 2

您可以使用一个npm软件包：轨道控制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);

Answer 3

我必须和阿努拉格一起去。首先，我安装了three-orbit-controls，但Danlong建议安装，但是最终我遇到了在尝试启动WebClient时未定义要求的问题。

此后，我切换到orbit-controls-es6，一切正常。

Answer 4

还有一个选项可以直接从“三个”包中导入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);

这是现场演示https://codesandbox.io/s/mjp143zq9x

Answer 5

使用包裹捆扎机时，我只是这样做了

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"
  }
}

如何使用导入语法加载三轨道控件？

5 个答案: