时间戳

首页 > 解决方案 > 如何使用导入语法加载三轨道控件？

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

问题描述

有没有人尝试过将 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'

有谁知道如何解决这个问题？

标签： javascriptreactjsthree.js

解决方案

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

推荐阅读