Three.js Connection error (Vue.js,React)

Questions
,
1

Hello.

Maybe someone came across.
threw the project in vue got errors then checked it in react - the same thing.
gltf loader problem

7777Безымянный
7777Безымянный914×261 49.3 KB 

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 (
    <div className="main">

    </div>
  );
}

export default App;
2

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:

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 (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.

function Model() {
  const { scene } = useGLTF(url)
  return <primitive object={scene} />
}

<Canvas>
  <Model />
</Canvas>
3

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.

 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.

4

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.

5

earned, thanks: -D