我在 React 中有一个可用的 3D 模型查看器，现在我正尝试将其移植到 Next。我需要 GLTFLoader 和 OrbitControls，它们在 React 中给我带来了问题，我像这样加载了它：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'

无法执行此操作，因为我会在 Next 中收到此错误：

SyntaxError: Cannot use import statement outside a module
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source

.next\server\pages\index.js (1:0) @ Object.three/examples/jsm/loaders/GLTFLoader

> 1 | module.exports = require("three/examples/jsm/loaders/GLTFLoader");

然后我尝试使用 three-std 库并从那里导入控件和加载器。同样的错误。然后我尝试使用 require('') 来导入它，但再次收到相同的错误。我在 Google 上发现了一些几乎类似的问题，但没有易于理解的解决方案。

import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
// import Model3d from '../assets/centered.gltf'
// import Model3d from '../assets/3dmodel.gltf'
import D3d from '../assets/images/3d.svg'

import React from 'react'

// let GLTFLoader
// let OrbitControls

const VisA = () => {
  // GLTFLoader = require('three/examples/jsm/loaders/GLTFLoader').GLTFLoader
  // OrbitControls = require('three/examples/js/controls/OrbitControls')
  //   .OrbitControls

  const { useRef, useEffect } = React
  const mount = useRef(null)
  const hitbox = useRef(null)
  const controls = useRef(null)

  useEffect(() => {
    let width = mount.current.clientWidth
    let height = mount.current.clientHeight
    let frameId

    const scene = new THREE.Scene()
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
    const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
    const loader = new GLTFLoader()
    const camcontrols = new OrbitControls(camera, hitbox.current)


    // loader.load(Model3d, function (gltf) {
    loader.load('./3dmodel/3dmodel.gltf', function (gltf) {
      gltf.scene.scale.set(14, 14, 14)
      var box = new THREE.Box3().setFromObject(gltf.scene)
      var center = new THREE.Vector3()
      box.getCenter(center)
      gltf.scene.position.sub(center)
      scene.add(gltf.scene)
    })

    const hemiLight = new THREE.HemisphereLight(0xffeeb1, 0x80820, 20)
    const light2 = new THREE.DirectionalLight(0xfdeee1, 20)
    const spotLight = new THREE.SpotLight(0xfdeee1, 4)
    const spotLight2 = new THREE.SpotLight(0xfdeee1, 4)
    scene.add(hemiLight)
    scene.add(spotLight)
    scene.add(spotLight2)
    light2.position.set(10, -50, 500)
    scene.add(light2)
    scene.rotation.y = -1.65
    camera.position.z = 4
    // scene.add(cube)
    // renderer.setClearColor('#FFFFFF')
    renderer.setSize(width, height)

    const renderScene = () => {
      renderer.render(scene, camera)
    }

    const handleResize = () => {
      width = mount.current.clientWidth
      height = mount.current.clientHeight
      renderer.setSize(width, height)
      camera.aspect = width / height
      camera.updateProjectionMatrix()
      renderScene()
    }

    const animate = () => {
      spotLight.position.set(
        camera.position.x + 10,
        camera.position.y + 10,
        camera.position.z + 10
      )
      spotLight2.position.set(
        camera.position.x - 10,
        camera.position.y - 10,
        camera.position.z - 10
      )

      renderScene()
      frameId = window.requestAnimationFrame(animate)
    }

    const start = () => {
      if (!frameId) {
        frameId = requestAnimationFrame(animate)
      }
    }

    const stop = () => {
      cancelAnimationFrame(frameId)
      frameId = null
    }

    mount.current.appendChild(renderer.domElement)
    window.addEventListener('resize', handleResize)
    start()

    controls.current = { start, stop }


    return () => {
      stop()
      window.removeEventListener('resize', handleResize)
      mount.current.removeChild(renderer.domElement)


    }
  }, [])

  return (
    <div
      className="relative flex items-center justify-center w-full h-full "
      ref={mount}
      // onClick={() => setAnimating(!isAnimating)}
    >
      <div className="absolute w-full h-full">
        <D3d className="w-10 h-10 mt-10 text-gray-800 fill-current " />
      </div>
      <div className="absolute w-3/5 h-4/5" ref={hitbox}></div>
    </div>
  )
}
export default VisA