如何使用 react 从 three.js 模块导入 TrackballControls？答案

【问题标题】：How to import TrackballControls from three.js module using react?如何使用 react 从 three.js 模块导入 TrackballControls？
【发布时间】：2020-02-25 14:09:04
【问题描述】：

我正在使用 react js 样板（create-react-app）并导入了 three.js。我正在尝试将 TrackballControls 用于特定项目，但它不起作用。它会引发类似“尝试导入错误：'TrackballControls' is notexported from 'three' (imported as 'THREE')”之类的错误。现在我知道它在示例文件夹中，如果我从论坛中正确理解，它不是官方导出的。有人请帮我解决这个问题，如何在反应组件中导入 TrackballControls？非常感谢您的帮助！

import React, { useState, useEffect } from 'react'
import * as THREE from 'three'
const OrbitControls = require('three-orbit-controls')(THREE)



import "../src/assets/sass/home.scss"



const X = () => {

const [y, setY] = useState(0)
const [ masses, setMasses ] = useState([])

let parent, renderer, scene, camera, controls



useEffect(() => {

    // renderer
    renderer = new THREE.WebGLRenderer()
    renderer.setSize( window.innerWidth, window.innerHeight )
    document.body.appendChild( renderer.domElement )

    // scene
    scene = new THREE.Scene()

    // camera
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 )
    camera.position.set( 20, 20, 20 )

    // controls
    controls = new THREE.TrackballControls( camera, sphere )
    controls.minDistance = 5
    controls.maxDistance = 250
    controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    controls.dampingFactor = 0.05;

    // axes
    // scene.add(new THREE.AxisHelper( 20 ))

    // geometry
    let geometry = new THREE.SphereGeometry( 2, 8, 6, 0, 6.3, 0, 3.1)

    // material
    let material = new THREE.MeshBasicMaterial({
        wireframe: true,
        wireframeLinewidth: 1
    })

    let sphere = new THREE.Mesh( geometry, material )

    // parent
    parent = new THREE.Object3D()
    scene.add( parent )
    scene.add( sphere )

    function animate() {
        requestAnimationFrame( animate )
        parent.rotation.z += 0.01
        controls.update()
        renderer.render( scene, camera )
    }

    animate()


}

,[])




return <div></div>
}

export default X

【问题讨论】：

显示您的代码以便我们跟踪它，这将有助于解决您的问题
@blueseal，抱歉，我更新了查询中的代码，请参阅。
@blueseal 他们已经迁移了一些模块 - 我从这里看到了 - github.com/mrdoob/three.js/wiki/Migration-Guide

标签： reactjs ecmascript-6 import three.js

【解决方案1】：

examples 目录中的所有 JavaScript 文件现在都可以作为 three npm 包中的 ES6 模块使用。实际上有一个指南解释了如何在应用程序中导入它们：

https://threejs.org/docs/index.html#manual/en/introduction/Import-via-modules

对于您的特定情况，它看起来像这样：

import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';

请注意，不再需要像 three-orbit-controls 这样的第三方软件包。使用 three 包中的模块时，可以保证您使用的是最新（和受支持的）版本。

three.js R109

【讨论】：

感谢您的回复。我试过这样导入，但它抛出了这个错误 - link
请检查链接 - 我发布了一个图片链接@Mugen87
对不起，我对 webpack 不熟悉。由于使用 webpack 不是 three.js 相关的问题，我建议您尝试了解如何将 ES6 模块与 webpack 一起使用。请注意，您不能将 require 与 ES6 模块一起使用。您必须改用import。
我的错，我忘了提，我正在使用带有自定义快递服务器的 next.js 框架（服务器端反应）。我猜想将文件加载为js或其他东西有问题。我自己不知道 webpack。我想我必须学习它，并希望我能解决这个问题。 :(

【解决方案2】：

我知道这里没有人看到这个，但如果将来有人遇到这个问题，我会发布我的解决方案。所以这就是我想出来的-

我没有在我的问题中提到我使用的是名为 next.js 的 SSR（服务器端渲染）反应框架。导入与纯反应应用程序完美配合。但是在服务器端框架中，与导入相关的东西应该在 useEffect（或 componentDidMount）内完成，以及其余的 threejs 东西。所以我像这样动态导入它-

let dynamicallyImportPackage = async () => {
    let TrackballControls

    await import('three/examples/jsm/controls/TrackballControls')
    // you can now use the package in here
    .then(module => {
        TrackballControls = module.TrackballControls
    })
    .catch(e => console.log(e))

    return TrackballControls
}

然后，我像这样在我的 useEffect 中使用它 -

let TrackbackControls = await dynamicallyImportPackage()


    // controls
    controls = new TrackbackControls(camera, container)
    controls.minDistance = 5
    controls.maxDistance = 250

Arigato Gosaimasu！

【讨论】：