# Three.js Connection error (Vue.js,React)
**URL:** https://discourse.threejs.org/t/three-js-connection-error-vue-js-react/29855
**Category:** Questions
**Tags:** threejs, errors
**Created:** [September 12, 2021, 2:39pm UTC](https://discourse.threejs.org/t/three-js-connection-error-vue-js-react/29855 "2021-09-12T14:39:06Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@Lighty](https://discourse.threejs.org/u/Lighty)
#### Post date: [September 12, 2021, 2:39pm UTC](https://discourse.threejs.org/t/three-js-connection-error-vue-js-react/29855/1 "2021-09-12T14:39:06Z")
Hello.
Maybe someone came across.
threw the project in vue got errors then checked it in react - the same thing.
gltf loader problem
```javascript
import './App.css';
import React from "react";
import * as THREE from 'three/build/three.module.js';
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import {useEffect} from "react";
function App() {
useEffect(()=>{
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
let renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor('#ffffff');
renderer.autoClear = false;
let doc = document.querySelector('.main');
doc.appendChild(renderer.domElement);
window.addEventListener('resize', function () {
let width = window.innerWidth;
let height = window.innerHeight;
renderer.setSize(width,height);
camera.aspect = width / height;
camera.updateProjectionMatrix();
});
scene.background = new THREE.Color(0xdddddd);
let controls = new OrbitControls(camera,renderer.domElement);
let hlight = new THREE.AmbientLight (0x404040,100);
scene.add(hlight);
let loader = new GLTFLoader();
loader.load('scene.gltf', handle_load);
let mesh;
function handle_load(gltf){
mesh = gltf.scene;
mesh.material = new THREE.MeshLambertMaterial();
scene.add(mesh);
mesh.position.z = -10;
}
camera.position.z = 20;
const animate = function () {
requestAnimationFrame( animate );
renderer.render( scene, camera );
};
animate();
},[]);
return (
);
}
export default App;
```
---
### Author:  [@drcmda](https://discourse.threejs.org/u/drcmda)
#### Post date: [September 12, 2021, 3:53pm UTC](https://discourse.threejs.org/t/three-js-connection-error-vue-js-react/29855/2 "2021-09-12T15:53:05Z")
> [@Lighty](#):
>
> `scene.gltf`
this file has to exist in your `/public` folder, and since it’s gltf and not glb you have to instruct the loader as to the whereabouts of the textures and bin files, but it’s probably better if you compress it to a single glb.
just do this:
```bash
npx gltf-pipeline -i scene.gltf -o scene.glb --draco.compressionLevel=10
```
ps,
if this is react, you can use react-three-fiber, then you get the ability to do this: [GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components](https://github.com/pmndrs/gltfjsx) (lay out gltfs as declarative components whose contents you can alter). but even just loading and displaying a component without the scene graph is a matter of a few lines.
```jsx
function Model() {
const { scene } = useGLTF(url)
return
}
```
> **[Staging and CameraShake - CodeSandbox](https://codesandbox.io/s/staging-and-camerashake-0ycwe)**
>
> How to stage and shake models while using controls at the same time.
---
### Author:  [@Lighty](https://discourse.threejs.org/u/Lighty)
#### Post date: [September 12, 2021, 4:04pm UTC](https://discourse.threejs.org/t/three-js-connection-error-vue-js-react/29855/3 "2021-09-12T16:04:14Z")
Your example uses a fiber, I do not.
All models are also in glb and the draco loader is used.
But that’s not the problem.
```javascript
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( 'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/js/libs/draco/');
dracoLoader.setDecoderConfig({type: 'js'});
loader.setDRACOLoader( dracoLoader );
loader.load('./models/model3.glb', handle_load);
let CatMesh;
// ./models/model3.glb
let myMaterial = new THREE.MeshPhongMaterial({
color:"white",
specular: 0x000000,
shininess:0.9,
flatShading:false,
clipShadows: true,
side: THREE.DoubleSide
});
function handle_load(gltf){
CatMesh = gltf.scene;
CatMesh.castShadow = true;
CatMesh.receiveShadow = true;
CatMesh.position.z = 10;
CatMesh.position.y = -2.7;
CatMesh.position.x = -18;
CatMesh.rotation.y = 6.6;
CatMesh.scale.multiplyScalar(0.30);
CatMesh.castShadow = true;
CatMesh.receiveShadow = true;
CatMesh.traverse( function ( child ) {
if ( child.isMesh ) {
child.castShadow = true;
child.receiveShadow = true;
child.material = myMaterial;
}
} );
scene.add(CatMesh);
}
```
the problem hasn’t changed, the error is the same.
---
### Author:  [@drcmda](https://discourse.threejs.org/u/drcmda)
#### Post date: [September 12, 2021, 4:17pm UTC](https://discourse.threejs.org/t/three-js-connection-error-vue-js-react/29855/4 "2021-09-12T16:17:06Z")
your original code said `loader.load(‘scene.gltf’, handle_load)``
but either way, your current code is wrong as well. `'./models/model3.glb'` is not a valid path.
either put model3.glb into /public and do ‘/model.glb’
or import modelUrl from ‘./models/model3.glb’, and then do …
loader.load(modelUrl, handle\_load);
> Your example uses a fiber, I do not.
for react, you could use react-three-fiber + threejs, for vue, troisjs + threejs. there are no downsides, everything you do otherwise will cause problems because you’re mixing declarative systems with an imperative one which then has no integration and doesn’t adhere to view=fn(state). but that was just a suggestion ofc.
---
### Author:  [@Lighty](https://discourse.threejs.org/u/Lighty)
#### Post date: [September 12, 2021, 4:22pm UTC](https://discourse.threejs.org/t/three-js-connection-error-vue-js-react/29855/5 "2021-09-12T16:22:52Z")
> [@drcmda](#):
>
> import modelUrl from ‘./models/model3.glb’,
earned, thanks: -D