Я загрузил файл 3D-модели в Cloudinary и хочу получить его, но когда я это делаю, он говорит: «Невозможно прочитать свой

Я загрузил файл 3D-модели в Cloudinary и хочу получить его, но когда я это делаю, он говорит: «Невозможно прочитать свой ⇐ Javascript

1 сообщение • Страница 1 из 1

Anonymous

Я загрузил файл 3D-модели в Cloudinary и хочу получить его, но когда я это делаю, он говорит: «Невозможно прочитать свой

Цитата

Сообщение Anonymous » 21 окт 2025, 00:53

я хочу показать на экране 3D-модель, когда я импортирую ее из Cloudinary, и это успешно, но проблема в том, что она не отображает 3D-модель на экране, и появляется ошибка, сообщающая, что не удалось загрузить GLF. Ошибка типа: невозможно прочитать свойство «соответствие» неопределенного значения
вот ошибка и код 3D-загрузчика и средства просмотра 3D-изображений из загруженного файла glb из Cloudinary
/>

Fetching GLB file from: https://res.cloudinary.com/djzitiwoc/ra ... dzisgy.glb
Error: ENOENT: no such file or directory, open 'C:\Users\Albert\try\InternalBytecode.js'
at Object.openSync (node:fs:596:3)
at Object.readFileSync (node:fs:464:35)
at getCodeFrame (C:\Users\Albert\try\node_modules\metro\src\Server.js:997:18)
at Server._symbolicate (C:\Users\Albert\try\node_modules\metro\src\Server.js

22)
at Server._processRequest (C:\Users\Albert\try\node_modules\metro\src\Server.js:460:7) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'C:\\Users\\Albert\\try\\InternalBytecode.js'
}
Error: ENOENT: no such file or directory, open 'C:\Users\Albert\try\InternalBytecode.js'
at Object.openSync (node:fs:596:3)
at Object.readFileSync (node:fs:464:35)
at getCodeFrame (C:\Users\Albert\try\node_modules\metro\src\Server.js:997:18)
at Server._symbolicate (C:\Users\Albert\try\node_modules\metro\src\Server.js

22)
at Server._processRequest (C:\Users\Albert\try\node_modules\metro\src\Server.js:460:7) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'C:\\Users\\Albert\\try\\InternalBytecode.js'
}
ERROR

Failed to load GLB: [TypeError: Cannot read property 'match' of undefined]

Call Stack
GLTFParser#constructor (node_modules\three\examples\jsm\loaders\GLTFLoader.js)
parse (node_modules\three\examples\jsm\loaders\GLTFLoader.js)
loadModel (app\cloud3dViewer.jsx)
next ()
asyncGeneratorStep (node_modules\@babel\runtime\helpers\asyncToGenerator.js)
_next (node_modules\@babel\runtime\helpers\asyncToGenerator.js)
tryCallOne (address at (InternalBytecode.js:1:1180)
anonymous (address at (InternalBytecode.js:1:1874)

import * as DocumentPicker from "expo-document-picker";
import { useState } from "react";
import { ActivityIndicator, Text, TouchableOpacity, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Cloud3DViewer from "./cloud3dViewer";

export default function Upload3DModel() {
const [uploading, setUploading] = useState(false);
const [fileUrl, setFileUrl] = useState(null);

const CLOUDINARY_URL = "https://api.cloudinary.com/v1_1/djzitiwoc/raw/upload";
const UPLOAD_PRESET = "mobile-upload";

async function pickAndUploadFile() {
try {
const result = await DocumentPicker.getDocumentAsync({
type: ["model/gltf-binary", "application/octet-stream"],
});

if (result.canceled) return;

const file = result.assets[0];
console.log("

Picked file:", file);

setUploading(true);

const formData = new FormData();
formData.append("file", {
uri: file.uri,
type: file.mimeType || "model/gltf-binary",
name: file.name || "3dmodel.glb",
});
formData.append("upload_preset", UPLOAD_PRESET);

//

Upload to Cloudinary as RAW resource (for non-image files)
const response = await fetch(CLOUDINARY_URL, {
method: "POST",
body: formData,
});

const data = await response.json();
console.log("

Cloudinary upload response:", data);

if (data.secure_url) {
//

Force Cloudinary to deliver with binary headers
const fixedUrl = data.secure_url.replace(
"/upload/",
"/upload/fl_attachment/"
);
setFileUrl(fixedUrl);
alert("

Upload successful!");
} else {
alert("

Upload failed. Check preset or network.");
console.error("Upload failed:", data);
}
} catch (error) {
console.error("

Upload error:", error);
alert("

Error uploading file.");
} finally {
setUploading(false);
}
}

return (

Upload 3D Model

{uploading && (

)}

{fileUrl && (

Uploaded URL:{"\n"}
{fileUrl}

)}

);
}

import React, { useEffect, useState, Suspense } from "react";
import { View, ActivityIndicator, Text } from "react-native";
import { Canvas } from "@react-three/fiber/native";
import { OrbitControls } from "@react-three/drei/native";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import * as THREE from "three";

export default function Cloud3DViewer({ modelUrl }) {
const [model, setModel] = useState(null);
const [error, setError] = useState(null);
const [loading, setLoading] = useState(false);

useEffect(() => {
if (!modelUrl) return;

const loadModel = async () => {
try {
console.log("

Fetching GLB file from:", modelUrl);
setLoading(true);
setError(null);

const response = await fetch(modelUrl, {
headers: { Accept: "application/octet-stream" },
});

if (!response.ok) throw new Error("Network response was not ok");

const arrayBuffer = await response.arrayBuffer();
const loader = new GLTFLoader();

loader.parse(
arrayBuffer,
"", //

path argument must be a string
(gltf) => {
console.log("

Model loaded successfully");
setModel(gltf.scene);
},
(parseError) => {
console.error("Loader parse error:", parseError);
setError("

Failed to parse GLB file. Possibly corrupted format.");
}
);
} catch (err) {
console.error("

Failed to load GLB:", err);
setError(err.message || "Unknown error while loading model");
} finally {
setLoading(false);
}
};

loadModel();
}, [modelUrl]);

if (!modelUrl)
return (

No model uploaded yet

);

return (

{loading && (

)}

{error && (

{error}

)}

{!error && (

{model && }

)}

);
}

import * as DocumentPicker from "expo-document-picker";
import { useState } from "react";
import { ActivityIndicator, Text, TouchableOpacity, View } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import Cloud3DViewer from "./cloud3dViewer";

export default function Upload3DModel() {
const [uploading, setUploading] = useState(false);
const [fileUrl, setFileUrl] = useState(null);

const CLOUDINARY_URL = "https://api.cloudinary.com/v1_1/djzitiwoc/raw/upload";
const UPLOAD_PRESET = "mobile-upload";

async function pickAndUploadFile() {
try {
const result = await DocumentPicker.getDocumentAsync({
type: ["model/gltf-binary", "application/octet-stream"],
});

if (result.canceled) return;

const file = result.assets[0];
console.log("