วิธีที่เหมาะสมในการรับ Three.js ภายใน Webpack คืออะไรเพื่อให้ฉันสามารถใช้ OrbitControls ได้

ในการกำหนดค่า webpack ของฉัน:

resolve: {
      alias: {
        'three': path.resolve('node_modules', 'three/build/three.js'),
        'OrbitControls': path.resolve('node_modules', 'three/examples/js/controls/OrbitControls.js'),
        'OBJLoader': path.resolve('node_modules', 'three/examples/js/loaders/OBJLoader.js')
      }

ในโมดูลของฉัน:

import * as THREE from 'three' // if I do import THREE from 'three' it fails with three being undefined
import OrbitControls from 'OrbitControls'
import OBJLoader from 'OBJLoader'

หากฉันใช้ import * THREE from 'three' ทั้งหมดก็ดี และฉันจะได้รับสามรายการเพื่อกำหนดและดำเนินการบทช่วยสอนลูกบาศก์ให้เสร็จสิ้นโดยไม่ต้องยุ่งยาก ถ้าฉันเปลี่ยนเป็น import * as THREE from 'three' three.js โหลดแล้ว นั่นไม่ใช่ปัญหาใช่ไหม

ฉันจะทำให้ OrbitControls และ OBJLoader โหลดได้อย่างไร เมื่อฉันพยายามให้พวกเขาโหลด ฉันจะได้รับ Uncaught ReferenceError: THREE is not defined(…) ภายใน OrbitControls.js: THREE.OrbitControls = function ( object, domElement ) { THREE is undefinition

มีปัญหากับการบรรจุภัณฑ์ของโมดูลหรือไม่? ฉันติดตั้งสิ่งนี้จาก https://www.npmjs.com/package/three

แล้วให้อะไรล่ะ? มันเป็นปัญหาหรือไม่ที่ Three.js ได้รับการบรรจุในเวลา npm หรือเป็นการกำหนดค่าที่ไม่ถูกต้องใน webpack.config ของฉัน มีวิธีบอก webpack ว่า "มาทำแพ็กเกจไฟล์ root three.js แล้วทำแพ็กเกจไฟล์ OrbitControls.js" ไหม


webpack three.js
person Joe C    schedule 11.11.2016    source แหล่งที่มา

คำตอบ (1)


arrow_upward
2
arrow_downward

ฉันต้องติดตั้ง three-orbit-controls และ three-obj-loader ผ่าน npm

จากนั้นในโมดูลของฉัน มันเพียงต้องการให้พวกเขา:

var OBJLoader = require('three-obj-loader')(THREE)
var OrbitControls = require('three-orbit-controls')(THREE)

ทุกชุด!

person Joe C    schedule 11.11.2016