如何使用导入语法加载三轨道控件? [英] How to load three-orbitcontrols with import syntax?

问题描述

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

Has anyone tried using the OrbitControls function with ReactJS? Here is the sample code I wrote:

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'

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

Does anyone know how to resolve this issue?

推荐答案

问题是，当您导入三个对象时，它不是全局范围的，这是三个轨道控件"模块所依赖的.

The problem is that when you import THREE, it is not globally scoped which is what the 'three-orbitcontrols' module relies on.

您可以改用此模块-'three-orbit-controls'( https://www.npmjs.com/package/three-orbit-controls )

You could use this module instead - 'three-orbit-controls' (https://www.npmjs.com/package/three-orbit-controls)

并以如下方式导入它:

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

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

Usage of orbital controls is the same as you have now but with this, an instance of THREE is being passed to the Orbit Controls module.

编辑-2020

虽然在首次提出问题时上述答案很有用，但@Marquizzo正确地指出了这种情况.

Although the above answer was useful when the question was first asked, @Marquizzo rightly pointed out this is no longer the case.

Orbit Controls现在与three.js打包在一起，当您应该使用 import 语句时，无需使用 require().

Orbit Controls is now packaged with three.js and there's no need to use require(), when you should use the import statement.

请立即参考此答案- https://stackoverflow.com/a/55929101/8837901

这篇关于如何使用导入语法加载三轨道控件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！