Comment importer TrackballControls depuis le module three.js en utilisant react ?

Question

J'utilise le boiler plate de react js (create-react-app) et j'ai importé three.js. J'essaie d'utiliser TrackballControls pour un projet particulier mais cela ne fonctionne pas. Il jette une erreur comme "Attempted import error : 'TrackballControls' is not exported from 'three' (imported as 'THREE')". . Je comprends maintenant qu'il se trouve dans le dossier des exemples et qu'il ne s'agit pas d'une exportation officielle si j'ai bien compris dans le forum. Quelqu'un peut-il m'aider ? Comment importer TrackballControls dans un composant react ? L'aide sera très appréciée !

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

Tous les fichiers JavaScript du répertoire d'exemples sont maintenant disponibles en tant que modules ES6 dans l'arborescence du site Web de la Commission européenne. three paquet npm. Il existe d'ailleurs un guide qui explique comment les importer dans votre application :

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

Pour votre cas particulier, cela ressemblerait à ceci :

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

Notez que les paquets tiers comme three-orbit-controls ne sont plus nécessaires. Lorsque vous utilisez les modules de la three il est garanti que vous travaillez avec les dernières versions (et celles qui sont prises en charge).

three.js R109

Answer 2

Je sais qu'il n'y a personne ici pour voir ça mais je poste ma solution si quelqu'un rencontre ce problème à l'avenir. Voici donc ce que j'ai trouvé -

Je n'ai pas mentionné dans ma question que j'utilisais un framework react SSR (server side render) appelé next.js. L'importation fonctionne parfaitement bien avec une application react pure. Mais dans les frameworks côté serveur, l'importation doit être effectuée à l'intérieur du useEffect (ou componentDidMount) avec le reste des éléments de threejs. Je l'ai donc importé dynamiquement comme ceci

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
}

puis, je l'ai utilisé dans mon useEffect comme ceci -

let TrackbackControls = await dynamicallyImportPackage()

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

Arigato Gosaimasu !