Currently, I am attempting to integrate ArcballControls.js controls into my Vue.js application. I've noticed that this particular class contains functions that utilize arrow syntax, whereas every other class in the controls does not. This seems to be the sole distinction I have identified among the various files. Here is the link to the ArcballControls.js file provided by Three.js:
https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/ArcballControls.js
Below is the entire jsm/controls directory from Three.js:
https://github.com/mrdoob/three.js/tree/dev/examples/jsm/controls
Upon attempting to utilize these controls within my application, I encountered the following error message:
error in ./node_modules/three/examples/jsm/controls/ArcballControls.js
Module parse failed: Unexpected token (238:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| //listeners
|
> onWindowResize = () => {
|
| const scale = ( this._gizmos.scale.x + this._gizmos.scale.y + this._gizmos.scale.z ) / 3;
@ ./node_modules/cache-loader/dist/cjs.js??ref--13-0!
./node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib!
./node_modules/cache-loader/dist/cjs.js??ref--1-0!
./node_modules/vue-loader/lib??vue-loader-options!
./src/components/Sidebar/ThreeDCanvas.vue?vue&type=script&lang=js
Here is a snippet from my package.json file:
"dependencies": {
"@babel/plugin-transform-arrow-functions": "^7.16.7",
"three": "^0.133.0",
"vue": "^2.6.11",
"vue-style-loader": "^4.1.2",
"vuetify": "^2.6.3",
"vuex": "^3.1.2"
},
"devDependencies": {
...
Within config/index.js, in the module property, this is how I have configured the babel loader. I am uncertain if this is the correct approach:
module: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
indentedSyntax: true, // optional
},
},
],
},
{
test: /\.js$/,
exclude: /node_modules(?!\/three)/,
use: [
{
loader: 'babel-loader',
options: {
presets: [['@babel/preset-env', { targets: 'defaults' }]],
},
},
],
},
],
},
Here is the component where I initialize the three-dimensional scene:
<script type="module">
import * as Three from 'three'
import ThreeScene from '@/components/Scene/ThreeScene.js'
import Renderer from '@/components/Scene/Renderer.js'
import Camera from '@/components/Scene/Camera.js'
import HLight from '@/components/Scene/HLight.js'
import DLight from '@/components/Scene/DLight.js'
//import is here
import { ArcballControls } from 'three/examples/jsm/controls/ArcballControls.js'
import ObjectLoader from '@/components/Scene/ObjectLoader.js'
import CubeLoader from '@/components/Scene/CubeLoader.js'
export default {
name: 'ThreeDCanvas',
data() {
return {}
},
methods: {
init() {
this.scene = new ThreeScene()
this.camera = new Camera()
this.renderer = new Renderer({ antialias: true })
this.objectLoader = new ObjectLoader()
this.controls = new ArcballControls(
this.camera,
this.renderer.domElement,
this.scene
)
I would greatly appreciate any assistance in identifying what may be incorrect in my approach. Thank you!