تشغيل كود بلاحقة glb. ضمن مشروع Three.js"

Zeina Almakdisi · 23 مايو 2023

مرحبا..

احاول تشغيل كود بلاحقة glb. ضمن مشروع Three.js"

قمت بتضمين ملف home.glb ضمن المشروع

واضفت الكود التالي الى Script.js

  import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
const loader = new GLTFLoader();
  const draco = new DRACOLoader();
  draco.setDecoderPath( '/examples/jsm/libs/draco/' );
  loader.setDRACOLoader( draco );


  // Load a glTF resource
  loader.load(
    // resource URL
    '/home.glb',
    gltf => {
      gltf.scene.scale.set(.1,.1,.1);
      this._scene.add(gltf.scene);
    },
    xhr => {
      let percent = xhr.loader / xhr.total*100;
      console.log('${percent}% of solar system model loaded.');
    },
    undefined
  );

وضمن كود ل html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/script.js" type="module"></script>
    <title>3D</title>
</head>
<body>
    <camera class="webgi"></camera>
   <div class="container"> 
     <model-viewer src="./home.glb" auto-rotate camera-controls alt="cube" ></model-viewer> 
   </div>
</body>
</html>

لكن لم تظهر أي نتيحة في المتصفح ، علما انه لايوجد اي خطأ في السيرفر

Adnane Kadri · 23 مايو 2023

من الصعب الإحاطة بأسباب المشكلة على نحو دقيق، ولكن عموما قومي بالتأكد من كل من:

وجود الملفات في المسار الصحيح: تحقق من أن ملفات home.glb و script.js موجودة في المسار الصحيح داخل مشروع Three.js الخاص بك.
الملفات تحمّل بنجاح: تأكد من أن المتصفح يمكنه الوصول إلى الملفات اللازمة. يمكنك التحقق من ذلك من خلال فحص أداة المطور (Developer Tools) في المتصفح والتأكد من وجود أي أخطاء في تحميل الملفات أو أي أخطاء أخرى في وحدة التحكم.
التحقق من دعم المتصفح: تأكد من أن المتصفح الذي تستخدمه يدعم جميع الميزات والتقنيات المستخدمة في مشروع Three.js الخاص بك.

جربي ايضا تعديل المسار:

// resource URL
    '/home.glb',

ليصبح:

// resource URL
    './home.glb',

أو:

// resource URL
    'home.glb',

ان كان على نفس مستوى ملف script.js، لأنه قد يكون هنالك مشكلة بتكوين مسارات نسبية انطلاقا من هذا المسار.

Mustafa Suleiman · 23 مايو 2023

من الأفضل قراءة المستندات الخاصة بمكتبة Three.js وهي متوفرة بالعربية أيضًا من خلال الرابط التالي:

https://threejs.org/docs/#manual/ar/introduction/Installation

حيث أنها ستوفر لك الطريقة السليمة لاستخدام المكتبة.

وبخصوص الكود الخاص بك لاحظي أنه في السكريبت لم يتم استدعاء GLTFLoader و DRACOLoader بشكل صحيح في الكود الخاص بك.

فأنت قمت باستدعاء المكتبة باسم THREE وبالتالي يجب استيراد الدوال المرادة منها.

والصحيح هو تعريف المتغيرات GLTFLoader و DRACOLoader واستخدامها فيما بعد، على النحو التالي:

const loader = new THREE.GLTFLoader();
const draco = new THREE.DRACOLoader();
draco.setDecoderPath('/examples/jsm/libs/draco/');
loader.setDRACOLoader(draco);

حاولي استخدام الكود التالي حيث قمت باستيراد المكتبات عن طريق CDN وكتابة HTML والسكريبت في صفحة واحدة لمعرفة أين يقع الخطأ بالضبط:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/build/three.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.131.2/examples/js/loaders/GLTFLoader.js"></script>
    <title>3D</title>
    <style>
        body { margin: 0; overflow: hidden; }
    </style>
</head>
<body>
    <script>
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        camera.position.z = 5;

        const renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        const loader = new THREE.GLTFLoader();
        loader.load(
            'path/to/your/home.glb',
            function (gltf) {
                scene.add(gltf.scene);
            },
            undefined,
            function (error) {
                console.error('An error occurred while loading the model:', error);
            }
        );

        function animate() {
            requestAnimationFrame(animate);
            renderer.render(scene, camera);
        }

        animate();
    </script>
</body>
</html>

عبدالباسط ابراهيم · 25 مايو 2023

يمكن أن تواجه مشكلة في عدم ظهور النتيجة في المتصفح بسبب استخدام أسلوبين مختلفين لتحميل نفس الملف `home.glb`. يتم استخدام `model-viewer` element في HTML و `GLTFLoader` في Three.js لتحميل الملف وعرضه. يجب استخدام الأسلوب الواحد لتحميل الملف، وإما استخدام `model-viewer` أو `GLTFLoader`.

إذا كنت تريد استخدام `model-viewer`، يمكنك إزالة كود `GLTFLoader` في Script.js واستخدام العنصر `model-viewer` في HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D</title>
</head>
<body>
    <div class="container">
        <model-viewer src="./home.glb" auto-rotate camera-controls alt="cube"></model-viewer>
    </div>
</body>
</html>

بينما إذا كنت تريد استخدام GLTFLoader، فيمكنك إزالة العنصر model-viewer من HTML وتغيير كود Script.js إلى الشكل التالي:

import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';
import {DRACOLoader} from 'three/examples/jsm/loaders/DRACOLoader';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 0, 5);
controls.update();

const loader = new GLTFLoader();
const draco = new DRACOLoader();
draco.setDecoderPath('/examples/jsm/libs/draco/');
loader.setDRACOLoader(draco);

// Load a glTF resource
loader.load(
'/home.glb',
  gltf => {
    gltf.scene.scale.set(.1,.1,.1);
    scene.add(gltf.scene);
  },
  xhr => {
    let percent = xhr.loaded / xhr.total * 100;
    console.log(`${percent}% of home model loaded.`);
  },
  error => {
    console.error(error);
  }
);

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

animate();

ويجب أن يتم تضمين الملفات اللازمة لـ OrbitControls و GLTFLoader و DRACOLoader لضمان عمل الكود بشكل صحيح.

تشغيل كود بلاحقة glb. ضمن مشروع Three.js"

السؤال

Zeina Almakdisi

3 أجوبة على هذا السؤال

Recommended Posts

Adnane Kadri

Mustafa Suleiman

عبدالباسط ابراهيم

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية