الصفحة الرئيسية>المتعلقة بالبرمجة>شفرة المصدر الأخرى
تنزيل

ثلاثة محمل-3dtiles

العروض التوضيحية - الاستخدام - خريطة الطريق - المساهمة - المستندات - البدائل

هذه وحدة تحميل Three.js للتعامل مع بلاط OGC 3D، تم إنشاؤها بواسطة Cesium. وهو يدعم حاليًا التنسيقين الرئيسيين:

  1. نموذج ثلاثي الأبعاد مجمع (b3dm) - يعتمد على glTF.
  2. سحابة النقطة.

داخليًا، يستخدم المُحمل مكتبة Loaders.gl، التي تعد جزءًا من منصة vis.gl، والتي تخضع بشكل علني لمؤسسة Urban Computing Foundation. عملت شركة Cesium بشكل وثيق مع Loaders.gl لإنشاء تطبيق مستقل عن النظام الأساسي لعارض 3D Tiles الخاص بهم.

بدأ تطوير هذه المكتبة في قسم البحث والتطوير بصحيفة نيويورك تايمز كمحاولة لإنشاء جسر نظيف بين مواصفات 3D Tiles والمكتبة ثلاثية الأبعاد المستخدمة على نطاق واسع Three.js. تساعدنا المكتبة في تقديم صحافة جغرافية وثلاثية الأبعاد ضخمة لأجهزة الكمبيوتر المكتبية وأجهزة القراءة المحمولة على حدٍ سواء. من إعادة النقل إلى النقل عن بعد !

العروض التوضيحية

  • تم تصدير القياس التصويري إلى 3D Tiles في RealityCapture
  • تمت استضافة LiDAR Point Cloud على شكل بلاطات ثلاثية الأبعاد في Cesium ION
  • تراكب الخريطة باستخدام OpenStreetMap
  • خرائط جوجل صور واقعية ثلاثية الأبعاد
  • بلاط Google ثلاثي الأبعاد مع ثنيات GeoJSON (تجريبي)

الاستخدام الأساسي

فيما يلي مثال بسيط باستخدام وحدة Loader3DTiles لعرض tileset.json الذي يحتوي على تسلسل هرمي ثلاثي الأبعاد. 

 import { 
  Scene , 
  PerspectiveCamera , 
  WebGLRenderer , 
  Clock 
} from 'three'
import { Loader3DTiles } from 'three-loader-3dtiles' ;

const scene = new Scene ( )
const camera = new PerspectiveCamera ( )
const renderer = new WebGLRenderer ( )
const clock = new Clock ( )

renderer . setSize ( window . innerWidth , window . innerHeight )
document . body . appendChild ( renderer . domElement )

let tilesRuntime = null ;

async function loadTileset ( ) {
  const result = await Loader3DTiles . load (
      url : 'https://<TILESET URL>/tileset.json' ,
      viewport : {
        width : window . innerWidth ,
        height : window . innerHeight ,
        devicePixelRatio : window . devicePixelRatio
      }
      options : {
        dracoDecoderPath : 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/libs/draco' ,
        basisTranscoderPath : 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/libs/basis' ,
      }
  )
  const { model , runtime } = result
  tilesRuntime = runtime
  scene . add ( model )
}

function render ( ) {
  const dt = clock . getDelta ( )
  if ( tilesRuntime ) {
    tilesRuntime . update ( dt , window . innerHeight , camera )
  }
  renderer . render ( scene , camera )
  window . requestAnimationFrame ( render )
}

loadTileset ( )
render ( )

تثبيت

تدعم المكتبة three.js r160 وتستخدم أدوات التحميل GLTF وDraco وKTX2/Basis الخاصة بها. ارجع إلى حقل browserslist في package.json للتعرف على المتصفحات المستهدفة.

1. وحدة ES

استخدم خريطة importmap لاستيراد التبعيات من npm. انظر هنا للحصول على مثال كامل.

index.html

 < script type =" importmap " >
  {
    "imports" : {
      "three" : "https://unpkg.com/[email protected]/build/three.module.js" ,
      "three/examples/jsm/" : "https://unpkg.com/[email protected]/examples/jsm/" ,
      "three-loader-3dtiles" : "https://unpkg.com/three-loader-3dtiles/dist/lib/three-loader-3dtiles.js"
    }
  }
</ script >
< script src =' index.js ' type =' module ' >

index.js

 import { Scene , PerspectiveCamera } from 'three' ;
import { Loader3DTiles } from 'three-loader-3dtiles' ;

3. الآلية الوطنية

إذا كنت تستخدم نظام إنشاء مثل Webpack / Vite / Rollup وما إلى ذلك، فيجب عليك أيضًا تثبيت المكتبة مع three.js من npm: 

 npm install -s three three-loader-3dtiles

سيكون البرنامج النصي للتطبيق هو نفسه الموجود في مثال وحدة ES (عند استخدام importmap ).

انظر هنا للحصول على مثال كامل لحزمة الويب.

4. الإطار

ارجع إلى مكون الإطار A المخصص لدينا: aframe-loader-3dtiles-component.

5. رد فعل ثلاثة ألياف

الرجوع إلى الأمثلة/r3f.

خريطة الطريق

دعم البلاط ثلاثي الأبعاد التالي

مواصفات 3D Tiles Next قيد العمل، مع بعض الميزات المدعومة بالفعل في Loaders.gl. ويفتح دعم الامتدادات الجديدة إمكانيات لتطبيقات جديدة.

تخطي الاجتياز

يمكن أن يؤدي تنفيذ آلية اجتياز التخطي إلى تحسين أداء تجانبات b3dm (الشبكة) بشكل كبير، ولكنه يتطلب تطبيقًا قائمًا على المخزن المؤقت للتظليل/Stencil والذي يدير عملية إعدام Z يدويًا. هذه ميزة مطلوبة للغاية وستكون المساهمات موضع تقدير كبير.

المساهمة

ارجع إلى CONTRIBUTING.MD للحصول على تعليمات المساهمة العامة.

النامية

تم بناء المكتبة باستخدام التراكمي. لتشغيل نوع خادم تطوير بسيط: 

 npm run dev

من الممكن أيضًا تطوير المكتبة أثناء تطوير Loaders.gl. ما عليك سوى استنساخ مصدر Loaders.gl وتشغيله: 

 LOADERS_GL_SRC=<path to loaders.gl> npm run dev

مبنى

لبناء تشغيل المكتبة: 

 npm run build

لإنشاء نسخة الإنتاج المصغرة، قم بتشغيل: 

 npm run build:production

ولإنشاء وثائق API، قم بتشغيل: 

 npm run docs

الاختبارات

تتوفر مواصفات الاختبار البدائية على ./test. لتشغيله اكتب: 

 npm run test

المستندات

  • وثائق API متاحة هنا.
  • رمز العروض التوضيحية موجود في الأمثلة/العروض التوضيحية.

البدائل

على حد علمنا، هذه هي مكتبة Three.js الوحيدة القائمة على Loaders.gl، ولكن هناك العديد من تطبيقات 3D Tiles لـ Three.js. أمثلة بارزة:

  • NASSA-AMMOS / 3DtilesRendererJS
  • ebeaufay / 3DTilesViewer
  • آي تاونز

تتم صيانة هذا المستودع من قبل فريق البحث والتطوير في صحيفة نيويورك تايمز ويتم توفيره كما هو لاستخدامك الخاص. لمزيد من المعلومات حول البحث والتطوير في The Times، قم بزيارة rd.nytimes.com

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل