reactjs - 如何使用 react 从 three.js 模块导入 TrackballControls？

Question

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

Answer 1

示例目录中的所有 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