How can fix ERROR

/* eslint-disable import/no-anonymous-default-export */

import React from “react”;

import {

ArcRotateCamera,

Vector3,

HemisphericLight,

MeshBuilder,

} from “@babylonjs/core”;

import * as BABYLON from “babylonjs”;

import “babylonjs-loaders”;

import “@babylonjs/loaders/glTF”;

BABYLON.SceneLoader.ImportMesh(

"",

"./model1",

"gift_giving.gltf",

scene,

(meshes, particleSystems, skeletons, animationGroups) => {

  console.log('meshes',meshes);

});

This doesn’t look like a bug, it looks more like the file you’re requesting doesn’t exist. Check your network tab in the developer console and see what request is being made and what the response is.

that is my request: http://localhost:3001/model1/gift_giving.gltf
response is: You need to enable JavaScript to run this app.(i use create-react-app)

and that is my code :
/* eslint-disable import/no-anonymous-default-export */

import React from “react”;

import SceneComponent from “./SceneComponent”;

import “./App.css”;

import * as BABYLON from “@babylonjs/core”;

import “@babylonjs/loaders/glTF/2.0/glTFLoader”;

import { SceneLoader } from “@babylonjs/core/Loading/sceneLoader”;

let box;

const onSceneReady = (scene) => {

// This creates and positions a free camera (non-mesh)

var camera = new BABYLON.ArcRotateCamera(

"camera1",

0,

0,

10,

new BABYLON.Vector3(0, 5, -10),

scene

);

// This targets the camera to scene origin

camera.setTarget(new BABYLON.Vector3.Zero());

const canvas = scene.getEngine().getRenderingCanvas();

// This attaches the camera to the canvas

camera.attachControl(canvas, true);

// This creates a light, aiming 0,1,0 - to the sky (non-mesh)

var light = new BABYLON.HemisphericLight(

"light",

new BABYLON.Vector3(0, 1, 0),

scene

);

// Default intensity is 1. Let’s dim the light a small amount

light.intensity = 0.7;

// Our built-in ‘box’ shape.

box = new BABYLON.MeshBuilder.CreateBox(“box”, { size: 2 }, scene);

// Move the box upward 1/2 its height

box.position.y = 1;

// Our built-in ‘ground’ shape.

BABYLON.MeshBuilder.CreateGround(“ground”, { width: 6, height: 6 }, scene);

// let loader = new BABYLON.SceneLoader();

// );

// SceneLoader.ImportMesh(

// “”,

// “https://models.babylonjs.com/Marble/marble/”,

// “marble.gltf”,

// scene,

// function (m) {

// console.log(m);

// }

// );

SceneLoader.ImportMesh(

"",

"../model1/",

"gift_giving.gltf",

scene,

function (m) {

  console.log(m);

}

);

};

/**

  • Will run on every frame render. We are spinning the box on y-axis.

*/

const onRender = (scene) => {

if (box !== undefined) {

var deltaTimeInMillis = scene.getEngine().getDeltaTime();

const rpm = 10;

box.rotation.y += (rpm / 60) * Math.PI * 2 * (deltaTimeInMillis / 1000);

}

};

export default () => (

<SceneComponent

  antialias

  onSceneReady={onSceneReady}

  onRender={onRender}

  id="my-canvas"

/>

);

I’m not sure what you’re trying to show with this, are you still getting the same issue now your code has changed? If so, what is the response when you look at the network tab in the dev tools?

i want read file gltf with SceneLoader.ImportMesh(

"",

"../model1/",

"gift_giving.gltf",

scene,

function (m) {

  console.log(m);

}

);

but it error when i try code

SceneLoader.ImportMesh(

"",

"https://models.babylonjs.com/Marble/marble/",

"marble.gltf",

scene,

function (m) {

  console.log(m);

}

);

it work

Wow, you were being quite literal. Can’t say I’ve seen that one before.

I would guess it’s something to do with the server you’re running. A 304 response means it’s pulling from cache. Try doing a hard reload on the page and see if that works.

It also could be the server that is used for the create-react-app which is what I’m assuming you are using. Try running a simple HTTP server (maybe through python if you have that installed) and see if it works then.

1 Like