Как импортировать TrackballControls из модуля three.js с помощью реакции?

Question

Я использую плиту реагирования js (create-реагировать-приложение) и импортировал three.js. Я пытаюсь использовать TrackballControls для конкретного проекта, но он не работает. Выдает ошибку типа «Попытка ошибки импорта:« TrackballControls »не экспортируется из« три »(импортируется как« ТРИ »)». Теперь я понимаю, что это находится в папке примеров, и это не официальный экспорт, если я правильно понял с форума. Кто-нибудь, пожалуйста, помогите мне с этим, как я могу импортировать 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 из каталога примеров теперь доступны в виде модулей ES6 в пакете three npm. На самом деле существует руководство, объясняющее, как вы можете импортировать их в свое приложение:

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

Answer 2

Я знаю, что здесь никого нет, чтобы увидеть это, но я публикую свое решение, если кто-то столкнется с этой проблемой в будущем. Итак, вот что я понял -

Я не упомянул в своем вопросе, что я использую интегрированную среду SSR (рендеринга на стороне сервера), называемую next.js. Импорт прекрасно работает с приложением чистого реагирования. Но в инфраструктуре на стороне сервера вещи, связанные с импортом, должны выполняться внутри 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
}

, затем я использовал его в моем использованииЭффект, например, -

let TrackbackControls = await dynamicallyImportPackage()


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

Аригато Госаймасу!