three.js

three.js

مكتبة جافا سكريبت ثلاثية الأبعاد

الهدف من المشروع هو إنشاء مكتبة ثلاثية الأبعاد سهلة الاستخدام وخفيفة الوزن ومتعددة المتصفحات. تشتمل الإصدارات الحالية فقط على عارض WebGL ولكن عارضات WebGPU (التجريبية) وSVG وCSS3D متاحة أيضًا كإضافات.

أمثلة - المستندات - الدليل - Wiki - الترحيل - الأسئلة - المنتدى - Discord

الاستخدام

يقوم هذا الكود بإنشاء مشهد وكاميرا ومكعب هندسي، ويضيف المكعب إلى المشهد. ثم يقوم بعد ذلك بإنشاء عارض WebGL للمشهد والكاميرا، ويضيف منفذ العرض هذا إلى عنصر document.body . وأخيرًا، يقوم بتحريك المكعب داخل المشهد للكاميرا.

 import * as THREE from 'three' ;

const width = window . innerWidth , height = window . innerHeight ;

// init

const camera = new THREE . PerspectiveCamera ( 70 , width / height , 0.01 , 10 ) ;
camera . position . z = 1 ;

const scene = new THREE . Scene ( ) ;

const geometry = new THREE . BoxGeometry ( 0.2 , 0.2 , 0.2 ) ;
const material = new THREE . MeshNormalMaterial ( ) ;

const mesh = new THREE . Mesh ( geometry , material ) ;
scene . add ( mesh ) ;

const renderer = new THREE . WebGLRenderer ( { antialias : true } ) ;
renderer . setSize ( width , height ) ;
renderer . setAnimationLoop ( animate ) ;
document . body . appendChild ( renderer . domElement ) ;

// animation

function animate ( time ) {

	mesh . rotation . x = time / 2000 ;
	mesh . rotation . y = time / 1000 ;

	renderer . render ( scene , camera ) ;

}

إذا سار كل شيء على ما يرام، يجب أن ترى هذا.

استنساخ هذا المستودع

يؤدي استنساخ الريبو بكل تاريخه إلى تنزيل يصل إلى 2 جيجابايت. إذا لم تكن بحاجة إلى السجل بأكمله، فيمكنك استخدام معلمة depth لتقليل حجم التنزيل بشكل ملحوظ.

git clone --depth=1 https://github.com/mrdoob/three.js.git

تغيير السجل

الإصدارات