Compare commits

...

3 Commits

@ -0,0 +1,798 @@
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
import html2canvas from 'https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.esm.js';
const interfaceUrl = 'http://127.0.0.1:5000';
const uploadFiles = document.getElementById('uploadFiles');
const uploadBtn = document.getElementById('uploadBtn');
const serverFilesDiv = document.getElementById('serverFiles');
// 目录选择 & 列表渲染
uploadBtn.addEventListener('click', async ()=>{
const files = Array.from(uploadFiles.files);
if(!files.length) return alert('请选择要上传的文件');
const fd = new FormData();
files.forEach(f=>fd.append('files',f,f.name));
const res = await fetch(interfaceUrl+'/upload_data_files',{method:'POST',body:fd});
if(!res.ok) { const e=await res.json(); return alert('上传失败:'+e.error); }
alert('上传成功');
loadServerFiles();
});
async function loadServerFiles(){
serverFilesDiv.innerHTML = '';
const res = await fetch(interfaceUrl+'/list_data_files');
const { files } = await res.json();
files.forEach(fn=>{
const cb=document.createElement('input');
cb.type='checkbox';cb.value=fn;cb.id='sf_'+fn;
const lbl=document.createElement('label');
lbl.htmlFor='sf_'+fn;lbl.textContent=fn;
const row=document.createElement('div');
row.style.display='flex';row.style.alignItems='center';row.style.marginBottom='4px';
lbl.style.marginLeft='6px';row.append(cb,lbl);
serverFilesDiv.appendChild(row);
});
}
loadServerFiles();
// 不再硬编码 baseDate由 UI 输入驱动
let baseDate = new Date();
const dateInput = document.getElementById('baseDate');
const timeInput = document.getElementById('baseTime');
function updateBaseDate() {
const d = dateInput.value; // YYYY-MM-DD
const t = timeInput.value; // HH:MM:SS
baseDate = new Date(`${d}T${t}`);
}
function getBounds() {
const xMinI = document.getElementById('x-min'),
xMaxI = document.getElementById('x-max'),
yMinI = document.getElementById('y-min'),
yMaxI = document.getElementById('y-max'),
zMinI = document.getElementById('z-min'),
zMaxI = document.getElementById('z-max');
return {
x: [ Number(xMinI.value), Number(xMaxI.value) ],
y: [ Number(yMinI.value), Number(yMaxI.value) ],
z: [ Number(zMinI.value), Number(zMaxI.value) ]
};
}
dateInput.addEventListener('change', updateBaseDate);
timeInput.addEventListener('change', updateBaseDate);
updateBaseDate();
let scene, camera, renderer, controls, currentGroup, dataGroup, axisGroup, labelRenderer = null;
let timeMin = 0, timeMax = 1, playIntervalSec = 600;
let isPlaying = false, frameIdx = 0;
const coldMap = ['#800080', '#0000ff', '#00ffff'];
const warmMap = ['#00ff00', '#ffff00', '#ff7f00', '#ff0000'];
function lerpColor(arr, t) {
const n = arr.length, s = t * (n - 1), i = Math.floor(s), f = s - i;
if (i >= n - 1) return new THREE.Color(arr[n - 1]);
return new THREE.Color(arr[i]).lerp(new THREE.Color(arr[i + 1]), f);
}
function getHeatColor(t) {
return t <= 0.4
? lerpColor(coldMap, t / 0.4)
: lerpColor(warmMap, (t - 0.4) / 0.6);
}
initScene();
initControls();
// 获取时间间隔(分钟)
function getIntervalMin() {
return Number(document.getElementById('intervalMin').value);
}
function refreshTimeRange() {
// 获取 time_range转换为分钟并四舍五入
fetch(interfaceUrl + '/time_range')
.then(r => r.json())
.then(({ timeMin: secMin, timeMax: secMax }) => {
const minM = Math.round(secMin / 60);
const maxM = Math.round(secMax / 60);
timeMin = minM;
timeMax = maxM;
const st = document.getElementById('startTime'),
et = document.getElementById('endTime');
st.min = et.min = minM;
st.max = et.max = maxM;
st.value = minM;
et.value = maxM;
updateTimeLabel(st.value);
});
}
refreshTimeRange();
function initScene() {
const C = document.getElementById('container');
scene = new THREE.Scene();
scene.rotateX(-Math.PI / 2);
scene.background = new THREE.Color(0xffffff);
camera = new THREE.PerspectiveCamera(50, C.clientWidth / C.clientHeight, 0.1, 5000);
camera.position.set(200, 200, -1600);
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(C.clientWidth, C.clientHeight);
C.appendChild(renderer.domElement);
// 光照
scene.add(new THREE.AmbientLight(0xffffff, 0.8));
const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
dirLight.position.set(200, 300, 200);
dirLight.castShadow = true;
scene.add(dirLight);
const fillLight = new THREE.DirectionalLight(0xffffff, 0.4);
fillLight.position.set(-200, -100, -200);
scene.add(fillLight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
// CSS2DRenderer for axis labels
labelRenderer = new CSS2DRenderer();
labelRenderer.setSize(C.clientWidth, C.clientHeight);
labelRenderer.domElement.style.position = 'absolute';
labelRenderer.domElement.style.top = '0';
labelRenderer.domElement.style.pointerEvents = 'none';
C.appendChild(labelRenderer.domElement);
// OrbitControls
controls = new OrbitControls(camera, renderer.domElement);
controls.target.set(150, 100, -80);
controls.enableDamping = false;
controls.dampingFactor = 0.05;
controls.enablePan = false; // 支持平移
let userInteracting = false;
controls.addEventListener('start', () => userInteracting = true);
controls.addEventListener('end', () => userInteracting = false);
controls.addEventListener('change', () => {
if (!userInteracting) return;
const az = THREE.MathUtils.radToDeg(controls.getAzimuthalAngle());
const po = THREE.MathUtils.radToDeg(controls.getPolarAngle());
document.getElementById('azimuth').value = az.toFixed(0);
document.getElementById('polar').value = po.toFixed(0);
});
window.addEventListener('resize', () => {
camera.aspect = C.clientWidth / C.clientHeight;
camera.updateProjectionMatrix();
renderer.setSize(C.clientWidth, C.clientHeight);
labelRenderer.setSize(C.clientWidth, C.clientHeight);
});
// 2) 井轨迹
fetch(interfaceUrl + '/get_well_path')
.then(r => r.json())
.then(({ points }) => {
// 1) 把后端返回的点转成 Vector3 数组
const verts = points.map(p => new THREE.Vector3(p.x, p.y, p.z));
// 2) 构造 BufferGeometry
const geo = new THREE.BufferGeometry().setFromPoints(verts);
// 3) LineBasicMaterial 支持一个简单的 linewidth
const mat = new THREE.LineBasicMaterial({
color: 0xff8800,
linewidth: 3, // 粗细(注意:大多数浏览器/平台只支持 1px
});
// 4) THREE.Line 或者 THREE.LineSegments如果想把每段分离都可以用
const line = new THREE.Line(geo, mat);
line.renderOrder = 1; // 确保它按这个顺序绘制
// 5) 直接添加到场景,按世界坐标就能穿透等值面
scene.add(line);
});
// 射孔簇
fetch(interfaceUrl + '/get_perforations')
.then(r => r.json())
.then(({ points }) => {
const geo = new THREE.BufferGeometry();
const pos = new Float32Array(points.length * 3);
points.forEach((p, i) => {
pos[3*i] = p.x;
pos[3*i+1] = p.y;
pos[3*i+2] = p.z;
});
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
const mat = new THREE.PointsMaterial({
color: 0xffff00,
size: 25,
sizeAttenuation: true,
depthWrite: false,
depthTest: false
});
const perfs = new THREE.Points(geo, mat);
perfs.renderOrder = 200; // 最后画
scene.add(perfs);
});
// 桥塞
fetch(interfaceUrl + '/get_plugs')
.then(r => r.json())
.then(({ points }) => {
const geo = new THREE.BufferGeometry();
const pos = new Float32Array(points.length * 3);
points.forEach((p, i) => {
pos[3*i] = p.x;
pos[3*i+1] = p.y;
pos[3*i+2] = p.z;
});
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
const mat = new THREE.PointsMaterial({
color: 0xff0000,
size: 25,
sizeAttenuation: true,
depthWrite: false,
depthTest: false
});
const plugs = new THREE.Points(geo, mat);
plugs.renderOrder = 210; // 桥塞后画
scene.add(plugs);
});
// 层位标记
fetch(interfaceUrl + '/get_cells')
.then(r => r.json())
.then(({ points }) => {
const geo = new THREE.BufferGeometry();
const pos = new Float32Array(points.length * 3);
points.forEach((p, i) => {
pos[3*i] = p.x;
pos[3*i+1] = p.y;
pos[3*i+2] = p.z;
});
geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
const mat = new THREE.PointsMaterial({
color: 'blue',
size: 20,
sizeAttenuation: true,
depthWrite: false,
depthTest: false
});
const perfs = new THREE.Points(geo, mat);
perfs.renderOrder = 212; // 最后画
scene.add(perfs);
});
axisGroup = new THREE.Group();
dataGroup = new THREE.Group();
// 画坐标轴一次
drawAxes();
scene.add(axisGroup);
// 把 dataGroup 一开始也加进去(里面现在空)
scene.add(dataGroup);
// render loop
(function animate() {
requestAnimationFrame(animate);
// 每帧都重新应用用户锁定的中心点
controls.update();
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
})();
// initial zoom-in
function zoomByScroll(ticks, factorPerTick = 0.8) {
const dir = new THREE.Vector3().subVectors(camera.position, controls.target);
dir.multiplyScalar(Math.pow(factorPerTick, ticks));
camera.position.copy(controls.target).add(dir);
camera.updateProjectionMatrix();
controls.update();
}
zoomByScroll(8, 0.99);
// drawAxes();
}
function drawAxes() {
if (axisGroup) {
scene.remove(axisGroup);
// (可选:彻底 dispose 三维对象的 geometry/material
axisGroup.traverse(o => {
if (o.geometry) o.geometry.dispose();
if (o.material) o.material.dispose();
});
}
// —— ② 把之前留下的 CSS2D 标签清空 ——
labelRenderer.domElement.innerHTML = '';
// —— ③ 新建一个全新的 axisGroup ——
axisGroup = new THREE.Group();
const { x: [xmin, xmax], y: [ymin, ymax], z: [zmin, zmax] } = getBounds();
console.log("x:" + xmin);
const lenX = xmax - xmin, lenY = ymax - ymin, lenZ = zmax - zmin;
const ticksMap = { X: Math.ceil(lenX / 50), Y: Math.ceil(lenY / 50), Z: Math.ceil(lenZ / 50) };
const tickesNameMap = {X: 'X', Y: 'Y', Z: 'Z'};
// 通用刻度文字样式
const LABEL_STYLE = {
fontSize: '12px',
color: '#000', // 黑色
margin: '0px',
padding: '0px',
whiteSpace: 'nowrap',
};
// 画单条轴及其刻度和标签
[['X', xmin, lenX, 'x', 0xff0000],
['Y', ymin, lenY, 'y', 0x00ff00],
['Z', zmin, lenZ, 'z', 0x0000ff]
].forEach(([name, start, length, axis, color]) => {
const mat = new THREE.LineBasicMaterial({ color });
// 计算轴起点
const origin = new THREE.Vector3(
axis === 'x' ? start : (axis === 'y' ? xmax : xmin),
axis === 'y' ? start : ymin,
axis === 'z' ? start : zmin
);
// 计算轴方向向量
const dir = new THREE.Vector3(
axis === 'x' ? 1 : 0,
axis === 'y' ? 1 : 0,
axis === 'z' ? 1 : 0
);
// —— 绘制轴主线 ——
const lineGeo = new THREE.BufferGeometry().setFromPoints([
origin,
origin.clone().add(dir.clone().multiplyScalar(length))
]);
axisGroup.add(new THREE.Line(lineGeo, mat));
// 计算刻度外推方向(针对不同轴分别处理)
let offsetDir;
// Vector3(x,y,z)
if (axis === 'x') offsetDir = new THREE.Vector3(0, 0.8, -0.8); // X 轴刻度文字向下
else if (axis === 'y') offsetDir = new THREE.Vector3(0.5, 0, -0.1); // Y 轴刻度文字向前
else offsetDir = new THREE.Vector3(1, 0, 0); // Z 轴刻度文字向左
const labelOffset = offsetDir.multiplyScalar(10);
// —— 绘制刻度线和数字标签 ——
const ticks = ticksMap[name];
for (let i = 0; i <= ticks; i++) {
const t = i / ticks;
const pos = origin.clone().add(dir.clone().multiplyScalar(length * t));
// 刻度线
const mkGeo = new THREE.BufferGeometry().setFromPoints([
pos.clone().add(offsetDir.clone().multiplyScalar(0.5)),
pos.clone().add(offsetDir.clone().multiplyScalar(-0.5))
]);
axisGroup.add(new THREE.Line(mkGeo, mat));
// 数字标签
const val = (start + length * t).toFixed(0);
const div = document.createElement('div');
Object.assign(div.style, LABEL_STYLE);
div.textContent = val;
const label = new CSS2DObject(div);
label.position.copy(pos.clone().add(labelOffset));
axisGroup.add(label);
}
// —— 绘制轴标题 ——
const titleDiv = document.createElement('div');
Object.assign(titleDiv.style, LABEL_STYLE, { fontWeight: 'bold' });
titleDiv.textContent = tickesNameMap[name];
const titleLabel = new CSS2DObject(titleDiv);
let worldPos;
if (axis === 'x') {
worldPos = origin.clone()
.add(dir.clone().multiplyScalar(length * 0.5))
.add(offsetDir.clone().multiplyScalar(length * 0.008));
} else if (axis === 'y') {
worldPos = origin.clone()
.add(dir.clone().multiplyScalar(length * 0.5))
.add(offsetDir.clone().multiplyScalar(length * 0.018));
} else {
worldPos = origin.clone()
.add(dir.clone().multiplyScalar(length * 0.5))
.add(offsetDir.clone().multiplyScalar(length * -0.018));
}
titleLabel.position.copy(worldPos);
axisGroup.add(titleLabel);
});
// —— 手工生成 XY/XZ/YZ 三个平面上的网格 ——
const gridMat = new THREE.LineBasicMaterial({
color: 0xcccccc,
opacity: 0.6,
transparent: true
});
function makePlaneGrid(fixedAxis, fixedValue, axis1, range1, div1, axis2, range2, div2) {
const geom = new THREE.BufferGeometry();
const pos = [];
const step1 = (range1[1] - range1[0]) / div1;
const step2 = (range2[1] - range2[0]) / div2;
// 沿 axis1 方向的线
for (let j = 0; j <= div2; j++) {
const c2 = range2[0] + step2 * j;
const p1 = {}, p2 = {};
p1[fixedAxis] = fixedValue; p2[fixedAxis] = fixedValue;
p1[axis2] = c2; p2[axis2] = c2;
p1[axis1] = range1[0]; p2[axis1] = range1[1];
pos.push(p1.x||0, p1.y||0, p1.z||0, p2.x||0, p2.y||0, p2.z||0);
}
// 沿 axis2 方向的线
for (let i = 0; i <= div1; i++) {
const c1 = range1[0] + step1 * i;
const q1 = {}, q2 = {};
q1[fixedAxis] = fixedValue; q2[fixedAxis] = fixedValue;
q1[axis1] = c1; q2[axis1] = c1;
q1[axis2] = range2[0]; q2[axis2] = range2[1];
pos.push(q1.x||0, q1.y||0, q1.z||0, q2.x||0, q2.y||0, q2.z||0);
}
geom.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
return new THREE.LineSegments(geom, gridMat);
}
// XY 平面: z = zmin
axisGroup.add(makePlaneGrid('z', zmin, 'x', [xmin, xmax], ticksMap.X, 'y', [ymin, ymax], ticksMap.Y));
// XZ 平面: y = ymin
axisGroup.add(makePlaneGrid('y', ymax, 'x', [xmin, xmax], ticksMap.X, 'z', [zmin, zmax], ticksMap.Z));
// YZ 平面: x = xmin
axisGroup.add(makePlaneGrid('x', xmin, 'z', [zmin, zmax], ticksMap.Z, 'y', [ymin, ymax], ticksMap.Y));
// 加入场景
scene.add(axisGroup);
}
function applyView() {
if(!currentGroup) return;
const sel = document.getElementById('viewSelect').value;
const box = new THREE.Box3().setFromObject(currentGroup);
const center = box.getCenter(new THREE.Vector3());
const d = box.getSize(new THREE.Vector3()).length() * 1.2;
let pos;
switch(sel){
case '主视图': pos = new THREE.Vector3(0,0,d); break;
case '左视图': pos = new THREE.Vector3(-d,0,0); break;
case '右视图': pos = new THREE.Vector3(d,0,0); break;
case '俯视图': pos = new THREE.Vector3(0,d,0); break;
default: pos = new THREE.Vector3(d,d,d); break;
}
camera.position.copy(center.clone().add(pos));
controls.target.copy(center);
camera.lookAt(center);
controls.update();
}
function initControls() {
// 底层按钮和输入绑定
document.getElementById('apply').onclick = renderSimple;
document.getElementById('play').onclick = startPlay;
document.getElementById('stop').onclick = stopPlay;
document.getElementById('record').onclick = startRecording;
document.getElementById('startTime').addEventListener('input', () => {
let st = +startTime.value;
if (st < timeMin) st = timeMin;
if (st > timeMax) st = timeMax;
startTime.value = st;
document.getElementById('timeLabel').innerText = st;
});
// 限制 endTime 在 [startTime, timeMax]
document.getElementById('endTime').addEventListener('input', () => {
let et = +endTime.value, st = +startTime.value;
if (et < st) et = st;
if (et > timeMax) et = timeMax;
endTime.value = et;
});
document.getElementById('viewSelect').onchange = applyView;
}
function getStartEndInput() {
return {
start: +document.getElementById('startTime').value,
end: +document.getElementById('endTime').value
};
}
function getCurrentLabel() {
return +document.getElementById('timeLabel').innerText || 0;
}
function updateTimeLabel(timeValue) {
const labelEl = document.getElementById('timeLabel');
// 取当前文本,尝试解析为浮点数;如果不是数字(包括空字符串),则默认 0
const current = parseFloat(labelEl.innerText) || 0;
const updated = current + timeValue;
if (updated > timeMax) {
updated = timeMax;
}
labelEl.innerText = updated;
}
// 简单渲染
async function renderSimple() {
// 1) 读取所有输入参数
let { start, end } = getStartEndInput();
const startSec = start * 60;
const endSec = end * 60;
const levels = +document.getElementById('levels').value;
const gridRes = +document.getElementById('gridRes').value;
const tau = +document.getElementById('tau').value;
const S1 = +document.getElementById('S1').value, R1 = +document.getElementById('R1').value;
const S2 = +document.getElementById('S2').value, R2 = +document.getElementById('R2').value;
const S3 = +document.getElementById('S3').value, R3 = +document.getElementById('R3').value;
const opacity = +document.getElementById('meshOpacity').value;
// 2) 找到所有被勾选的文件
const selected = Array.from(
document.querySelectorAll('#serverFiles input:checked')
).map(cb => cb.value);
if (!selected.length) {
return alert('请先勾选要渲染的文件');
}
// 3) 清空旧的数据 Group但保留坐标轴
dataGroup.clear();
// 4) 对每个文件,拉数据并生成一组等值面,添加到 dataGroup
for (const fn of selected) {
const url = new URL(interfaceUrl + '/get_meshes');
url.searchParams.set('file', fn);
url.searchParams.set('levels', levels);
url.searchParams.set('energy_thresh', tau);
url.searchParams.set('grid_res', gridRes);
url.searchParams.set('S1', S1);
url.searchParams.set('R1', R1);
url.searchParams.set('S2', S2);
url.searchParams.set('R2', R2);
url.searchParams.set('S3', S3);
url.searchParams.set('R3', R3);
url.searchParams.set('startTime', startSec);
url.searchParams.set('endTime', endSec);
const res = await fetch(url);
const { meshes, bounds, volume } = await res.json();
// (可选)更新总体积或显示最后一个文件的体积
document.getElementById('volume').innerText = '体积:' + volume + '立方米';
// 构造一个小组来承载当前文件所有层
const group = new THREE.Group();
group.position.set(bounds.x[0], bounds.y[0], bounds.z[0]);
for (let i = 0; i < meshes.length; i++) {
const m = meshes[i];
const geom = new THREE.BufferGeometry();
geom.setAttribute(
'position',
new THREE.BufferAttribute(new Float32Array(m.vertices.flat()), 3)
);
geom.setIndex(
new THREE.BufferAttribute(new Uint32Array(m.faces.flat()), 1)
);
geom.computeVertexNormals();
const mat = new THREE.MeshPhongMaterial({
color: getHeatColor(i / (meshes.length - 1)),
transparent: true,
opacity: opacity,
side: THREE.DoubleSide,
shininess: 14,
specular: 0x888888,
depthWrite: false,
depthTest: true
});
const mesh = new THREE.Mesh(geom, mat);
mesh.renderOrder = i;
group.add(mesh);
}
// 把这个文件的等值面组加入 dataGroup
dataGroup.add(group);
}
// 5) 重新聚焦到所有数据的中央(可选)
const box = new THREE.Box3().setFromObject(dataGroup);
const center = box.getCenter(new THREE.Vector3());
controls.target.copy(center);
camera.position.set(center.x, center.y, center.z + box.getSize(new THREE.Vector3()).length());
controls.update();
}
// 播放start 固定endLabel 动态
async function startPlay() {
const { start, end } = getStartEndInput();
let current = start;
document.getElementById('timeLabel').innerText = current;
isPlaying = true;
play.disabled = true;
const interval = getIntervalMin(); // 分钟
while (isPlaying && current <= end) {
current += interval;
await renderFrame(start, current);
document.getElementById('timeLabel').innerText = current;
}
stopPlay();
}
function stopPlay() {
isPlaying = false;
play.disabled = false;
alert("结束");
}
// 录制:逻辑跟播放一样,每帧多存图
async function startRecording() {
const { start, end } = getStartEndInput();
let current = start;
document.getElementById('timeLabel').innerText = current;
isPlaying = true;
frameIdx = 0;
await fetch(interfaceUrl + '/init_frames', { method: 'POST' });
const interval = getIntervalMin();
while (isPlaying && current <= end) {
current += interval;
await renderFrame(start, current);
// 截图上传
const shot = await html2canvas(container, { backgroundColor: null, useCORS: true });
const png = shot.toDataURL();
await fetch(interfaceUrl + '/save_frame', {
method: 'POST',
headers: { 'Content-Type':'application/json' },
body: JSON.stringify({ idx: frameIdx++, image: png })
});
document.getElementById('timeLabel').innerText = current;
}
// 合成 GIF 并下载
const res = await fetch(interfaceUrl + '/make_gif');
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url; a.download = `animation_${Date.now()}.gif`;
document.body.appendChild(a); a.click();
URL.revokeObjectURL(url);
stopPlay();
}
let initialFocused = false;
async function renderFrame(startTime, endTime) {
console.log("处理范围:" + startTime + "," + endTime);
startTime = startTime * 60;
endTime = endTime * 60;
const levels = +document.getElementById('levels').value; // 等值面层数
const gridRes = +document.getElementById('gridRes').value; // 体素尺寸
const tau = +document.getElementById('tau').value; // 阈值
const S1 = +document.getElementById('S1').value,
R1 = +document.getElementById('R1').value;
const S2 = +document.getElementById('S2').value,
R2 = +document.getElementById('R2').value;
const S3 = +document.getElementById('S3').value,
R3 = +document.getElementById('R3').value;
const opacity = +document.getElementById('meshOpacity').value;
// 前端时间输入是分钟,需要转换成秒再传给后端
const timeLabelVal = getCurrentLabel() * 60;
updateBaseDate(); // 保证读到最新输入
const actualDate = new Date(baseDate.getTime() + timeLabelVal * 1000);
const hh = String(actualDate.getHours()).padStart(2, '0');
const mm = String(actualDate.getMinutes()).padStart(2, '0');
const ss = String(actualDate.getSeconds()).padStart(2, '0');
document.getElementById('timeStamp').innerText = `${actualDate.getFullYear()}-${(actualDate.getMonth() + 1).toString().padStart(2, '0')}-${actualDate.getDate().toString().padStart(2, '0')} ${hh}:${mm}:${ss}`;
const url = `${interfaceUrl}/get_meshes?levels=${levels}`
+ `&energy_thresh=${tau}&grid_res=${gridRes}`
+ `&S1=${S1}&R1=${R1}&S2=${S2}&R2=${R2}&S3=${S3}&R3=${R3}`
+ `&startTime=${startTime}&endTime=${endTime}`;
const { meshes, bounds, volume } = await (await fetch(url)).json();
document.getElementById('volume').innerText = '体积:' + volume + '立方米';
const newG = new THREE.Group();
newG.position.set(bounds.x[0], bounds.y[0], bounds.z[0]);
for (let i = 0; i < meshes.length; i++) {
const m = meshes[i];
const geom = new THREE.BufferGeometry();
geom.setAttribute('position', new THREE.BufferAttribute(
new Float32Array(m.vertices.flat()), 3
));
geom.setIndex(new THREE.BufferAttribute(
new Uint32Array(m.faces.flat()), 1
));
geom.computeVertexNormals();
const iso = i / (levels - 1);
const mat = new THREE.MeshPhongMaterial({
color: getHeatColor(iso),
transparent: true,
side: THREE.DoubleSide,
opacity: opacity,
shininess: 14, // 控制高光粗细
specular: 0x888888, // 高光颜色
depthWrite: false,
depthTest: true
});
const mesh = new THREE.Mesh(geom, mat);
// mesh.renderOrder = meshes.length - i;
mesh.renderOrder = i;
newG.add(mesh);
}
scene.add(newG);
if (currentGroup) {
scene.remove(currentGroup);
currentGroup.traverse(o => o.geometry && o.geometry.dispose());
}
currentGroup = newG;
// 仅第一次渲染时对焦
if (!initialFocused) {
const box = new THREE.Box3().setFromObject(currentGroup);
const ctr = box.getCenter(new THREE.Vector3());
controls.target.copy(ctr);
camera.position.set(ctr.x, ctr.y, ctr.z);
controls.update();
initialFocused = true;
}
drawAxes();
// 后续帧只更新 mesh不触碰 camera.target
controls.update();
renderer.render(scene, camera);
labelRenderer.render(scene, camera);
applyView();
// applyAngles();
}
// 新增:根据两个输入框的度数,计算摄像机球坐标
function applyAngles() {
// 1) 解析当前角度输入
const azDeg = Number(document.getElementById('azimuth').value);
const poDeg = Number(document.getElementById('polar').value);
const az = THREE.MathUtils.degToRad(azDeg);
const po = THREE.MathUtils.degToRad(poDeg);
// 2) 取出并更新 OrbitControls 自己维护的 target
const target = controls.target; // **不要** clone()
// 3) 球面半径:相机到 target 的当前距离(保持不变)
const radius = camera.position.distanceTo(target);
// 4) 用球坐标公式计算新的相机位置
const sinP = Math.sin(po);
const cosP = Math.cos(po);
const sinA = Math.sin(az);
const cosA = Math.cos(az);
camera.position.set(
target.x + radius * sinP * cosA,
target.y + radius * cosP,
target.z + radius * sinP * sinA
);
// 5) 让相机正对 target
camera.lookAt(target);
// 6) 同步 OrbitControls 的内部状态一次,之后不要在本函数里重复调用
controls.update();
}

@ -0,0 +1,215 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>三维能级渲染 & 服务端生成 GIF</title>
<style>
html,
body {
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-family: sans-serif;
}
/* 多图渲染容器 */
#container {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: 100%;
height: 100vh;
box-sizing: border-box;
padding: 8px;
background: #fafafa;
overflow: auto;
}
/* 右侧配置栏 */
#controls {
position: absolute;
top: 10px;
right: 10px;
width: 320px;
max-height: 90vh;
overflow-y: auto;
background: rgba(255, 255, 255, 0.95);
padding: 10px;
border-radius: 4px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
z-index: 20;
}
#controls label {
display: block;
margin: 6px 0;
font-size: 13px;
}
#controls input[type="number"],
#controls input[type="date"],
#controls input[type="time"],
#controls select {
width: 100px;
margin-left: 4px;
}
#controls input[type="file"] {
width: 200px;
}
.time-group {
display: flex;
gap: 4px;
margin: 8px 0;
}
/* 单个小视图 */
.chart-box {
position: relative;
width: 480px;
height: 360px;
margin: 8px;
border: 1px solid #ccc;
background: #fff;
}
/* 加载遮罩 */
#loading {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.8);
display: none;
align-items: center;
justify-content: center;
flex-direction: column;
color: #fff;
z-index: 30;
}
#loading-bar {
width: 300px;
height: 20px;
background: #333;
border-radius: 10px;
overflow: hidden;
margin-top: 10px;
}
#loading-inner {
width: 0;
height: 100%;
background: #4caf50;
transition: width .2s;
}
</style>
<!-- importmap 和 html2canvas -->
<script type="importmap">
{
"imports": {
"three": "/three/build/three.module.js",
"three/examples/jsm/": "/three/examples/jsm/"
}
}
</script>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
</head>
<body>
时间和体积显示
<div id="timeStamp" style="position:absolute;top:10px;left:10px;
padding:4px 8px;background:rgba(0,0,0,0.5);color:#fff;z-index:50;">—</div>
<div id="volume" style="position:absolute;top:50px;left:10px;
padding:4px 8px;background:rgba(0,0,0,0.5);color:#fff;z-index:50;">—</div>
<!-- 多图渲染区 -->
<div id="container"></div>
<!-- 右侧配置栏 -->
<div id="controls">
<!-- —— 新增:多文件上传 & 列表 —— -->
<label>上传数据文件
<input type="file" id="uploadFiles" multiple accept=".csv,.xlsx,.txt,.pin"/>
</label>
<button id="uploadBtn">上传</button>
<hr/>
<label>服务器文件</label>
<div id="serverFiles"></div>
<hr/>
<!-- —— 原有控件 —— -->
<label>基准日期
<input id="baseDate" type="date" value="2013-04-01"/>
</label>
<label>基准时间
<input id="baseTime" type="time" step="1" value="00:00:00"/>
</label>
<label>层数
<input id="levels" type="number" value="20" min="10" max="500"/>
</label>
<label>网格分辨率
<input id="gridRes" type="number" value="3.0" min="1" step="1"/>
</label>
<label>τ 阈值
<input id="tau" type="number" value="0.1" min="0" max="1" step="0.1"/>
</label>
<label>透明度
<input id="meshOpacity" type="number" value="0.8" min="0" max="1" step="0.1"/>
</label>
<hr/>
<label>S₁
<input id="S1" type="number" value="3.0" step="0.1"/>
R₁ <input id="R1" type="number" value="30" step="1"/>
</label>
<label>S₂
<input id="S2" type="number" value="2.0" step="0.1"/>
R₂ <input id="R2" type="number" value="20" step="1"/>
</label>
<label>S₃
<input id="S3" type="number" value="1.0" step="0.1"/>
R₃ <input id="R3" type="number" value="10" step="1"/>
</label>
<hr/>
<label>x轴范围
<input id="x-min" type="number" value="-300"/> -
<input id="x-max" type="number" value="300"/>
</label>
<label>y轴范围
<input id="y-min" type="number" value="-300"/> -
<input id="y-max" type="number" value="300"/>
</label>
<label>z轴范围
<input id="z-min" type="number" value="-1000"/> -
<input id="z-max" type="number" value="-600"/>
</label>
<hr/>
<label>视角
<select id="viewSelect">
<option value="三维视角">三维视角</option>
<option value="主视图">主视图</option>
<option value="左视图">左视图</option>
<option value="右视图">右视图</option>
<option value="俯视图">俯视图</option>
</select>
</label>
<label>水平角Azimuth, °)
<input id="azimuth" type="number" value="0" step="1"/>
</label>
<label>俯仰角Polar, °)
<input id="polar" type="number" value="180" step="1"/>
</label>
<hr/>
<label>时间范围
<input id="startTime" type="number" value="0" min="0"/> -
<input id="endTime" type="number"/>
</label>
<label>时间间隔(分钟)
<input id="intervalMin" type="number" value="10" min="1"/>
</label>
<label>当前时间:
<span id="timeLabel"></span>
</label>
<div class="time-group">
<button id="apply">渲染</button>
<button id="play">播放</button>
<button id="stop">停止</button>
<button id="record">录制并下载 GIF</button>
</div>
</div>
<!-- 模块脚本 -->
<script type="module" src="../js/iso_scatter.js"></script>
</body>
</html>

@ -0,0 +1,14 @@
# http://editorconfig.org
root = true
[*]
end_of_line = lf
insert_final_newline = true
[*.{js,ts,html}]
charset = utf-8
indent_style = tab
[*.{js,ts}]
trim_trailing_whitespace = true

@ -0,0 +1,88 @@
{
"root": true,
"env": {
"browser": true,
"node": true,
"es2018": true
},
"parserOptions": {
"ecmaVersion": 2018,
"sourceType": "module"
},
"extends": [
"mdcs",
"plugin:compat/recommended"
],
"plugins": [
"html",
"import"
],
"settings": {
"polyfills": [
"WebGL2RenderingContext"
]
},
"globals": {
"__THREE_DEVTOOLS__": "readonly",
"potpack": "readonly",
"fflate": "readonly",
"Stats": "readonly",
"XRWebGLBinding": "readonly",
"XRWebGLLayer": "readonly",
"GPUShaderStage": "readonly",
"GPUBufferUsage": "readonly",
"GPUTextureUsage": "readonly",
"GPUTexture": "readonly",
"GPUMapMode": "readonly",
"QUnit": "readonly",
"Ammo": "readonly",
"XRRigidTransform": "readonly",
"XRMediaBinding": "readonly",
"CodeMirror": "readonly",
"esprima": "readonly",
"jsonlint": "readonly",
"VideoFrame": "readonly",
"VideoDecoder": "readonly",
"Float16Array": "readonly"
},
"rules": {
"no-throw-literal": [
"error"
],
"quotes": [
"error",
"single"
],
"prefer-const": [
"error",
{
"destructuring": "any",
"ignoreReadBeforeAssign": false
}
],
"no-irregular-whitespace": [
"error"
],
"no-duplicate-imports": [
"error"
],
"prefer-spread": "error",
"valid-jsdoc": [
"error",
{
"requireReturn": false,
"requireReturnType": true,
"requireParamDescription": false,
"requireReturnDescription": false,
"requireParamType": true,
"preferType": {
"Any": "any",
"Boolean": "boolean",
"Number": "number",
"object": "Object",
"String": "string"
}
}
]
}
}

@ -0,0 +1,3 @@
# Set the default behavior, in case people don't have core.autocrlf set.
* text=auto

@ -0,0 +1,76 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at hello@mrdoob.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq

@ -0,0 +1,79 @@
# Contribution
## Introduction
It is assumed that you know a little about Node.js and Git. If not, [here's some help to get started with Git](https://help.github.com/en/github/using-git) and [heres some help to get started with Node.js.](https://nodejs.org/en/docs/guides/getting-started-guide/)
* Install [Node.js](https://nodejs.org/)
* Install [Git](https://git-scm.com/)
* [Fork](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) three.js
* Open your OSs terminal
* Change into the directory youd like
* Clone your forked repo
git clone https://github.com/[yourgithubname]/three.js.git
* Go into the three.js directory.
cd ./three.js
* Install the dependencies
npm install
## Next Steps
As per the npm standard, start is the place to begin the package.
npm start
This script will start a local server similar to [threejs.org](https://threejs.org/), but instead will be hosted on your local machine. Browse to https://localhost:8080/ to check it out. It also automatically creates the `build/three.module.js` script anytime there is a change `src` directory.
Next scripts run all the appropriate testing.
- `npm run test` - Lint testing and unit testing (individually being `npm run lint` and `npm run test-unit`)
- `npm run test-e2e` - E2E testing. This one can take quite a long time and installs ~200 MB Chromium browser - it is primarily intended to be run only by GitHub Actions
The linting is there to keep a consistent code style across all of the code and the testing is there to help catch bugs and check that the code behaves as expected. It is important that neither of these steps comes up with any errors due to your changes.
Most linting errors can be fixed automatically by running
npm run lint-fix
If youd like to make a build of the source files (e.g. `build/three.module.js`) run:
npm run build
## Making changes
When youve decided to make changes, start with the following:
* Update your local repo
git pull https://github.com/mrdoob/three.js.git
git push
* Make a new branch from the dev branch
git checkout dev
git branch [mychangesbranch]
git checkout [mychangesbranch]
* Add your changes to your commit.
* Push the changes to your forked repo.
* Open a Pull Request (PR)
## Important notes:
* Don't include any build files in your commit.
* Not all new features will need a new example. Simpler features could be incorporated into an existing example. Bigger features may be asked to add an example demonstrating the feature.
* Making changes may require changes to the documentation. To update the docs in other languages, simply copy the English to begin with.
* It's good to also add an example and screenshot for it, for showing how it's used and for end-to-end testing.
* If you modify existing code, run relevant examples to check they didn't break and there wasn't performance regress.
* If you add some assets for the examples (models, textures, sounds, etc), make sure they have a proper license allowing for their use here, less restrictive the better. It is unlikely for large assets to be accepted.
* If some issue is relevant to the patch/feature, please mention it with a hash (e.g. #2774) in a commit message to get cross-reference in GitHub.
* If the end-to-end test failed and you are sure that all is correct, follow the instructions it outputs.
* Once done with a patch/feature do not add more commits to a feature branch.
* Create separate branches per patch or feature.
* If you make a PR but it is not actually ready to be pulled into the dev branch then please [convert it to a draft PR](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/changing-the-stage-of-a-pull-request#converting-a-pull-request-to-a-draft).
This project is currently contributed mostly via everyone's spare time. Please keep that in mind as it may take some time for the appropriate feedback to get to you. If you are unsure about adding a new feature, it might be better to ask first to see whether other people think it's a good idea.

@ -0,0 +1,3 @@
# These are supported funding model platforms
github: [mrdoob, HumanInteractive, donmccurdy, gkjohnson, WestLangley]

@ -0,0 +1,89 @@
name: Bug Report
description: File a reproducible bug or regression.
body:
- type: textarea
id: description
attributes:
label: Description
description: A clear and concise description of what the bug is.
validations:
required: true
- type: textarea
id: repro
attributes:
label: Reproduction steps
description: How do you trigger this bug? Please walk us through it step by step.
value: |
1.
2.
3.
validations:
required: true
- type: textarea
id: code
attributes:
label: Code
value: |
```js
// code goes here
```
validations:
required: true
- type: textarea
id: example
attributes:
label: Live example
value: |
* [jsfiddle-latest-release WebGLRenderer](https://jsfiddle.net/3mrkqyea/)
* [jsfiddle-dev WebGLRenderer](https://jsfiddle.net/gcqx26jv/)
* [jsfiddle-latest-release WebGPURenderer](https://jsfiddle.net/mnqr9oj0/)
* [jsfiddle-dev WebGPURenderer](https://jsfiddle.net/xno7bmw0/)
validations:
required: true
- type: textarea
id: screenshots
attributes:
label: Screenshots
description: If applicable, add screenshots to help explain your problem (drag and drop the image).
validations:
required: false
- type: input
id: version
attributes:
label: Version
description: What version of the library are you using?
placeholder: r
validations:
required: true
- type: dropdown
id: device
attributes:
label: Device
multiple: true
options:
- Desktop
- Mobile
- Headset
- type: dropdown
id: browser
attributes:
label: Browser
multiple: true
options:
- Chrome
- Firefox
- Safari
- Edge
- Quest Browser
- type: dropdown
id: os
attributes:
label: OS
multiple: true
options:
- Windows
- MacOS
- Linux
- ChromeOS
- Android
- iOS

@ -0,0 +1,5 @@
blank_issues_enabled: false
contact_links:
- name: Help and Support
url: https://discourse.threejs.org/
about: Please use the forum if you have questions or need help.

@ -0,0 +1,34 @@
name: Feature request
description: Suggest an idea for the project.
body:
- type: textarea
id: description
attributes:
label: Description
description: Is your feature request related to a problem? Please describe.
placeholder: A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
validations:
required: true
- type: textarea
id: solution
attributes:
label: Solution
description: Describe the solution you'd like.
placeholder: A clear and concise description of what you want to happen.
validations:
required: true
- type: textarea
id: alternatives
attributes:
label: Alternatives
description: Describe alternatives you've considered.
placeholder: A clear and concise description of any alternative solutions or features you've considered.
validations:
required: true
- type: textarea
id: additional
attributes:
label: Additional context
description: Add any other context about the feature request here.
validations:
required: false

@ -0,0 +1,9 @@
paths-ignore:
- "docs/prettify/**/*.*"
- "editor/js/libs/**/*.*"
- "examples/jsm/libs/**/*.*"
- "examples/jsm/loaders/ifc/**/*.*"
- "build/*.*"
- "manual/3rdparty/**/*.*"
- "utils/docs/template/static/scripts/fuse/**/*.*"
- "utils/docs/template/static/scripts/prettify/**/*.*"

@ -0,0 +1,9 @@
Related issue: #XXXX
**Description**
A clear and concise description of what the problem was and how this pull request solves it.
<!-- Remove the line below if is not relevant -->
*This contribution is funded by [Example](https://example.com)*

@ -0,0 +1,23 @@
{
"extends": [
"config:base",
":disableDependencyDashboard",
"helpers:pinGitHubActionDigests"
],
"timezone": "Asia/Tokyo",
"schedule": ["after 1am and before 7am every monday"],
"packageRules": [
{
"matchDepTypes": ["devDependencies"],
"matchUpdateTypes": ["patch", "minor", "pin", "digest"],
"groupName": "devDependencies (non-major)",
"automerge": true
},
{
"description": "ESLint v9 requires flat configs, not yet supported by our plugins. See https://github.com/mrdoob/three.js/pull/28354#issuecomment-2106528332",
"matchPackageNames": ["eslint"],
"matchUpdateTypes": ["major"],
"enabled": false
}
]
}

@ -0,0 +1,114 @@
name: CI
on:
pull_request:
paths-ignore:
- 'build/**'
- 'docs/**'
- 'files/**'
permissions:
contents: read
jobs:
lint:
name: Lint testing
runs-on: ubuntu-latest
steps:
- name: Git checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
- name: Install Node
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: === Lint testing ===
run: npm run lint
unit:
name: Unit testing
runs-on: ubuntu-latest
steps:
- name: Git checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
- name: Install Node
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: === Unit testing ===
run: npm run test-unit
circular:
name: Circular dependencies testing
runs-on: ubuntu-latest
steps:
- name: Git checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
- name: Install Node
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: === Circular dependencies testing ===
run: npm run test-circular-deps
e2e:
name: E2E testing
runs-on: ${{ matrix.os }}
timeout-minutes: 20
strategy:
fail-fast: false
matrix:
os: [ windows-latest ]
CI: [ 0, 1, 2, 3 ]
env:
CI: ${{ matrix.CI }}
steps:
- name: Git checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
- name: Install Node
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build-module
- name: === E2E testing ===
run: npm run test-e2e
- name: Upload output screenshots
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
if: always()
with:
name: Output screenshots-${{ matrix.os }}-${{ matrix.CI }}
path: test/e2e/output-screenshots
if-no-files-found: ignore
e2e-cov:
name: Examples ready for release
runs-on: ubuntu-latest
steps:
- name: Git checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
- name: Install Node
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: 18
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: === Examples ready for release ===
run: npm run test-e2e-cov

@ -0,0 +1,45 @@
name: "CodeQL"
on:
push:
branches: [ "dev" ]
pull_request:
# The branches below must be a subset of the branches above
branches: [ "dev" ]
schedule:
- cron: '29 23 * * 0'
workflow_dispatch:
jobs:
analyze:
name: Analyze
runs-on: ubuntu-latest
permissions:
actions: read
contents: read
security-events: write
strategy:
fail-fast: false
matrix:
language: [ 'javascript' ]
steps:
- name: Checkout repository
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
# Initializes the CodeQL tools for scanning.
- name: Initialize CodeQL
uses: github/codeql-action/init@39edc492dbe16b1465b0cafca41432d857bdb31a # v3
with:
languages: ${{ matrix.language }}
config-file: ./.github/codeql-config.yml
queries: security-and-quality
- name: Autobuild
uses: github/codeql-action/autobuild@39edc492dbe16b1465b0cafca41432d857bdb31a # v3
- name: Perform CodeQL Analysis
uses: github/codeql-action/analyze@39edc492dbe16b1465b0cafca41432d857bdb31a # v3
with:
category: "/language:${{matrix.language}}"

@ -0,0 +1,67 @@
name: Read size
on:
pull_request:
paths:
- 'src/**'
- 'package.json'
- 'utils/build/**'
# This workflow runs in a read-only environment. We can safely checkout
# the PR code here.
# Reference:
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
permissions:
contents: read
jobs:
read-size:
name: Tree-shaking
runs-on: ubuntu-latest
steps:
- name: Git checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
- name: Install Node
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: 20
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: === Test tree-shaking ===
run: npm run test-treeshake
- name: Read bundle sizes
id: read-size
run: |
WEBGL_FILESIZE=$(stat --format=%s build/three.module.min.js)
gzip -k build/three.module.min.js
WEBGL_FILESIZE_GZIP=$(stat --format=%s build/three.module.min.js.gz)
WEBGL_TREESHAKEN=$(stat --format=%s test/treeshake/index.bundle.min.js)
gzip -k test/treeshake/index.bundle.min.js
WEBGL_TREESHAKEN_GZIP=$(stat --format=%s test/treeshake/index.bundle.min.js.gz)
WEBGPU_FILESIZE=$(stat --format=%s build/three.webgpu.min.js)
gzip -k build/three.webgpu.min.js
WEBGPU_FILESIZE_GZIP=$(stat --format=%s build/three.webgpu.min.js.gz)
WEBGPU_TREESHAKEN=$(stat --format=%s test/treeshake/index.webgpu.bundle.min.js)
gzip -k test/treeshake/index.webgpu.bundle.min.js
WEBGPU_TREESHAKEN_GZIP=$(stat --format=%s test/treeshake/index.webgpu.bundle.min.js.gz)
WEBGPU_NODES_FILESIZE=$(stat --format=%s build/three.webgpu.nodes.min.js)
gzip -k build/three.webgpu.nodes.min.js
WEBGPU_NODES_FILESIZE_GZIP=$(stat --format=%s build/three.webgpu.nodes.min.js.gz)
WEBGPU_NODES_TREESHAKEN=$(stat --format=%s test/treeshake/index.webgpu.nodes.bundle.min.js)
gzip -k test/treeshake/index.webgpu.nodes.bundle.min.js
WEBGPU_NODES_TREESHAKEN_GZIP=$(stat --format=%s test/treeshake/index.webgpu.nodes.bundle.min.js.gz)
PR=${{ github.event.pull_request.number }}
# write the output in a json file to upload it as artifact
node -pe "JSON.stringify({ filesize: $WEBGL_FILESIZE, gzip: $WEBGL_FILESIZE_GZIP, treeshaken: $WEBGL_TREESHAKEN, treeshakenGzip: $WEBGL_TREESHAKEN_GZIP, filesize2: $WEBGPU_FILESIZE, gzip2: $WEBGPU_FILESIZE_GZIP, treeshaken2: $WEBGPU_TREESHAKEN, treeshakenGzip2: $WEBGPU_TREESHAKEN_GZIP, filesize3: $WEBGPU_NODES_FILESIZE, gzip3: $WEBGPU_NODES_FILESIZE_GZIP, treeshaken3: $WEBGPU_NODES_TREESHAKEN, treeshakenGzip3: $WEBGPU_NODES_TREESHAKEN_GZIP, pr: $PR })" > sizes.json
- name: Upload artifact
uses: actions/upload-artifact@ea165f8d65b6e75b540449e92b4886f43607fa02 # v4
with:
name: sizes
path: sizes.json

@ -0,0 +1,272 @@
name: Report size
on:
workflow_run:
workflows: ["Read size"]
types:
- completed
# This workflow needs to be run with "pull-requests: write" permissions to
# be able to comment on the pull request. We can't checkout the PR code
# in this workflow.
# Reference:
# https://securitylab.github.com/research/github-actions-preventing-pwn-requests/
permissions:
pull-requests: write
jobs:
report-size:
name: Comment on PR
runs-on: ubuntu-latest
if: github.event.workflow_run.event == 'pull_request' &&
github.event.workflow_run.conclusion == 'success'
steps:
- name: Log GitHub context
env:
GITHUB_CONTEXT: ${{ toJson(github) }}
run: echo "$GITHUB_CONTEXT"
# Using actions/download-artifact doesn't work here
# https://github.com/actions/download-artifact/issues/60
- name: Download artifact
uses: actions/github-script@60a0d83039c74a4aee543508d2ffcb1c3799cdea # v7
id: download-artifact
with:
result-encoding: string
script: |
const fs = require('fs/promises');
const artifacts = await github.rest.actions.listWorkflowRunArtifacts({
owner: context.repo.owner,
repo: context.repo.repo,
run_id: context.payload.workflow_run.id,
});
const matchArtifact = artifacts.data.artifacts.find((artifact) => artifact.name === 'sizes');
const download = await github.rest.actions.downloadArtifact({
owner: context.repo.owner,
repo: context.repo.repo,
artifact_id: matchArtifact.id,
archive_format: 'zip',
});
await fs.writeFile('sizes.zip', Buffer.from(download.data));
await exec.exec('unzip sizes.zip');
const json = await fs.readFile('sizes.json', 'utf8');
return json;
# This runs on the base branch of the PR, meaning "dev"
- name: Git checkout
uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4
- name: Install Node
uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
with:
node-version: 20
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: === Test tree-shaking ===
run: npm run test-treeshake
- name: Read sizes
id: read-size
run: |
WEBGL_FILESIZE_BASE=$(stat --format=%s build/three.module.min.js)
gzip -k build/three.module.min.js
WEBGL_FILESIZE_BASE_GZIP=$(stat --format=%s build/three.module.min.js.gz)
WEBGL_TREESHAKEN_BASE=$(stat --format=%s test/treeshake/index.bundle.min.js)
gzip -k test/treeshake/index.bundle.min.js
WEBGL_TREESHAKEN_BASE_GZIP=$(stat --format=%s test/treeshake/index.bundle.min.js.gz)
WEBGPU_FILESIZE_BASE=$(stat --format=%s build/three.webgpu.min.js)
gzip -k build/three.webgpu.min.js
WEBGPU_FILESIZE_BASE_GZIP=$(stat --format=%s build/three.webgpu.min.js.gz)
WEBGPU_TREESHAKEN_BASE=$(stat --format=%s test/treeshake/index.webgpu.bundle.min.js)
gzip -k test/treeshake/index.webgpu.bundle.min.js
WEBGPU_TREESHAKEN_BASE_GZIP=$(stat --format=%s test/treeshake/index.webgpu.bundle.min.js.gz)
WEBGPU_NODES_FILESIZE_BASE=$(stat --format=%s build/three.webgpu.nodes.min.js)
gzip -k build/three.webgpu.nodes.min.js
WEBGPU_NODES_FILESIZE_BASE_GZIP=$(stat --format=%s build/three.webgpu.nodes.min.js.gz)
WEBGPU_NODES_TREESHAKEN_BASE=$(stat --format=%s test/treeshake/index.webgpu.nodes.bundle.min.js)
gzip -k test/treeshake/index.webgpu.nodes.bundle.min.js
WEBGPU_NODES_TREESHAKEN_BASE_GZIP=$(stat --format=%s test/treeshake/index.webgpu.nodes.bundle.min.js.gz)
# log to console
echo "WEBGL_FILESIZE_BASE=$WEBGL_FILESIZE_BASE"
echo "WEBGL_FILESIZE_BASE_GZIP=$WEBGL_FILESIZE_BASE_GZIP"
echo "WEBGL_TREESHAKEN_BASE=$WEBGL_TREESHAKEN_BASE"
echo "WEBGL_TREESHAKEN_BASE_GZIP=$WEBGL_TREESHAKEN_BASE_GZIP"
echo "WEBGL_FILESIZE_BASE=$WEBGL_FILESIZE_BASE" >> $GITHUB_OUTPUT
echo "WEBGL_FILESIZE_BASE_GZIP=$WEBGL_FILESIZE_BASE_GZIP" >> $GITHUB_OUTPUT
echo "WEBGL_TREESHAKEN_BASE=$WEBGL_TREESHAKEN_BASE" >> $GITHUB_OUTPUT
echo "WEBGL_TREESHAKEN_BASE_GZIP=$WEBGL_TREESHAKEN_BASE_GZIP" >> $GITHUB_OUTPUT
echo "WEBGPU_FILESIZE_BASE=$WEBGPU_FILESIZE_BASE"
echo "WEBGPU_FILESIZE_BASE_GZIP=$WEBGPU_FILESIZE_BASE_GZIP"
echo "WEBGPU_TREESHAKEN_BASE=$WEBGPU_TREESHAKEN_BASE"
echo "WEBGPU_TREESHAKEN_BASE_GZIP=$WEBGPU_TREESHAKEN_BASE_GZIP"
echo "WEBGPU_FILESIZE_BASE=$WEBGPU_FILESIZE_BASE" >> $GITHUB_OUTPUT
echo "WEBGPU_FILESIZE_BASE_GZIP=$WEBGPU_FILESIZE_BASE_GZIP" >> $GITHUB_OUTPUT
echo "WEBGPU_TREESHAKEN_BASE=$WEBGPU_TREESHAKEN_BASE" >> $GITHUB_OUTPUT
echo "WEBGPU_TREESHAKEN_BASE_GZIP=$WEBGPU_TREESHAKEN_BASE_GZIP" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_FILESIZE_BASE=$WEBGPU_NODES_FILESIZE_BASE"
echo "WEBGPU_NODES_FILESIZE_BASE_GZIP=$WEBGPU_NODES_FILESIZE_BASE_GZIP"
echo "WEBGPU_NODES_TREESHAKEN_BASE=$WEBGPU_NODES_TREESHAKEN_BASE"
echo "WEBGPU_NODES_TREESHAKEN_BASE_GZIP=$WEBGPU_NODES_TREESHAKEN_BASE_GZIP"
echo "WEBGPU_NODES_FILESIZE_BASE=$WEBGPU_NODES_FILESIZE_BASE" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_FILESIZE_BASE_GZIP=$WEBGPU_NODES_FILESIZE_BASE_GZIP" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_TREESHAKEN_BASE=$WEBGPU_NODES_TREESHAKEN_BASE" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_TREESHAKEN_BASE_GZIP=$WEBGPU_NODES_TREESHAKEN_BASE_GZIP" >> $GITHUB_OUTPUT
- name: Format sizes
id: format
# It's important these are passed as env variables.
# https://securitylab.github.com/research/github-actions-untrusted-input/
env:
WEBGL_FILESIZE: ${{ fromJSON(steps.download-artifact.outputs.result).filesize }}
WEBGL_FILESIZE_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).gzip }}
WEBGL_FILESIZE_BASE: ${{ steps.read-size.outputs.WEBGL_FILESIZE_BASE }}
WEBGL_FILESIZE_BASE_GZIP: ${{ steps.read-size.outputs.WEBGL_FILESIZE_BASE_GZIP }}
WEBGL_TREESHAKEN: ${{ fromJSON(steps.download-artifact.outputs.result).treeshaken }}
WEBGL_TREESHAKEN_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).treeshakenGzip }}
WEBGL_TREESHAKEN_BASE: ${{ steps.read-size.outputs.WEBGL_TREESHAKEN_BASE }}
WEBGL_TREESHAKEN_BASE_GZIP: ${{ steps.read-size.outputs.WEBGL_TREESHAKEN_BASE_GZIP }}
WEBGPU_FILESIZE: ${{ fromJSON(steps.download-artifact.outputs.result).filesize2 }}
WEBGPU_FILESIZE_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).gzip2 }}
WEBGPU_FILESIZE_BASE: ${{ steps.read-size.outputs.WEBGPU_FILESIZE_BASE }}
WEBGPU_FILESIZE_BASE_GZIP: ${{ steps.read-size.outputs.WEBGPU_FILESIZE_BASE_GZIP }}
WEBGPU_TREESHAKEN: ${{ fromJSON(steps.download-artifact.outputs.result).treeshaken2 }}
WEBGPU_TREESHAKEN_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).treeshakenGzip2 }}
WEBGPU_TREESHAKEN_BASE: ${{ steps.read-size.outputs.WEBGPU_TREESHAKEN_BASE }}
WEBGPU_TREESHAKEN_BASE_GZIP: ${{ steps.read-size.outputs.WEBGPU_TREESHAKEN_BASE_GZIP }}
WEBGPU_NODES_FILESIZE: ${{ fromJSON(steps.download-artifact.outputs.result).filesize3 }}
WEBGPU_NODES_FILESIZE_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).gzip3 }}
WEBGPU_NODES_FILESIZE_BASE: ${{ steps.read-size.outputs.WEBGPU_NODES_FILESIZE_BASE }}
WEBGPU_NODES_FILESIZE_BASE_GZIP: ${{ steps.read-size.outputs.WEBGPU_NODES_FILESIZE_BASE_GZIP }}
WEBGPU_NODES_TREESHAKEN: ${{ fromJSON(steps.download-artifact.outputs.result).treeshaken3 }}
WEBGPU_NODES_TREESHAKEN_GZIP: ${{ fromJSON(steps.download-artifact.outputs.result).treeshakenGzip3 }}
WEBGPU_NODES_TREESHAKEN_BASE: ${{ steps.read-size.outputs.WEBGPU_NODES_TREESHAKEN_BASE }}
WEBGPU_NODES_TREESHAKEN_BASE_GZIP: ${{ steps.read-size.outputs.WEBGPU_NODES_TREESHAKEN_BASE_GZIP }}
run: |
WEBGL_FILESIZE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_FILESIZE")
WEBGL_FILESIZE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_FILESIZE_GZIP")
WEBGL_FILESIZE_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_FILESIZE_BASE")
WEBGL_FILESIZE_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_FILESIZE_BASE_GZIP")
WEBGL_FILESIZE_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGL_FILESIZE" "$WEBGL_FILESIZE_BASE")
WEBGL_FILESIZE_DIFF_GZIP=$(node ./test/treeshake/utils/format-diff.js "$WEBGL_FILESIZE_GZIP" "$WEBGL_FILESIZE_BASE_GZIP")
WEBGL_TREESHAKEN_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_TREESHAKEN")
WEBGL_TREESHAKEN_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_TREESHAKEN_GZIP")
WEBGL_TREESHAKEN_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_TREESHAKEN_BASE")
WEBGL_TREESHAKEN_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGL_TREESHAKEN_BASE_GZIP")
WEBGL_TREESHAKEN_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGL_TREESHAKEN" "$WEBGL_TREESHAKEN_BASE")
WEBGL_TREESHAKEN_DIFF_GZIP=$(node ./test/treeshake/utils/format-diff.js "$WEBGL_TREESHAKEN_GZIP" "$WEBGL_TREESHAKEN_BASE_GZIP")
WEBGPU_FILESIZE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_FILESIZE")
WEBGPU_FILESIZE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_FILESIZE_GZIP")
WEBGPU_FILESIZE_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_FILESIZE_BASE")
WEBGPU_FILESIZE_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_FILESIZE_BASE_GZIP")
WEBGPU_FILESIZE_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_FILESIZE" "$WEBGPU_FILESIZE_BASE")
WEBGPU_FILESIZE_DIFF_GZIP=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_FILESIZE_GZIP" "$WEBGPU_FILESIZE_BASE_GZIP")
WEBGPU_TREESHAKEN_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_TREESHAKEN")
WEBGPU_TREESHAKEN_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_TREESHAKEN_GZIP")
WEBGPU_TREESHAKEN_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_TREESHAKEN_BASE")
WEBGPU_TREESHAKEN_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_TREESHAKEN_BASE_GZIP")
WEBGPU_TREESHAKEN_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_TREESHAKEN" "$WEBGPU_TREESHAKEN_BASE")
WEBGPU_TREESHAKEN_DIFF_GZIP=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_TREESHAKEN_GZIP" "$WEBGPU_TREESHAKEN_BASE_GZIP")
WEBGPU_NODES_FILESIZE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_NODES_FILESIZE")
WEBGPU_NODES_FILESIZE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_NODES_FILESIZE_GZIP")
WEBGPU_NODES_FILESIZE_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_NODES_FILESIZE_BASE")
WEBGPU_NODES_FILESIZE_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_NODES_FILESIZE_BASE_GZIP")
WEBGPU_NODES_FILESIZE_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_NODES_FILESIZE" "$WEBGPU_NODES_FILESIZE_BASE")
WEBGPU_NODES_FILESIZE_DIFF_GZIP=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_NODES_FILESIZE_GZIP" "$WEBGPU_NODES_FILESIZE_BASE_GZIP")
WEBGPU_NODES_TREESHAKEN_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_NODES_TREESHAKEN")
WEBGPU_NODES_TREESHAKEN_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_NODES_TREESHAKEN_GZIP")
WEBGPU_NODES_TREESHAKEN_BASE_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_NODES_TREESHAKEN_BASE")
WEBGPU_NODES_TREESHAKEN_BASE_GZIP_FORM=$(node ./test/treeshake/utils/format-size.js "$WEBGPU_NODES_TREESHAKEN_BASE_GZIP")
WEBGPU_NODES_TREESHAKEN_DIFF=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_NODES_TREESHAKEN" "$WEBGPU_NODES_TREESHAKEN_BASE")
WEBGPU_NODES_TREESHAKEN_DIFF_GZIP=$(node ./test/treeshake/utils/format-diff.js "$WEBGPU_NODES_TREESHAKEN_GZIP" "$WEBGPU_NODES_TREESHAKEN_BASE_GZIP")
echo "WEBGL_FILESIZE=$WEBGL_FILESIZE_FORM" >> $GITHUB_OUTPUT
echo "WEBGL_FILESIZE_GZIP=$WEBGL_FILESIZE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGL_FILESIZE_BASE=$WEBGL_FILESIZE_BASE_FORM" >> $GITHUB_OUTPUT
echo "WEBGL_FILESIZE_BASE_GZIP=$WEBGL_FILESIZE_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGL_FILESIZE_DIFF=$WEBGL_FILESIZE_DIFF" >> $GITHUB_OUTPUT
echo "WEBGL_FILESIZE_DIFF_GZIP=$WEBGL_FILESIZE_DIFF_GZIP" >> $GITHUB_OUTPUT
echo "WEBGL_TREESHAKEN=$WEBGL_TREESHAKEN_FORM" >> $GITHUB_OUTPUT
echo "WEBGL_TREESHAKEN_GZIP=$WEBGL_TREESHAKEN_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGL_TREESHAKEN_BASE=$WEBGL_TREESHAKEN_BASE_FORM" >> $GITHUB_OUTPUT
echo "WEBGL_TREESHAKEN_BASE_GZIP=$WEBGL_TREESHAKEN_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGL_TREESHAKEN_DIFF=$WEBGL_TREESHAKEN_DIFF" >> $GITHUB_OUTPUT
echo "WEBGL_TREESHAKEN_DIFF_GZIP=$WEBGL_TREESHAKEN_DIFF_GZIP" >> $GITHUB_OUTPUT
echo "WEBGPU_FILESIZE=$WEBGPU_FILESIZE_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_FILESIZE_GZIP=$WEBGPU_FILESIZE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_FILESIZE_BASE=$WEBGPU_FILESIZE_BASE_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_FILESIZE_BASE_GZIP=$WEBGPU_FILESIZE_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_FILESIZE_DIFF=$WEBGPU_FILESIZE_DIFF" >> $GITHUB_OUTPUT
echo "WEBGPU_FILESIZE_DIFF_GZIP=$WEBGPU_FILESIZE_DIFF_GZIP" >> $GITHUB_OUTPUT
echo "WEBGPU_TREESHAKEN=$WEBGPU_TREESHAKEN_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_TREESHAKEN_GZIP=$WEBGPU_TREESHAKEN_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_TREESHAKEN_BASE=$WEBGPU_TREESHAKEN_BASE_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_TREESHAKEN_BASE_GZIP=$WEBGPU_TREESHAKEN_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_TREESHAKEN_DIFF=$WEBGPU_TREESHAKEN_DIFF" >> $GITHUB_OUTPUT
echo "WEBGPU_TREESHAKEN_DIFF_GZIP=$WEBGPU_TREESHAKEN_DIFF_GZIP" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_FILESIZE=$WEBGPU_NODES_FILESIZE_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_FILESIZE_GZIP=$WEBGPU_NODES_FILESIZE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_FILESIZE_BASE=$WEBGPU_NODES_FILESIZE_BASE_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_FILESIZE_BASE_GZIP=$WEBGPU_NODES_FILESIZE_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_FILESIZE_DIFF=$WEBGPU_NODES_FILESIZE_DIFF" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_FILESIZE_DIFF_GZIP=$WEBGPU_NODES_FILESIZE_DIFF_GZIP" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_TREESHAKEN=$WEBGPU_NODES_TREESHAKEN_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_TREESHAKEN_GZIP=$WEBGPU_NODES_TREESHAKEN_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_TREESHAKEN_BASE=$WEBGPU_NODES_TREESHAKEN_BASE_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_TREESHAKEN_BASE_GZIP=$WEBGPU_NODES_TREESHAKEN_BASE_GZIP_FORM" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_TREESHAKEN_DIFF=$WEBGPU_NODES_TREESHAKEN_DIFF" >> $GITHUB_OUTPUT
echo "WEBGPU_NODES_TREESHAKEN_DIFF_GZIP=$WEBGPU_NODES_TREESHAKEN_DIFF_GZIP" >> $GITHUB_OUTPUT
- name: Find existing comment
uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e # v3
id: find-comment
with:
issue-number: ${{ fromJSON(steps.download-artifact.outputs.result).pr }}
comment-author: 'github-actions[bot]'
body-includes: Bundle size
- name: Comment on PR
uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 # v4
with:
issue-number: ${{ fromJSON(steps.download-artifact.outputs.result).pr }}
comment-id: ${{ steps.find-comment.outputs.comment-id }}
edit-mode: replace
body: |
### 📦 Bundle size
_Full ESM build, minified and gzipped._
|| Before | After | Diff |
|:-:|:-:|:-:|:-:|
| WebGL | ${{ steps.format.outputs.WEBGL_FILESIZE_BASE }} <br> **${{ steps.format.outputs.WEBGL_FILESIZE_BASE_GZIP }}** | ${{ steps.format.outputs.WEBGL_FILESIZE }} <br> **${{ steps.format.outputs.WEBGL_FILESIZE_GZIP }}** | ${{ steps.format.outputs.WEBGL_FILESIZE_DIFF }} <br> **${{ steps.format.outputs.WEBGL_FILESIZE_DIFF_GZIP }}** |
| WebGPU | ${{ steps.format.outputs.WEBGPU_FILESIZE_BASE }} <br> **${{ steps.format.outputs.WEBGPU_FILESIZE_BASE_GZIP }}** | ${{ steps.format.outputs.WEBGPU_FILESIZE }} <br> **${{ steps.format.outputs.WEBGPU_FILESIZE_GZIP }}** | ${{ steps.format.outputs.WEBGPU_FILESIZE_DIFF }} <br> **${{ steps.format.outputs.WEBGPU_FILESIZE_DIFF_GZIP }}** |
| WebGPU Nodes | ${{ steps.format.outputs.WEBGPU_NODES_FILESIZE_BASE }} <br> **${{ steps.format.outputs.WEBGPU_NODES_FILESIZE_BASE_GZIP }}** | ${{ steps.format.outputs.WEBGPU_NODES_FILESIZE }} <br> **${{ steps.format.outputs.WEBGPU_NODES_FILESIZE_GZIP }}** | ${{ steps.format.outputs.WEBGPU_NODES_FILESIZE_DIFF }} <br> **${{ steps.format.outputs.WEBGPU_NODES_FILESIZE_DIFF_GZIP }}** |
### 🌳 Bundle size after tree-shaking
_Minimal build including a renderer, camera, empty scene, and dependencies._
|| Before | After | Diff |
|:-:|:-:|:-:|:-:|
| WebGL | ${{ steps.format.outputs.WEBGL_TREESHAKEN_BASE }} <br> **${{ steps.format.outputs.WEBGL_TREESHAKEN_BASE_GZIP }}** | ${{ steps.format.outputs.WEBGL_TREESHAKEN }} <br> **${{ steps.format.outputs.WEBGL_TREESHAKEN_GZIP }}** | ${{ steps.format.outputs.WEBGL_TREESHAKEN_DIFF }} <br> **${{ steps.format.outputs.WEBGL_TREESHAKEN_DIFF_GZIP }}** |
| WebGPU | ${{ steps.format.outputs.WEBGPU_TREESHAKEN_BASE }} <br> **${{ steps.format.outputs.WEBGPU_TREESHAKEN_BASE_GZIP }}** | ${{ steps.format.outputs.WEBGPU_TREESHAKEN }} <br> **${{ steps.format.outputs.WEBGPU_TREESHAKEN_GZIP }}** | ${{ steps.format.outputs.WEBGPU_TREESHAKEN_DIFF }} <br> **${{ steps.format.outputs.WEBGPU_TREESHAKEN_DIFF_GZIP }}** |
| WebGPU Nodes | ${{ steps.format.outputs.WEBGPU_NODES_TREESHAKEN_BASE }} <br> **${{ steps.format.outputs.WEBGPU_NODES_TREESHAKEN_BASE_GZIP }}** | ${{ steps.format.outputs.WEBGPU_NODES_TREESHAKEN }} <br> **${{ steps.format.outputs.WEBGPU_NODES_TREESHAKEN_GZIP }}** | ${{ steps.format.outputs.WEBGPU_NODES_TREESHAKEN_DIFF }} <br> **${{ steps.format.outputs.WEBGPU_NODES_TREESHAKEN_DIFF_GZIP }}** |

23
three/.gitignore vendored

@ -0,0 +1,23 @@
.DS_Store
*.swp
.project
.idea/
.vscode/
npm-debug.log
.jshintrc
.vs/
test/unit/build
test/treeshake/index-src.bundle.min.js
test/treeshake/index.bundle.js
test/treeshake/index.bundle.min.js
test/treeshake/index.webgpu.bundle.js
test/treeshake/index.webgpu.bundle.min.js
test/treeshake/index.webgpu.nodes.bundle.js
test/treeshake/index.webgpu.nodes.bundle.min.js
test/treeshake/stats.html
test/e2e/chromium
test/e2e/output-screenshots
**/node_modules
**/docs_new

@ -0,0 +1,21 @@
The MIT License
Copyright © 2010-2025 three.js authors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

@ -0,0 +1,86 @@
# three.js
[![NPM Package][npm]][npm-url]
[![Build Size][build-size]][build-size-url]
[![NPM Downloads][npm-downloads]][npmtrends-url]
[![Discord][discord]][discord-url]
[![DeepWiki][deepwiki]][deepwiki-url]
#### JavaScript 3D library
The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds only include WebGL and WebGPU renderers but SVG and CSS3D renderers are also available as addons.
[Examples](https://threejs.org/examples/) &mdash;
[Docs](https://threejs.org/docs/) &mdash;
[Manual](https://threejs.org/manual/) &mdash;
[Wiki](https://github.com/mrdoob/three.js/wiki) &mdash;
[Migrating](https://github.com/mrdoob/three.js/wiki/Migration-Guide) &mdash;
[Questions](https://stackoverflow.com/questions/tagged/three.js) &mdash;
[Forum](https://discourse.threejs.org/) &mdash;
[Discord](https://discord.gg/56GBJwAnUS)
### Usage
This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a `WebGL` renderer for the scene and camera, and it adds that viewport to the `document.body` element. Finally, it animates the cube within the scene for the camera.
```javascript
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 );
}
```
If everything goes well, you should see [this](https://jsfiddle.net/v98k6oze/).
### Cloning this repository
Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the `depth` parameter to significantly reduce download size.
```sh
git clone --depth=1 https://github.com/mrdoob/three.js.git
```
### Change log
[Releases](https://github.com/mrdoob/three.js/releases)
[npm]: https://img.shields.io/npm/v/three
[npm-url]: https://www.npmjs.com/package/three
[build-size]: https://badgen.net/bundlephobia/minzip/three
[build-size-url]: https://bundlephobia.com/result?p=three
[npm-downloads]: https://img.shields.io/npm/dw/three
[npmtrends-url]: https://www.npmtrends.com/three
[discord]: https://img.shields.io/discord/685241246557667386
[discord-url]: https://discord.gg/56GBJwAnUS
[deepwiki]: https://deepwiki.com/badge.svg
[deepwiki-url]: https://deepwiki.com/mrdoob/three.js

@ -0,0 +1,18 @@
# Security Policy
If you have discovered a security vulnerability in this project, please report it
privately. **Do not disclose it as a public issue.** This gives us time to work with you
to fix the issue before public exposure, reducing the chance that the exploit will be
used before a patch is released.
You may submit the report in the following ways:
- Send an email to hello@mrdoob.com.
Please provide the following information in your report:
- A description of the vulnerability and its impact.
- How to reproduce the issue.
This project is maintained by volunteers on a reasonable-effort basis. As such,
we ask that you give us 90 days to work on a fix before public exposure.

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -0,0 +1,7 @@
Contributing to the documentation
=================================
- To link to the page for `ClassName`, use `[page:ClassName link title]` (or just `[page:ClassName]`). Use `[page:ClassName.memberName]` to link to a class member (a property or method) called `memberName` on the page for `ClassName`. You can write `[page:.memberName]` to link to a property or method called `memberName` on the same page.
- Use `[example:exampleName title]` (not just `[example:exampleName]`) to link to the example `threejs.org/examples/#exampleName`.
- Document a property by writing `<h3>[property:TypeName propertyName]</h3>`.
- Document a method using `<h3>[method:ReturnType methodName]</h3>`.

@ -0,0 +1,316 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
تقوم AnimationActions بجدولة أداء الرسوم المتحركة المخزنة في [page:AnimationClip AnimationClips].
<br /><br />
ملاحظة: يمكن ربط معظم أساليب AnimationAction.<br /><br />
للحصول على نظرة عامة حول العناصر المختلفة لنظام الرسوم المتحركة three.js ، راجع مقالة "نظام الحركات" في قسم "الخطوات التالية" من الدليل.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:AnimationMixer mixer], [param:AnimationClip clip], [param:Object3D localRoot] )</h3>
<p>
[page:AnimationMixer mixer] هو *AnimationMixer* الذي يتحكم فيه هذا الإجراء.<br />
[page:AnimationClip clip] هو *AnimationClip* الذي يحتفظ ببيانات الرسوم المتحركة لهذا الإجراء.<br />
[page:Object3D localRoot] هو الكائن الجذر الذي يتم تنفيذ هذا الإجراء عليه.<br /><br />
ملاحظة: بدلاً من استدعاء هذا المُنشئ مباشرةً ، يجب إنشاء AnimationAction برقم [page:AnimationMixer.clipAction] نظرًا لأن هذه الطريقة توفر التخزين المؤقت للحصول على أداء أفضل.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Boolean clampWhenFinished]</h3>
<p>
إذا تم ضبط *clampWhenFinished* على true ، فسيتم تلقائيًا إيقاف [page:.paused paused] للرسوم المتحركة مؤقتًا في إطارها الأخير.<br /><br />
إذا تم ضبط *clampWhenFinished* على false ، فسيتم تحويل [page:.enabled enabled] تلقائيًا إلى false عند انتهاء آخر حلقة من الإجراء ، بحيث لا يكون لهذا الإجراء أي تأثير آخر.<br /><br />
القيمة الافتراضية هو خطأ (false).<br /><br />
ملاحظة: *clampWhenFinished* ليس له أي تأثير إذا تم مقاطعة الإجراء (يكون له تأثير فقط إذا انتهت الحلقة الأخيرة بالفعل).
</p>
<h3>[property:Boolean enabled]</h3>
<p>
يؤدي تعيين *enabled* إلى *false* إلى تعطيل هذا الإجراء ، بحيث لا يكون له أي تأثير. الافتراضي هو *true*.<br /><br />
عند إعادة تمكين الإجراء ، يستمر الرسم المتحرك من وقته الحالي [page:.time time] (العدد *enabled* إلى *false* لا يعيد تعيين الإجراء).<br /><br />
ملاحظة: لا يؤدي إعداد *enabled* إلى *true* إلى إعادة تشغيل الرسوم المتحركة تلقائيًا. سيؤدي ضبط *enabled* إلى *true* إلى إعادة تشغيل الرسوم المتحركة فورًا فقط إذا تم استيفاء الشرط التالي:
[page:.paused paused] تحتوي قيمة *false* ، لم يتم إلغاء تنشيط هذا الإجراء في هذه الأثناء (بتنفيذ أمر [page:.stop stop] أو [page:.reset reset]) ، وليس [page:.weight weight] أو [page:.timeScale timeScale] يساوي 0.
</p>
<h3>[property:Number loop]</h3>
<p>
وضع التكرار (يمكن تغييره بـ [page:.setLoop setLoop]). الافتراضي هو [page:Animation THREE.LoopRepeat] (مع عدد لا نهائي من [page:.repetitions repetitions])<br /><br />
يجب أن يكون أحد هذه الثوابت:<br /><br />
[page:Animation THREE.LoopOnce] - تشغيل المقطع مرة واحدة ،<br />
[page:Animation THREE.LoopRepeat] - تشغيل المقطع مع العدد المختار من *التكرارات* ،
في كل مرة تقفز من نهاية المقطع مباشرة إلى بدايته ،<br />
[page:Animation THREE.LoopPingPong] - تشغيل المقطع مع العدد المختار من *التكرارات* ، بدلاً من التشغيل للأمام والخلف.
</p>
<h3>[property:Boolean paused]</h3>
<p>
يؤدي تعيين *paused* إلى *true* إلى إيقاف تنفيذ الإجراء مؤقتًا عن طريق تعيين مقياس الوقت الفعال على 0. الافتراضي هو *false*.<br /><br />
</p>
<h3>[property:Number repetitions]</h3>
<p>
عدد التكرارات التي تم إجراؤها [page:AnimationClip] على مدار هذا الإجراء. يمكن تعيينه عبر [page:.setLoop setLoop]. الافتراضي هو *Infinity*.<br /><br />
ضبط هذا الرقم ليس له أي تأثير ، إذا تم ضبط [page:.loop loop mode] على [page:Animation THREE.LoopOnce].
</p>
<h3>[property:Number time]</h3>
<p>
the local time of this action (in seconds, starting with 0).<br /><br />
يتم تثبيت القيمة أو لفها إلى 0 ... مدة المقطع (وفقًا لحالة الحلقة).
يمكن تغير قيمتها بالنسبة إلى وقت لخالط الحركات الرئيسي عن طريق تغيير [page:.timeScale timeScale] (باستخدام [page:.setEffectiveTimeScale setEffectiveTimeScale] أو [page:.setDuration setDuration]).<br />
</p>
<h3>[property:Number timeScale]</h3>
<p>
امل التحجيم للوقت [page:.time time]. تؤدي القيمة 0 إلى توقف الرسوم المتحركة مؤقتًا. تؤدي القيم السالبة إلى تشغيل الرسوم المتحركة بشكل عكسي. الافتراضي هو 1.<br /><br />
الخصائص / الطرق المتعلقة *timeScale* (على التوالي *time*) هم:
[page:.getEffectiveTimeScale getEffectiveTimeScale],
[page:.halt halt],
[page:.paused paused],
[page:.setDuration setDuration],
[page:.setEffectiveTimeScale setEffectiveTimeScale],
[page:.stopWarping stopWarping],
[page:.syncWith syncWith],
[page:.warp warp].
</p>
<h3>[property:Number weight]</h3>
<p>
درجة تأثير هذا الإجراء (في المجال القائم بين [0 ، 1]). يمكن استخدام القيم بين 0 (بدون تأثير) و 1 (تأثير كامل) للمزج بين عدة إجراءات. الافتراضي هو 1. <br /><br />
الخصائص / الطرق المتعلقة *weight* هي:
[page:.crossFadeFrom crossFadeFrom],
[page:.crossFadeTo crossFadeTo],
[page:.enabled enabled],
[page:.fadeIn fadeIn],
[page:.fadeOut fadeOut],
[page:.getEffectiveWeight getEffectiveWeight],
[page:.setEffectiveWeight setEffectiveWeight],
[page:.stopFading stopFading].
</p>
<h3>[property:Boolean zeroSlopeAtEnd]</h3>
<p>
يتيح تشغيل السلس بدون مقاطع منفصلة للبداية والحلقة والنهاية. الافتراضي هو *true*.
</p>
<h3>[property:Boolean zeroSlopeAtStart]</h3>
<p>
يتيح تشغيل السلس بدون مقاطع منفصلة للبداية والحلقة والنهاية. الافتراضي هو *true*.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:this crossFadeFrom]( [param:AnimationAction fadeOutAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
<p>
يؤدي هذا الإجراء إلى تلاشي [page:.fadeIn fade in] ، مما يؤدي إلى تلاشي إجراء آخر في نفس الوقت ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة.<br /><br />
إذا كانت warpBoolean تحمل قيمة true ، فسيتم تطبيق [page:.warp warping] إضافيًا (تغييرات تدريجية في المقاييس الزمنية).<br /><br />
ملاحظة: كما هو الحال مع *fadeIn*/*fadeOut* ، يبدأ / ينتهي التلاشي بوزن 1.
</p>
<h3>[method:this crossFadeTo]( [param:AnimationAction fadeInAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
<p>
يؤدي هذا الإجراء إلى تلاشي [page:.fadeOut fade out] ، يتلاشى في إجراء آخر في وقت واحد ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة ضمن سلسلة.<br /><br />
إذا كانت warpBoolean صحيحة ، فسيتم تطبيق [page:.warp warping] إضافيًا (تغييرات تدريجية في المقاييس الزمنية).<br /><br />
ملاحظة: كما هو الحال مع *fadeIn*/*fadeOut* ، يبدأ / ينتهي التلاشي بوزن 1.
</p>
<h3>[method:this fadeIn]( [param:Number durationInSeconds] )</h3>
<p>
يزيد [page:.weight weight] هذا الإجراء تدريجياً من 0 إلى 1 ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة ضمن سلسلة.
</p>
<h3>[method:this fadeOut]( [param:Number durationInSeconds] )</h3>
<p>
يقلل [page:.weight weight] هذا الإجراء تدريجيًا من 1 إلى 0 ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة ضمن سلسلة.
</p>
<h3>[method:Number getEffectiveTimeScale]()</h3>
<p>
تُرجع مقياس الوقت الفعال (مع الأخذ في الاعتبار حالات التواء و قيمة [page:.paused paused] الحالية).
</p>
<h3>[method:number getEffectiveWeight]()</h3>
<p>
تُرجع الوزن الفعال (مع الأخذ في الاعتبار حالات التلاشي الحالية و [page:.enabled enabled]).
</p>
<h3>[method:AnimationClip getClip]()</h3>
<p>
تُرجع المقطع الذي يحتوي على بيانات الرسوم المتحركة لهذا الإجراء.
</p>
<h3>[method:AnimationMixer getMixer]()</h3>
<p>
تُرجع الخالط المسؤول عن تشغيل هذا الإجراء.
</p>
<h3>[method:Object3D getRoot]()</h3>
<p>
تُرجع الكائن الجذر الذي تم تنفيذ هذا الإجراء عليه.
</p>
<h3>[method:this halt]( [param:Number durationInSeconds] )</h3>
<p>
تعمل على إبطاء سرعة هذه الرسوم المتحركة إلى 0 من خلال إنقاص [page:.timeScale timeScale] تدريجيًا (بدءًا من قيمتها الحالية) ، خلال الفترة الزمنية المنقضية. يمكن تقييد هذه الطريقة ضمن سلسلة.
</p>
<h3>[method:Boolean isRunning]()</h3>
<p>
تُرجع true إذا كان الإجراء [page:.time time] قيد التشغيل حاليًا.<br /><br />
بالإضافة إلى تفعيله في الخالط (انظر [page:.isScheduled isScheduled]) ، يجب استيفاء الشروط التالية:
<br/>
[page:.paused paused] يساوي false ،<br/> [page:.enabled enabled] يساوي true ،
<br/>
[page:.timeScale timeScale] يختلف عن 0 ، ولا توجد جدولة لبدء متأخر ([page:.startAt startAt]).<br /><br />
ملاحظة: لا يعني كون *isRunning* تحمل قيمة *true* أنه يمكن رؤية الرسوم المتحركة بالفعل. هذا هو الحال فقط ، إذا تم تعيين [page:.weight weight] بشكل إضافي على قيمة غير صفرية.
</p>
<h3>[method:Boolean isScheduled]()</h3>
<p>
تُرجع قيمة *true* ، إذا تم تنشيط هذا الإجراء في الخالط.<br /><br />
ملاحظة: هذا لا يعني بالضرورة أن الرسوم المتحركة تعمل بالفعل (قارن الشروط الإضافية لـ [page:.isRunning isRunning]).
</p>
<h3>[method:this play]()</h3>
<p>
يعلم الخالط بضرورة البدء في تنشيط الحدث (action). يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
ملاحظة: لا يعني تنشيط هذا الإجراء بالضرورة أن الرسوم المتحركة تبدأ على الفور: إذا كان الإجراء قد انتهى بالفعل من قبل (من خلال الوصول إلى نهاية الحلقة الأخيرة) ، أو إذا تم تعيين وقت لبدء متأخر (عبر [page:.startAt startAt]) ،
يجب تنفيذ [page:.reset reset] أولاً. يمكن لبعض الإعدادات الأخرى ([page:.paused paused]=true, [page:.enabled enabled]=false,
[page:.weight weight]=0, [page:.timeScale timeScale]=0) منع تشغيل الرسوم المتحركة أيضًا.
</p>
<h3>[method:this reset]()</h3>
<p>
يتم إعادة الحدث إلى وضع البداية. يمكن تقييد هذه الطريقة ضمن سلسلة.<br /><br />
تقوم هذه الطريقة بتعيين [page:.paused paused] إلى false ، و [page:.enabled enabled] إلى true ، ومن [page:.time time] إلى 0 ، وتقطع أي تزييف مجدول ، وتزيل عدد الحلقات الداخلية وجدولة البدء المتأخر.<br /><br />
ملاحظة: يتم استدعاء. *reset* دائمًا بواسطة [page:.stop stop] ، ولكن *reset* لا يتصل بـ *stop* نفسه.
هذا يعني: إذا كنت تريد كلاهما ، reset وstop ، لا تتصل بـ *reset* بل إتصل بـ *stop* بدلا من ذلك.
</p>
<h3>[method:this setDuration]( [param:Number durationInSeconds] )</h3>
<p>
يضبط المدة لحلقة واحدة من هذا الإجراء (بضبط [page:.timeScale timeScale] وإيقاف أي إلتفاف مجدول). يمكن تقييد هذه الطريقة ضمن سلسلة.
</p>
<h3>[method:this setEffectiveTimeScale]( [param:Number timeScale] )</h3>
<p>
يضبط [page:.timeScale timeScale] ويوقف أي إلتفاف مجدول. يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
إذا كانت القيمة [page:.paused paused] تحمل false ، فسيتم أيضًا تعيين المقياس الزمني الفعال (خاصية داخلية) على هذه القيمة ؛
وإلا فسيتم تعيين النطاق الزمني الفعال (الذي يؤثر بشكل مباشر على الرسم المتحرك في هذه اللحظة) على 0.<br /><br />
ملاحظة: *paused* لن يتم تحويله إلى *true* تلقائيًا ، إذا تم ضبط *timeScale* على 0 بهذه الطريقة.
</p>
<h3>[method:this setEffectiveWeight]( [param:Number weight] )</h3>
<p>
تضبط [page:.weight weight] وتوقف أي تضاؤل مجدول. يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
إذا كانت قيمة [page:.enabled enabled] هي true ، فسيتم أيضًا تعيين الوزن الفعال (خاصية داخلية) على هذه القيمة ؛
وإلا فسيتم تعيين الوزن الفعال (الذي يؤثر بشكل مباشر على الرسم المتحرك في هذه اللحظة) على 0.<br /><br />
ملاحظة: لن يتم تحويل *enabled* إلى false تلقائيًا ، إذا تم ضبط *weight* على 0 بهذه الطريقة.
</p>
<h3>[method:this setLoop]( [param:Number loopMode], [param:Number repetitions] )</h3>
<p>
يعين [page:.loop loop mode] وعدد [page:.repetitions repetitions]. يمكن تقييد هذه الطريقة ضمن سلسلة
</p>
<h3>[method:this startAt]( [param:Number startTimeInSeconds] )</h3>
<p>
يحدد وقت البداية المتأخرة (عادةً ما يتم تمريره كـ [page:AnimationMixer.time] + deltaTimeInSeconds). يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
ملاحظة: ستبدأ الرسوم المتحركة فقط في الوقت المحدد ، إذا تم ربط *startAt* بـ [page:.play play] ،
أو إذا تم بالفعل تنشيط الإجراء في الخالط (عن طريق استدعاء سابق لـ. *play* ، دون إيقافه أو إعادة تعيينه في هذه الأثناء).
</p>
<h3>[method:this stop]()</h3>
<p>
يخبر الخالط بإلغاء تنشيط هذا الإجراء. يمكن تقييد هذه الطريقة ضمن سلسلة. <br /><br />
سيتم إيقاف الإجراء على الفور وإعادة تعيين [page:.reset reset] بالكامل.<br /><br />
ملاحظة: يمكنك إيقاف جميع الإجراءات النشطة على نفس الخالط دفعة واحدة عبر [page:AnimationMixer.stopAllAction mixer.stopAllAction].
</p>
<h3>[method:this stopFading]()</h3>
<p>
يوقف أي [page:.fadeIn fading] مجدولًا يتم تطبيقه على هذا الحدث. يمكن تقييد هذه الطريقة ضمن سلسلة.
</p>
<h3>[method:this stopWarping]()</h3>
<p>
يوقف أي [page:.warp warping] مجدولًا يتم تطبيقه على هذا الحدث. يمكن تقييد هذه الوظيفة ضمن سلسلة.
</p>
<h3>[method:this syncWith]( [param:AnimationAction otherAction] )</h3>
<p>
يزامن هذا الإجراء مع الإجراء الآخر الذي تم تمريره. يمكن تقييد هذه الوظيفة ضمن سلسلة. <br /><br />
تتم المزامنة عن طريق تعيين قيم [page:.time time] و [page:.timeScale timeScale] لهذا الإجراء على القيم المقابلة للإجراء الآخر (إيقاف أي التواء مجدول).<br /><br />
ملاحظة: لن يتم الكشف عن التغييرات المستقبلية في *time* و *timeScale* للإجراء الآخر.
</p>
<h3>[method:this warp]( [param:Number startTimeScale], [param:Number endTimeScale], [param:Number durationInSeconds] )</h3>
<p>
يغير سرعة التشغيل ، خلال الفترة الزمنية المنقضية ، عن طريق تعديل [page:.timeScale timeScale] تدريجيًا من *startTimeScale* إلى *endTimeScale*.يمكن تقييد هذه الوظيفة ضمن سلسلة.
</p>
<h2>الأحداث (Events)</h2>
<p class="desc">
هناك حدثان يشيران عند انتهاء حلقة واحدة من الإجراء على التوالي. يمكنك الرد عليهم من خلال:
</p>
<code>
mixer.addEventListener( 'loop', function( e ) { …} ); // properties of e: type, action and loopDelta
mixer.addEventListener( 'finished', function( e ) { …} ); // properties of e: type, action and direction
</code>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,134 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
AnimationClip عبارة عن مجموعة قابلة لإعادة الاستخدام من مسارات الإطارات الرئيسية التي تمثل رسمًا متحركًا.<br /><br />
للحصول على نظرة عامة حول العناصر المختلفة لنظام الرسوم المتحركة three.js ، راجع مقالة "نظام الحركات" في قسم "الخطوات التالية" من الدليل.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:String name], [param:Number duration], [param:Array tracks] )</h3>
<p>
[page:String name] - اسم لهذا المقطع.<br />
[page:Number duration] - مدة هذا المقطع (بالثواني). إذا تم تمرير قيمة سالبة ، فسيتم حساب المدة من *tracks* التي تم تمريرها.<br />
[page:Array tracks] - مجموعة (جدول) من [page:KeyframeTrack KeyframeTracks].<br /><br />
ملاحظة: بدلاً من إنشاء AnimationClip مباشرةً مع المُنشئ ، يمكنك استخدام إحدى طرقه الثابتة لإنشاء AnimationClips: من JSON ([page:.parse parse]) ، من تسلسلات الهدف التحويلية ([page:.CreateFromMorphTargetSequence CreateFromMorphTargetSequence] ،
[page:.CreateClipsFromMorphTargetSequences CreateClipsFromMorphTargetSequences]) أو من التسلسلات الهرمية للرسوم المتحركة ([page:.parseAnimation parseAnimation]) - إذا كان النموذج الخاص بك لا يحتوي بالفعل على AnimationClips في مجموعة الرسوم المتحركة الخاصة بهندسة.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Number duration]</h3>
<p>
مدة هذا المقطع (بالثواني). يمكن حساب ذلك من مجموعة [page:.tracks tracks] عبر [page:.resetDuration resetDuration].
</p>
<h3>[property:String name]</h3>
<p>
اسم لهذا المقطع. يمكن البحث عن مقطع معين طريق بإستعمال [page:.findByName findByName].
</p>
<h3>[property:Array tracks]</h3>
<p>
جدول يحتوي على [page:KeyframeTrack] لكل خاصية يتم تحريكها بواسطة هذا المقطع.
</p>
<h3>[property:String uuid]</h3>
<p>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] لهذا المقطع. يتم تعيينه تلقائيًا ولا يجب تحريره.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:AnimationClip clone]()</h3>
<p>
إرجاع نسخة من هذا المقطع.
</p>
<h3>[method:this optimize]()</h3>
<p>
يحسن من أداء كل مسار عن طريق إزالة المفاتيح المتسلسلة المتكررة (الشائعة في تسلسلات هدف التحويل - morph target sequences).
</p>
<h3>[method:this resetDuration]()</h3>
<p>
يضبط [page:.duration duration] للمقطع على أطول مدة [page:KeyframeTrack] ممكنة.
</p>
<h3>[method:Object toJSON]()</h3>
<p>
Returns a JSON object representing the serialized animation clip.
</p>
<h3>[method:this trim]()</h3>
<p>
اقتطاع كل المسارات حسب مدة المقطع.
</p>
<h3>[method:Boolean validate]()</h3>
<p>
يقوم بتأدية الحد الأدنى من التحقق من الصحة على كل مسار في المقطع. إرجاع *true* إذا كانت جميع المسارات صالحة.
</p>
<h2>الوظائف الساكنة (Static Methods)</h2>
<h3>[method:Array CreateClipsFromMorphTargetSequences]( [param:String name], [param:Array morphTargetSequence], [param:Number fps], [param:Boolean noLoop] )</h3>
<p>
تُرجع مصفوفة من AnimationClips الجديدة التي تم إنشاؤها من morph target sequences من الشكل الهندسي ، في محاولة لفرز أسماء الأهداف التحويلية إلى أنماط قائمة على مجموعة الرسوم المتحركة مثل "Walk_001 ، Walk_002 ، Run_001 ، Run_002 ...".
</p>
<h3>[method:AnimationClip CreateFromMorphTargetSequence]( [param:String name], [param:Array morphTargetSequence], [param:Number fps], [param:Boolean noLoop] )</h3>
<p>
يُرجع مقطع رسوم متحركة جديدًا من morph targets array تم تمريره لشكل هندسي ، مع أخذ اسم وعدد الإطارات في الثانية.<br /><br />
ملاحظة: قيمة fps مطلوبة و ضرورية ، ولكن يمكن إعادة ضبظ سرعة الرسوم المتحركة في *AnimationAction* عبر [page:AnimationAction.setDuration animationAction.setDuration].
</p>
<h3>[method:AnimationClip findByName]( [param:Object objectOrClipArray], [param:String name] )</h3>
<p>
يبحث عن AnimationClip بالاسم ، مع الأخذ كقيمة إما مصفوفة من AnimationClips ، أو شبكة أو شكل هندسي يحتوي على جدول مسمى "animations".
</p>
<h3>[method:AnimationClip parse]( [param:Object json] )</h3>
<p>
يترجم تمثيل JSON لمقطع ويعيد AnimationClip.
</p>
<h3>[method:AnimationClip parseAnimation]( [param:Object animation], [param:Array bones] )</h3>
<p>
يوزع تنسيق animation.hierarchy ويعيد AnimationClip.
</p>
<h3>[method:Object toJSON]( [param:AnimationClip clip] )</h3>
<p>
يأخذ AnimationClip ويعيد كائن JSON.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
AnimationMixer هو مشغل للرسوم المتحركة على كائن معين في المشهد. عندما يتم تحريك كائنات متعددة في المشهد بشكل مستقل ، يمكن استخدام AnimationMixer واحد لكل كائن.<br /><br />
للحصول على نظرة عامة حول العناصر المختلفة لنظام الرسوم المتحركة three.js ، راجع مقالة "نظام الحركات" في قسم "الخطوات التالية" من الدليل.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Object3D rootObject] )</h3>
<p>
[page:Object3D rootObject] - الكائن الذي سيتم تشغيل رسومه المتحركة بواسطة هذا الخالط.<br />
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Number time]</h3>
<p>
وقت الخالط الكامل (بالثواني ؛ بدءًا من 0 عند إنشاء الخالط).
</p>
<h3>[property:Number timeScale]</h3>
<p>
عامل تحجيم لـ [page:.time mixer time].<br /><br />
ملاحظة: يأدي ضبط مقياس وقت الخلاط على 0 والعودة لاحقًا إلى 1 إلى إمكانية إيقاف / إلغاء إيقاف مؤقت لجميع الإجراءات التي يتحكم فيها هذا الخالط.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:AnimationAction clipAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
<p>
إرجاع [page:AnimationAction] للمقطع الذي تم تمريره ، اختيارياً باستخدام كائن جذر مختلف عن الجذر الافتراضي لجهاز المزج. يمكن أن تكون القيمة الأولى إما كائن [page:AnimationClip] أو اسم AnimationClip.<br /><br />
إذا لم يكن هناك إجراء يلائم المقطع ومعلمات الجذر ، فسيتم إنشاؤه بهذه الطريقة. استدعاء هذه الطريقة عدة مرات مع نفس المقطع ومعلمات الجذر يؤدي دائمًا إلى إرجاع نفس مثيل المقطع.
</p>
<h3>[method:AnimationAction existingAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
<p>
إرجاع [page:AnimationAction] موجود للمقطع الذي تم تمريره ، اختيارياً باستخدام كائن جذر مختلف عن الجذر الافتراضي لجهاز الخالط.<br /><br />
يمكن أن تكون القيمة الأولى إما كائن [page:AnimationClip] أو اسم AnimationClip.
</p>
<h3>[method:Object3D getRoot]()</h3>
<p>
إرجاع جذركائن الخالط.
</p>
<h3>[method:this stopAllAction]()</h3>
<p>
يقوم بإلغاء تنشيط كافة الإجراءات المجدولة مسبقًا على هذا الخالط.
</p>
<h3>[method:this update]([param:Number deltaTimeInSeconds]) </h3>
<p>
يعمل على تقدم وقت الخالط العالمي وتحديث الرسوم المتحركة.<br /><br />
يتم ذلك عادةً في حلقة العرض ، حيث يتم تمرير [page:Clock.getDelta clock.getDelta] مقياسًا بواسطة جهاز الخلاط [page:.timeScale timeScale]).
</p>
<h3>[method:this setTime]([param:Number timeInSeconds]) </h3>
<p>
يضبط الخالط العام على وقت محدد ويقوم بتحديث الرسوم المتحركة وفقًا لذلك.<br /><br />
يكون هذا مفيدًا عندما تحتاج إلى الانتقال إلى وقت محدد في رسم متحرك. سيتم قياس القيمة المدخلة حسب مقياس الوقت لجهاز الخالط [page:.timeScale timeScale].
</p>
<h3>[method:undefined uncacheClip]([param:AnimationClip clip])</h3>
<p>
إلغاء تخصيص كل موارد الذاكرة لمقطع.
</p>
<h3>[method:undefined uncacheRoot]([param:Object3D root]) </h3>
<p>
إلغاء تخصيص كافة موارد الذاكرة لكائن جذر.
</p>
<h3>[method:undefined uncacheAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
<p>
إلغاء تخصيص كل موارد الذاكرة لإجراء ما.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">مجموعة من الكائنات التي تتلقى حالة حركة مشتركة.<br /><br />
للحصول على نظرة عامة حول العناصر المختلفة لنظام الرسوم المتحركة three.js ، راجع مقالة "نظام الحركات" في قسم "الخطوات التالية" من الدليل.
</p>
<h2>الإستعمال:</h2>
<p class="desc">
تظيف كائنات يمكن تمريرها عبر المنشئ كـ'جذر' أو عبر وظيفة [page:AnimationMixer.clipAction clipAction] الخاصة بـ [page:AnimationMixer AnimationMixer] أو بدلا من دلك عبر تمرير هدا الكائن الأخير كـ'جذر'.<br /><br />
لاحظ أن كائنات هذه الفئة تظهر ككائن واحد للخالط ، لذا يجب التحكم في ذاكرة التخزين المؤقت للكائنات الفردية على المجموعة.
</p>
<h2>التقييدات (Limitations)</h2>
<p class="desc">
يجب أن تكون الخصائص المتحركة متوافقة مع جميع الكائنات في المجموعة.<br /><br />
يمكن التحكم في خاصية واحدة إما من خلال مجموعة مستهدفة أو بشكل مباشر ، ولكن ليس كلاهما.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Object obj1], [param:Object obj2], [param:Object obj3], ... )</h3>
<p>
[page:Object obj] - عدد عشوائي من الشبكات التي تشترك في نفس حالة الحركة.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Boolean isAnimationObjectGroup]</h3>
<p>
Read-only flag to check if a given object is of type [name].
</p>
<h3>[property:Object stats]</h3>
<p>
كائن يحتوي على بعض المعلومات حول *AnimationObjectGroup* (العدد الإجمالي ، العدد المستخدم ، عدد الروابط لكل كائن)
</p>
<h3>[property:String uuid]</h3>
<p>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] الخاص بهذا *AnimationObjectGroup*. يتم تعيينه تلقائيًا ولا يجب تحريره.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:undefined add]( [param:Object obj1], [param:Object obj2], [param:Object obj3], ... )</h3>
<p>
يضيف عددًا عشوائيًا من الكائنات إلى *AnimationObjectGroup*.
</p>
<h3>[method:undefined remove]( [param:Object obj1], [param:Object obj2], [param:Object obj3], ... )</h3>
<p>
يزيل عددًا عشوائيًا من الكائنات من *AnimationObjectGroup*.
</p>
<h3>[method:undefined uncache]( [param:Object obj1], [param:Object obj2], [param:Object obj3], ... )</h3>
<p>
إلغاء تخصيص كافة موارد الذاكرة للكائنات التي تم تمريرها من *AnimationObjectGroup*.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
كائن مع وظائف مختلفة للمساعدة في الرسوم المتحركة ، ويستخدم داخليًا.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:Array convertArray]( array, type, forceClone )</h3>
<p>
يحول مصفوفة إلى نوع معين.
</p>
<h3>[method:Array flattenJSON]( jsonKeys, times, values, valuePropertyName )</h3>
<p>
تستخدم لتحليل تنسيقات AOS keyframe.
</p>
<h3>[method:Array getKeyframeOrder]( times )</h3>
<p>
تُرجع مصفوفة يمكن من خلالها فرز الأوقات والقيم.
</p>
<h3>[method:Boolean isTypedArray]( object )</h3>
<p>
ترجاع *true* إذا كان الكائن مصفوفة مكتوبة (typed array.).
</p>
<h3>[method:AnimationClip makeClipAdditive]( [param:AnimationClip targetClip], [param:Number referenceFrame], [param:AnimationClip referenceClip], [param:Number fps] )</h3>
<p>
Converts the keyframes of the given animation clip to an additive format.
</p>
<h3>[method:Array sortedArray]( values, stride, order )</h3>
<p>
يفرز المصفوفة التي تم إرجاعها مسبقًا بناءا [page:AnimationUtils.getKeyframeOrder getKeyframeOrder].
</p>
<h3>[method:AnimationClip subclip]( [param:AnimationClip clip], [param:String name], [param:Number startFrame], [param:Number endFrame], [param:Number fps] )</h3>
<p>
ينشئ مقطعًا جديدًا ، يحتوي فقط على جزء من المقطع الأصلي بين الإطارات المحددة.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,221 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
إن [link:https://en.wikipedia.org/wiki/Key_frame keyframes] عبارة عن سلسلة زمنية من الإطارات الرئيسية ، والتي تتكون من قوائم بالأوقات والقيم ذات الصلة ، والتي تُستخدم لتحريك خاصية معينة لكائن.
</p>
<p>
للحصول على نظرة عامة على العناصر المختلفة لنظام الرسوم المتحركة three.js ، راجع ملف
مقالة "نظام الحركات" في قسم "الخطوات التالية" من الدليل.
</p>
<p>
على النقيض من التسلسل الهرمي للرسوم المتحركة لتنسيق نموذج [link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format] ، فإن *KeyframeTrack* لا يخزن إطارات المفاتيح الفردية الخاصة به ككائنات في مصفوفة "keys" (مع الاحتفاظ بالأوقات والقيم لكل إطار معًا في مكان واحد).
</p>
<p>
بدلاً من ذلك ، هناك دائمًا صفيفتان في *KeyframeTrack*: تقوم المصفوفة [page:.times times] بتخزين قيم الوقت لجميع الإطارات الرئيسية لهذا المسار بترتيب تسلسلي ، وتحتوي المصفوفة [page:.values values] على القيم المتغيرة المقابلة للخاصية المتحركة.
</p>
<p>
لا يمكن أن تكون القيمة المفردة ، التي تنتمي إلى نقطة زمنية معينة ، رقمًا بسيطًا فحسب ، بل يمكن (على سبيل المثال) أن تكون *vector* (إذا كان الموضع متحركًا) أو رباعي (إذا كان الدوران متحركًا). لهذا السبب ، قد تكون مصفوفة القيم (وهي مصفوفة مسطحة أيضًا) ثلاثة أو أربعة أضعاف طول مصفوفة الأوقات.
</p>
<p>
بالمقابلة مع الأنواع المختلفة الممكنة للقيم المتحركة ، توجد عدة فئات فرعية من *KeyframeTrack* ، ترث معظم الخصائص والطرق:
</p>
<ul>
<li>[page:BooleanKeyframeTrack]</li>
<li>[page:ColorKeyframeTrack]</li>
<li>[page:NumberKeyframeTrack]</li>
<li>[page:QuaternionKeyframeTrack]</li>
<li>[page:StringKeyframeTrack]</li>
<li>[page:VectorKeyframeTrack]</li>
</ul>
<p>
يمكن العثور على بعض الأمثلة حول كيفية إنشاء [page:AnimationClip AnimationClips] يدويًا بأنواع مختلفة من KeyframeTracks في ملف [link:https://threejs.org/examples/jsm/animation/AnimationClipCreator.js AnimationClipCreator].
</p>
<p>
نظرًا لأن القيم الصريحة محددة فقط لنقاط الوقت المنفصلة المخزنة في مصفوفة الأوقات ، يجب استيفاء جميع القيم الموجودة بينهما.
</p>
<p>
يعد اسم المسار مهمًا لربط هذا المسار بخاصية معينة للعقدة المتحركة (تم إجراؤه بواسطة [page:PropertyBinding]).
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
<p>
[page:String name] - معرّف *KeyframeTrack*.<br />
[page:Array times] - مصفوفة من مرات الإطار الرئيسي ، يتم تحويلها داخليًا إلى ملف
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
[page:Array values] - مصفوفة بالقيم المتعلقة بمصفوفة الأوقات ، يتم تحويلها داخليًا إلى
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array].<br />
[page:Constant interpolation] - نوع الاستيفاء المطلوب استخدامه. أنظر
[page:Animation Animation Constants] للقيم الممكنة. القيمة الافتراضية هي [page:Animation InterpolateLinear].
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:String name]</h3>
<p>
يمكن أن يشير اسم المسار إلى morph targets أو [page:SkinnedMesh bones] أو ربما إلى قيم أخرى داخل كائن متحرك. راجع [page:PropertyBinding.parseTrackName] للتعرف على أشكال السلاسل التي يمكن تحليلها لربط الخاصية:
</p>
<p>
يمكن أن يحدد الاسم العقدة إما باستخدام اسمها أو uuid الخاص بها (على الرغم من أنها تحتاج إلى أن تكون في الشجرة الفرعية لعقدة الرسم البياني للمشهد التي تم تمريرها إلى جهاز المزج). أو ، إذا كان اسم المسار يبدأ بنقطة ، فإن المسار ينطبق على عقدة الجذر التي تم تمريرها إلى الخالط.
</p>
<p>
عادة ، بعد العقدة ، سيتم تحديد خاصية مباشرة. ولكن يمكنك أيضًا تحديد خاصية فرعية ، مثل. rotation[x] ، إذا كنت تريد فقط قيادة المكون X للدوران عبر مسار عائم.
</p>
<p>
يمكنك أيضًا تحديد العظام أو المواد المتعددة باستخدام اسم كائن ، على سبيل المثال: .bones[R_hand].scale; القناة الحمراء للون المنتشر للمادة الرابعة في مصفوفة المواد - كمثال آخر - يمكن الوصول إليها من خلال .bones[R_hand].scale;.
</p>
<p>
ستعمل خاصية PropertyBinding أيضًا على حل أسماء أهداف التحويل ، على سبيل المثال: .morphTargetInfluences[run].
</p>
<p>
ملاحظة: ليس بالضرورة أن يكون اسم المسار فريدًا. يمكن أن تقود مسارات متعددة نفس الممتلكات. يجب أن تستند النتيجة إلى مزيج مرجح بين المسارات المتعددة وفقًا لأوزان الإجراءات الخاصة بكل منها.
</p>
<h3>[property:Float32Array times]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array] تم تحويله من مصفوفة الأوقات التي تم تمريرها في المنشئ.
</p>
<h3>[property:Float32Array values]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array] تم تمحوله من صفيف القيم الذي تم تمريره في المنشئ.
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
نوع الاستيفاء (interpolation) الافتراضي: [page:Animation InterpolateLinear].
</p>
<h3>[property:Constant TimeBufferType ]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
نوع المخزن المؤقت المستخدم داخليا للأوقات.
</p>
<h3>[property:Constant ValueBufferType ]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
نوع المخزن المؤقت المستخدم داخليًا للقيم.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:KeyframeTrack clone]()</h3>
<p>
ترجع نسخة من هذا المسار.
</p>
<h3>[method:Interpolant createInterpolant]()</h3>
<p>
ينشئ [page:LinearInterpolant LinearInterpolant] أو [page:CubicInterpolant CubicInterpolant] أو [page:DiscreteInterpolant DiscreteInterpolant] ، اعتمادًا على قيمة معلمة الاستيفاء التي تم تمريرها في الباني.
</p>
<h3>[method:Interpolant getInterpolation]()</h3>
<p>
إرجاع نوع الاستيفاء (interpolation).
</p>
<h3>[method:Number getValueSize]()</h3>
<p>
ترجع حجم كل قيمة (طول صفيف القيم [page:.values values] مقسومًا على طول صفيف الأوقات [page:.times times]).
</p>
<h3>[method:DiscreteInterpolant InterpolantFactoryMethodDiscrete]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
ينشئ [page:DiscreteInterpolant DiscreteInterpolant] جديدًا من [page:KeyframeTrack.times times] و [page:KeyframeTrack.times values]. يمكن تمرير Float32Array الذي سيحصل على النتائج. وإلا فسيتم إنشاء مصفوفة جديدة بالحجم المناسب تلقائيًا.
</p>
<h3>[method:LinearInterpolant InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
ينشئ [page:LinearInterpolant LinearInterpolant] جديدًا من page:KeyframeTrack.times times] و [page:KeyframeTrack.times values]. يمكن تمرير Float32Array الذي سيتلقى النتائج. وإلا فسيتم إنشاء مصفوفة جديدة بالحجم المناسب تلقائيًا.
</p>
<h3>[method:CubicInterpolant InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
<p>
قم بإنشاء [page:CubicInterpolant CubicInterpolant] جديد من [page:KeyframeTrack.times times] و [page:KeyframeTrack.times values]. يمكن تمرير Float32Array الذي سيحصل على النتائج. وإلا فسيتم إنشاء مصفوفة جديدة بالحجم المناسب تلقائيًا.
</p>
<h3>[method:this optimize]()</h3>
<p>
يزيل المفاتيح المتسلسلة المكافئة الشائعة في تسلسلات الهدف التحويلية.
</p>
<h3>[method:this scale]()</h3>
<p>
يغير قياس جميع مرات الإطار الرئيسي بعامل.<br /><br />
ملاحظة: هذا مفيد ، على سبيل المثال ، للتحويلات إلى معدل معين من الإطارات في الثانية (كما يتم داخليًا بواسطة [page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]).
</p>
<h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
<p>
يحدد نوع الاستيفاء. انظر [page:Animation Animation Constants] للاختيارات.
</p>
<h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
<p>
ينقل جميع الإطارات الرئيسية إما للأمام أو للخلف في الوقت المناسب.
</p>
<h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
<p>
يزيل الإطارات الرئيسية قبل *startTime* وبعد *endTime* ، بدون تغيير أي قيم في النطاق [*startTime*, *endTime*].
</p>
<h3>[method:Boolean validate]()</h3>
<p>
يؤدي الحد الأدنى من التحقق من الصحة على المسارات. يرجع *true* إذا كان صحيحا.
</p>
<p>
تقوم هذه الطريقة بتسجيل الأخطاء في وحدة التحكم ، إذا كان المسار فارغًا ، أو إذا كان [page:.valueSize value size] غير صالح ، أو إذا كان عنصر في المصفوفة [page:.times times] أو [page:.values values] ليس رقمًا صالحًا أو إذا كانت العناصر الموجودة في المصفوفة *times* خارج الترتيب.
</p>
<h2>الوظائف الساكنة (Static Methods)</h2>
<h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
<p>
يحول المسار إلى JSON.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,132 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
هذا يشير إلى الممتلكات الموجودة في الرسم البياني للمشهد ؛ تستخدم داخليا.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Object3D rootNode], path, parsedPath )</h3>
<p>
-- [page:Object3D rootNode]:
-- path
-- parsedPath (optional)
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Number path]</h3>
<p>
</p>
<h3>[property:Number parsedPath]</h3>
<p>
</p>
<h3>[property:Number node]</h3>
<p>
</p>
<h3>[property:Number rootNode]</h3>
<p>
</p>
<h3>[property:Object BindingType]</h3>
<p>
</p>
<h3>[property:Object Versioning]</h3>
<p>
</p>
<h3>[property:Array GetterByBindingType]</h3>
<p>
</p>
<h3>[property:Array SetterByBindingTypeAndVersioning]</h3>
<p>
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:undefined getValue]( [param:Array targetArray], [param:Number offset] )</h3>
<p>
</p>
<h3>[method:undefined setValue]( [param:Array sourceArray], [param:Number offset] )</h3>
<p>
</p>
<h3>[method:undefined bind]( )</h3>
<p>
إنشاء زوج getter / setter لخاصية في الرسم البياني للمشهد. تستخدم داخليا من قبل
[page:PropertyBinding.getValue getValue] و [page:PropertyBinding.setValue setValue].
</p>
<h3>[method:undefined unbind]( )</h3>
<p>
تقوم بفك ربط زوج getter / setter لخاصية في الرسم البياني للمشهد.
</p>
<h3>[method:Constructor Composite]( targetGroup, path, optionalParsedPath )</h3>
<p>
قم بإنشاء مركب جديد PropertyBinding.
</p>
<h3>[method:Constructor create]( root, path, parsedPath )</h3>
<p>
تقوم بإنشاء رابط خاصية مركب جديد (إذا كان الجذر هو [page:AnimationObjectGroup) أو PropertyBinding.
</p>
<h3>[method:Constructor parseTrackName]( trackName )</h3>
<p>
يطابق الـ strings في الأشكال التالية:<br />
-- nodeName.property<br />
-- nodeName.property[accessor]<br />
-- nodeName.material.property[accessor]<br />
-- uuid.property[accessor]<br />
-- uuid.objectName[objectIndex].propertyName[propertyIndex]<br />
-- parentName/nodeName.property<br />
-- parentName/parentName/nodeName.property[index]<br />
-- .bone[Armature.DEF_cog].position<br />
-- scene:helium_balloon_model:helium_balloon_model.position
</p>
<h3>[method:Constructor findNode]( root, nodeName )</h3>
<p>
تبحث عن عقدة في شجرة العقدة أو [page:Skeleton Skeleton].
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,98 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
خاصية الرسم البياني للمشهد المخزنة التي تسمح بالتراكم الموزون ؛ تستخدم داخليا.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:PropertyBinding binding], [param:String typeName], [param:Number valueSize] )</h3>
<p>
-- binding <br />
-- typeName <br />
-- valueSize <br />
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:PropertyBinding binding]</h3>
<p>
</p>
<h3>[property:TypedArray buffer]</h3>
<p>
حاجز (buffer) بحجم [page:PropertyMixer valueSize] * 4. <br /><br />
هذا لديه التخطيط: [ incoming | accu0 | accu1 | orig ]<br /><br />
يمكن Interpolators استخدام .buffer كـ .result ثم تنتقل البيانات إلى "incoming". <br/>
يتم استخدام 'accu0' و 'accu1' مع ​​الإطارات المتداخلة للنتيجة التراكمية ويتم مقارنتها لاكتشاف التغييرات. يقوم "orig" بتخزين الحالة الأصلية للممتلكات.
</p>
<h3>[property:Number cumulativeWeight]</h3>
<p>
الافتراضي هو *0*.
</p>
<h3>[property:Number valueSize]</h3>
<p>
</p>
<h3>[property:Number referenceCount]</h3>
<p>
الافتراضي هو *0*.
</p>
<h3>[property:Number useCount]</h3>
<p>
الافتراضي هو *0*.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:undefined accumulate]( [param:Number accuIndex], [param:Number weight] )</h3>
<p>
تجميع البيانات في [page:PropertyMixer.buffer buffer][accuIndex] منطقة 'incoming' في 'accu[i]'.<br />
إذا كان الوزن *0* فهذا لا يفعل شيئًا.
</p>
<h3>[method:undefined apply]( [param:Number accuIndex] )</h3>
<p>
تطبيق حالة [page:PropertyMixer.buffer buffer] 'accu[i]' على الربط عند اختلاف الاتهام.
</p>
<h3>[method:undefined saveOriginalState]( )</h3>
<p>
تذكر حالة الملكية المقيدة وتنسخها إلى كلا المتهمين.
</p>
<h3>[method:undefined restoreOriginalState]( )</h3>
<p>
تقوم بتطبيق الحالة التي تم التقاطها مسبقًا عبر 'saveOriginalState' إلى binding.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
تتبع للقيمة الخاصة بـ*boolean keyframe*.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (ضرورية) المعرف الخاص بـ*KeyframeTrack*.<br />
[page:Array times] - (ضرورية) جدول يتضمن مجموعة من الـ*keyframe times*.<br />
[page:Array values] - القيم الخاصة بـ *keyframes* في وقت محدد لها.<br />
</p>
<h2>الخصائص (Properties)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
الـ*interpolation* الإفتراضي للإستعمال، [page:Animation InterpolateDiscrete].
</p>
<h3>[property:Array ValueBufferType]</h3>
<p>
جدول عادي (ليس *Float32Array* في هذه الحالة، ما عدى *ValueBufferType* الخاص بـ [page:KeyframeTrack]).
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'bool'.
</p>
<h2>الوظائف (Methods)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[method:undefined InterpolantFactoryMethodLinear ]()</h3>
<p>
قيمة هذه الوضيفة هي 'undefined'، حيث أنه لا يوجد سبب لإستعمالها على الخصائص المتفردة.
</p>
<h3>[method:undefined InterpolantFactoryMethodSmooth ]()</h3>
<p>
قيمة هذه الوضيفة هي 'undefined'، حيث أنه لا يوجد سبب لإستعمالها على الخصائص المتفردة.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
تتبع للقيم التابعة لـ*keyframe* التي تمثل تغيرات لون ما.<br /><br />
التنفيذ الأساسي لهذه الفئة الفرعية فلا يوجد أي شيء خاص حتى الآن. ومع ذلك ، هذا هو المكان المناسب لوضع معلمات مساحة اللون.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (ضرورية) المعرف الخاص بـ*KeyframeTrack*.<br />
[page:Array times] - (ضرورية) جدول الأوقات الخاصة بـ*keyframe*.<br />
[page:Array values] - القيم الخاصة بالـ*keyframes* في وقت محدد.<br />
[page:Constant interpolation] - نوع الـ*interpolation* الذي يجب إستعماله. أنظر
[page:Animation Animation Constants] للقيم الممكنة. الإفتراضي هو
[page:Animation InterpolateLinear].
</p>
<h2>الخصائص (Properties)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'color'.
</p>
<h2>الوظائف (Methods)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
تتبع للقيمة الرقمية الخاصة بـ*keyframe* ما.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (ضرورية) المعرف الخاص بالـ*KeyframeTrack*.<br />
[page:Array times] - (ضرورية) جدول الأوقات الخاصة بـ*keyframe*.<br />
[page:Array values] - القيم الخاصة بالـ*keyframes* في وقت محدد.<br />
[page:Constant interpolation] - نوع الـ*interpolation* الذي يجب إستعماله. أنظر
[page:Animation Animation Constants] من أجل القيم المتاحة. الإفتراضي هو
[page:Animation InterpolateLinear].
</p>
<h2>الخصائص (Properties)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'number'.
</p>
<h2>الوظائف (Methods)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
تتبع للقيمة الرقمية الخاصة بـإطار رباعي *quaternion keyframe*.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] (ضرورية) المعرف الخاص بالـ*KeyframeTrack*.<br />
[page:Array times] - (ضرورية) جدول الأوقات الخاصة بـ*keyframe*.<br />
[page:Array values] - القيم الخاصة بالـ*keyframes* في وقت محدد.<br />
[page:Constant interpolation] - نوع الـ*interpolation* الذي يجب إستعماله. أنظر
[page:Animation Animation Constants] من أجل القيم المتاحة. الإفتراضي هو
[page:Animation InterpolateLinear].
</p>
<h2>الخصائص (Properties)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
نوع الـ*interpolation* الافتراضي المراد استخدامه ،
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'quaternion'.
</p>
<h2>الوظائف (Methods)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[method:QuaternionLinearInterpolant InterpolantFactoryMethodLinear]()</h3>
<p>
إرجاع قيمة من نوع [page:QuaternionLinearInterpolant QuaternionLinearInterpolant] بناءا على
[page:KeyframeTrack.values values], [page:KeyframeTrack.times times] و
[page:KeyframeTrack.valueSize valueSize] التابعين لـ*keyframes*.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
تتبع للقيم الخاصة بـ*string keyframe*.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (ضرورية) معرّف KeyframeTrack.<br />
[page:Array times] - (ضرورية) جدول الأوقات الخاصة بـ*keyframe*.<br />
[page:Array values] - القيم الخاصة بالـ*keyframes* في وقت محدد.<br />
[page:Constant interpolation] - نوع الـ*interpolation* الذي يجب إستعماله. أنظر
[page:Animation Animation Constants] من أجل القيم المتاحة. الإفتراضي هو
[page:Animation InterpolateDiscrete].
</p>
<h2>الخصائص (Properties)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[property:Constant DefaultInterpolation]</h3>
<p>
نوع الـ*interpolation* الافتراضي المراد استخدامه ، [page:Animation InterpolateDiscrete].
</p>
<h3>[property:Array ValueBufferType]</h3>
<p>
جدول (مصفوفة) عادي (ليس Float32Array في هذه الحالة، بخلاف *ValueBufferType* من [page:KeyframeTrack]).
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'string'.
</p>
<h2>الوظائف (Methods)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[method:undefined InterpolantFactoryMethodLinear]()</h3>
<p>
قيمة هذه الطريقة هنا 'undefined' ، لأنها لا معنى لها بالنسبة للخصائص المنفصلة.
</p>
<h3>[method:undefined InterpolantFactoryMethodSmooth]()</h3>
<p>
قيمة هذه الطريقة هنا 'undefined' ، لأنها لا معنى لها بالنسبة للخصائص المنفصلة.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:KeyframeTrack] &rarr;
<h1>[name]</h1>
<p class="desc">
تتبع للقيم الخاصة بـ*vector keyframe*.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
<p>
[page:String name] - (ضرورية) معرّف KeyframeTrack.<br />
[page:Array times] - (ضرورية) جدول الأوقات الخاصة بـ*keyframe*.<br />
[page:Array values] - القيم الخاصة بالـ*keyframes* في وقت محدد.<br />
[page:Constant interpolation] - نوع الـ*interpolation* الذي يجب إستعماله. أنظر
[page:Animation Animation Constants] من أجل القيم المتاحة. الإفتراضي هو
[page:Animation InterpolateLinear].
</p>
<h2>الخصائص (Properties)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h3>[property:String ValueTypeName]</h3>
<p>
String 'vector'.
</p>
<h2>الوظائف (Methods)</h2>
<p class="desc">
أنظر [page:KeyframeTrack] من أجل الخصائص الموروثة
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">
يقوم بإنشاء كائن صوتي غير موضعي (عام).<br /><br />
يستخدم هذا [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>مثال التعليمة البرمجية</h2>
<code>
// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );
// create a global audio source
const sound = new THREE.Audio( listener );
// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop( true );
sound.setVolume( 0.5 );
sound.play();
});
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:AudioListener listener] )</h3>
<p>
listener — (ضرورية) كائن [page:AudioListener AudioListener].
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Boolean autoplay]</h3>
<p>ما إذا كان سيتم بدء التشغيل تلقائيًا. الافتراضي هو *false*.</p>
<h3>[property:AudioContext context]</h3>
<p>الـ[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext] من [page:AudioListener listener] المعطاة في المنشئ.</p>
<h3>[property:Number detune]</h3>
<p>تعديل درجة الصوت ، مقاسة بالسنت. +/- 100 نصف نغمة. +/- 1200 هو *octave*. الافتراضي هو *0*.</p>
<h3>[property:Array filters]</h3>
<p>Represents an array of [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioNode AudioNodes]. Can be used to apply a variety of low-order filters to create more complex sound effects.
In most cases, the array contains instances of [link:https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode BiquadFilterNodes]. Filters are set via [page:Audio.setFilter] or [page:Audio.setFilters].</p>
<h3>[property:GainNode gain]</h3>
<p>[link:https://developer.mozilla.org/en-US/docs/Web/API/GainNode GainNode] تم إنشاؤه باستخدام [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createGain AudioContext.createGain]().</p>
<h3>[property:Boolean hasPlaybackControl]</h3>
<p>ما إذا كان يمكن التحكم في التشغيل باستخدام طرق [page:Audio.play play]() و [page:Audio.pause pause]() وما إلى ذلك. الافتراضي هو *true*.</p>
<h3>[property:Boolean isPlaying]</h3>
<p>ما إذا كان الصوت قيد التشغيل حاليًا.</p>
<h3>[property:AudioListener listener]</h3>
<p>مرجع إلى كائن المستمع لهذا الصوت.</p>
<h3>[property:Number playbackRate]</h3>
<p>سرعة التشغيل. الافتراضي هو *1*.</p>
<h3>[property:Number offset]</h3>
<p>إزاحة للوقت الذي يجب أن يبدأ فيه التشغيل داخل المخزن المؤقت للصوت. مثل المعلمة *offset* لـ [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start](). القيمة الافتراضية هي *0*.</p>
<h3>[property:Number duration]</h3>
<p>يتجاوز مدة الصوت. مثل المعلمة *duration* لـ[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start](). الافتراضي هو *undefined* لتشغيل المخزن المؤقت بالكامل.</p>
<h3>[property:AudioNode source]</h3>
<p>[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode AudioBufferSourceNode] تم إنشاؤها باستخدام [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createBufferSource AudioContext.createBufferSource]().</p>
<h3>[property:String sourceType]</h3>
<p>نوع مصدر الصوت. الافتراضي هو السلسلة 'empty'.</p>
<h3>[property:String type]</h3>
<p>سلسلة تشير إلى النوع ، مضبوطة على 'Audio'.</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:this connect]()</h3>
<p>
متصل بـ [page:Audio.source]. يستخدم هذا داخليًا عند التهيئة وعند ضبط / إزالة المرشحات.
</p>
<h3>[method:this disconnect]()</h3>
<p>
قطع الاتصال من [page:Audio.source]. يستخدم هذا داخليًا عند تعيين / إزالة المرشحات.
</p>
<h3>[method:BiquadFilterNode getFilter]()</h3>
<p>
إرجاع العنصر الأول من الجدول [page:Audio.filters filters].
</p>
<h3>[method:Array getFilters]()</h3>
<p>
تُرجع جدول (مصفوفة) [page:Audio.filters filters].
</p>
<h3>[method:Boolean getLoop]()</h3>
<p>
تقوم بإرجاع القيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loop source.loop] (ما إذا كان يجب تكرار التشغيل).
</p>
<h3>[method:GainNode getOutput]()</h3>
<p>
ترجع [page:Audio.gain gainNode].
</p>
<h3>[method:Float getPlaybackRate]()</h3>
<p>
ترجع القيمة الخاصة بـ[page:Audio.playbackRate playbackRate].
</p>
<h3>[method:Float getVolume]()</h3>
<p>
إعادة الحجم الحالي.
</p>
<h3>[method:this play]( delay )</h3>
<p>
إذا كانت [page:Audio.hasPlaybackControl hasPlaybackControl] تحمل قيمة *true* ، يبدأ التشغيل.
</p>
<h3>[method:this pause]()</h3>
<p>
إذا كانت [page:Audio.hasPlaybackControl hasPlaybackControl] تحمل قيمة *true* ، يقوم بإقاف التشغيل.
</p>
<h3>[method:undefined onEnded]()</h3>
<p>
يتم مناداته تلقائيًا عند انتهاء التشغيل.
</p>
<h3>[method:this setBuffer]( audioBuffer )</h3>
<p>
تقوم بإعداد [page:Audio.source source] إلى *audioBuffer* ، وتقوم بتعيين [page:Audio.sourceType sourceType] إلى 'buffer'.<br />
إذا كان [page:Audio.autoplay autoplay] ، يبدأ التشغيل أيضًا.
</p>
<h3>[method:this setFilter]( filter )</h3>
<p>
Applies a single filter node to the audio.
</p>
<h3>[method:this setFilters]( [param:Array value] )</h3>
<p>
value - arrays of filters.<br />
Applies an array of filter nodes to the audio.
</p>
<h3>[method:this setLoop]( [param:Boolean value] )</h3>
<p>
يضبط [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loop source.loop] على *value* (ما إذا كان يجب تكرار التشغيل).
</p>
<h3>[method:this setLoopStart]( [param:Float value] )</h3>
<p>
يضبط [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loopStart source.loopStart] على *value*.
</p>
<h3>[method:this setLoopEnd]( [param:Float value] )</h3>
<p>
يضبط [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loopEnd source.loopEnd] على *value*.
</p>
<h3>[method:this setMediaElementSource]( mediaElement )</h3>
<p>
يطبق الكائن المحدد من النوع [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement HTMLMediaElement] كمصدر لهذا الصوت.<br />
يحدد أيضًا [page:Audio.hasPlaybackControl hasPlaybackControl] إلى false.
</p>
<h3>[method:this setMediaStreamSource]( mediaStream )</h3>
<p>
يطبق الكائن المحدد من النوع [link:https://developer.mozilla.org/en-US/docs/Web/API/MediaStream MediaStream] كمصدر لهذا الصوت.<br />
يحدد أيضًا [page:Audio.hasPlaybackControl hasPlaybackControl] إلى false.
</p>
<h3>[method:this setNodeSource]( audioNode )</h3>
<p>
يقوم بإعداد [page:Audio.source source] إلى audioBuffer ، ويقوم بتعيين [page:Audio.sourceType sourceType] على 'audioNode'.<br />
يضبط أيضًا [page:Audio.hasPlaybackControl hasPlaybackControl] إلى false.
</p>
<h3>[method:this setPlaybackRate]( [param:Float value] )</h3>
<p>
إذا تم تمكين [page:Audio.hasPlaybackControl hasPlaybackControl] ، فيتم ضبط [page:Audio.playbackRate playbackRate] على *value*.
</p>
<h3>[method:this setVolume]( [param:Float value] )</h3>
<p>
تضبط مستوى الصوت.
</p>
<h3>[method:this stop]()</h3>
<p>
إذا تم تمكين [page:Audio.hasPlaybackControl hasPlaybackControl] ، فسيتوقف عن التشغيل.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,97 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
يقوم بإنشاء كائن AudioAnalyser ، والذي يستخدم [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode AnalyserNode] لتحليل البيانات الصوتية.<br /><br />
هذا يستخدم [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>مثال التعليمة البرمجية</h2>
<code>
// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );
// create an Audio source
const sound = new THREE.Audio( listener );
// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop(true);
sound.setVolume(0.5);
sound.play();
});
// create an AudioAnalyser, passing in the sound and desired fftSize
const analyser = new THREE.AudioAnalyser( sound, 32 );
// get the average frequency of the sound
const data = analyser.getAverageFrequency();
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( audio, [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize fftSize] )</h3>
<p>
يقوم بإنشاء [page:AudioAnalyser AudioAnalyser] جديد.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:AnalyserNode analyser]</h3>
<p>[link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode AnalyserNode] يستخدم لتحليل الصوت.</p>
<h3>[property:Integer fftSize]</h3>
<p>
قدرة غير صفرية تصل إلى 2048 ، تمثل حجم FFT (Fast Fourier Transform) لاستخدامها لتحديد مجال التردد (frequency domain).
انظر [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize this page] للحصول على التفاصيل.
</p>
<h3>[property:Uint8Array data]</h3>
<p>
*Uint8Array* بالحجم المحدد بواسطة [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/frequencyBinCount analyser.frequencyBinCount] يستخدم للاحتفاظ ببيانات التحليل.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:Uint8Array getFrequencyData]()</h3>
<p>
يستخدم طريقة [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData getByteFrequencyData] الخاصة بـ Web Audio. انظر تلك الصفحة.
</p>
<h3>[method:Number getAverageFrequency]()</h3>
<p>
تقوم بإرجاع متوسط ​​الترددات المعادة بطريقة [page:AudioAnalyser.getFrequencyData getFrequencyData].
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
هذا يحتوي على طرق لإعداد [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext].<br /><br />
تستخدم داخليا من قبل فئتي [page:AudioListener AudioListener] و [page:AudioLoader AudioLoader].<br /><br />
يستخدم هذا [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:AudioContext getContext]()</h3>
<p>
تقوم بإرجاع قيمة المتغير *context* في النطاق الخارجي ، إذا تم تحديده ، أو قم بتعيينه على [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext] جديدًا.
</p>
<h3>[method:AudioContext setContext]( [param:AudioContext value] )</h3>
<p>
تضبط المتغير *context* في النطاق الخارجي على *value*.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">
يمثل هذا المكون [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioListener listener] افتراضيًا من جميع المؤثرات الصوتية الموضعية وغير الموضعية في المشهد.<br />
عادةً ما يُنشئ تطبيق three.js مثيلاً واحدًا من هذا الكائن. إنها معلمة تفسير إلزامية لكيانات الصوت مثل [page:Audio Audio] و [page:PositionalAudio PositionalAudio].<br />
في معظم الحالات ، يكون الكائن المستمع هو كائن فرعي للكاميرا. لذا فإن التحول ثلاثي الأبعاد للكاميرا يمثل التحول ثلاثي الأبعاد للمستمع.
</p>
<h2>مثال التعليمة البرمجية</h2>
<code>
// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );
// create a global audio source
const sound = new THREE.Audio( listener );
// load a sound and set it as the Audio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setLoop(true);
sound.setVolume(0.5);
sound.play();
});
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_timing webaudio / timing ]<br />
[example:webaudio_visualizer webaudio / visualizer ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( )</h3>
<p>
يقوم بإنشاء AudioListener جديد.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:AudioContext context]</h3>
<p>الـ[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext] الخاصة بـ[page:AudioListener listener] المعطاة في المنشئ.</p>
<h3>[property:GainNode gain]</h3>
<p>[link:https://developer.mozilla.org/en-US/docs/Web/API/GainNode GainNode] تم إنشاؤه باستخدام [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createGain AudioContext.createGain](). </p>
<h3>[property:AudioNode filter]</h3>
<p>الافتراضي هو *null*.</p>
<h3>[property:Number timeDelta]</h3>
<p>قيمة دلتا الخاصة بالوقت للكيانات الصوتية. استخدم في سياق [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime AudioParam.linearRampToValueAtTimeDefault](). الافتراضي هو *0*.</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:GainNode getInput]()</h3>
<p>
ترجع قيمة [page:AudioListener.gain gainNode].
</p>
<h3>[method:AudioListener removeFilter]()</h3>
<p>
اضبط قيمة [page:AudioListener.filter filter] على *null*.
</p>
<h3>[method:AudioNode getFilter]()</h3>
<p>
ترجع قيمة الخاصة بـ[page:AudioListener.filter filter].
</p>
<h3>[method:this setFilter]( [param:AudioNode value] )</h3>
<p>
تقوم بتعيين خاصية [page:AudioListener.filter filter] إلى *value*.
</p>
<h3>[method:Float getMasterVolume]()</h3>
<p>
إعادة *volume*.
</p>
<h3>[method:this setMasterVolume]( [param:Number value] )</h3>
<p>
ضبط مستوى الصوت (volume).
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,136 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Object3D] &rarr; [page:Audio] &rarr;
<h1>[name]</h1>
<p class="desc">
تقوم بإنشاء كائن صوتي موضعي (positional).<br /><br />
يستخدم هذا [link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API].
</p>
<h2>مثال التعليمة البرمجية</h2>
<code>
// create an AudioListener and add it to the camera
const listener = new THREE.AudioListener();
camera.add( listener );
// create the PositionalAudio object (passing in the listener)
const sound = new THREE.PositionalAudio( listener );
// load a sound and set it as the PositionalAudio object's buffer
const audioLoader = new THREE.AudioLoader();
audioLoader.load( 'sounds/song.ogg', function( buffer ) {
sound.setBuffer( buffer );
sound.setRefDistance( 20 );
sound.play();
});
// create an object for the sound to play from
const sphere = new THREE.SphereGeometry( 20, 32, 16 );
const material = new THREE.MeshPhongMaterial( { color: 0xff2200 } );
const mesh = new THREE.Mesh( sphere, material );
scene.add( mesh );
// finally add the sound to the mesh
mesh.add( sound );
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webaudio_orientation webaudio / orientation ]<br />
[example:webaudio_sandbox webaudio / sandbox ]<br />
[example:webaudio_timing webaudio / timing ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:AudioListener listener] )</h3>
<p>
listener — (ضرورية) كائن [page:AudioListener AudioListener] .
</p>
<h2>الخصائص (Properties)</h2>
<p>
تراجع فئة [page:Audio Audio] من أجل الخصائص الموروثة.
</p>
<h3>[property:PannerNode panner]</h3>
<p> خاصية [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode PannerNode] التابعة لـ*PositionalAudio*.</p>
<h2>الوظائف (Methods)</h2>
<p>
راجع فئة [page:Audio Audio] من أجل الوظائف الموروثة.
</p>
<h3>[method:PannerNode getOutput]()</h3>
<p>
ترجع الـ[page:PositionalAudio.panner panner].
</p>
<h3>[method:Float getRefDistance]()</h3>
<p>
تُرجع القيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/refDistance panner.refDistance].
</p>
<h3>[method:this setRefDistance]( [param:Float value] )</h3>
<p>
يضبط قيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/refDistance panner.refDistance].
</p>
<h3>[method:Float getRolloffFactor]()</h3>
<p>
تُرجع القيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/rolloffFactor panner.rolloffFactor].
</p>
<h3>[method:this setRolloffFactor]( [param:Float value] )</h3>
<p>
يضبط قيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/rolloffFactor panner.rolloffFactor].
</p>
<h3>[method:String getDistanceModel]()</h3>
<p>
تُرجع القيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/distanceModel panner.distanceModel].
</p>
<h3>[method:this setDistanceModel]( [param:String value] )</h3>
<p>
يضبط قيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/distanceModel panner.distanceModel].
</p>
<h3>[method:Float getMaxDistance]()</h3>
<p>
تُرجع القيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/maxDistance panner.maxDistance].
</p>
<h3>[method:this setMaxDistance]( [param:Float value] )</h3>
<p>
يضبط قيمة [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/maxDistance panner.maxDistance].
</p>
<h3>[method:this setDirectionalCone]( [param:Float coneInnerAngle], [param:Float coneOuterAngle], [param:Float coneOuterGain] )</h3>
<p>
يمكن استخدام هذه الطريقة لتحويل الصوت متعدد الاتجاهات إلى [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode directional sound].
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,53 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Object3D] &rarr; [page:Camera] &rarr; [page:PerspectiveCamera] &rarr;
<h1>[name]</h1>
<p class="desc">
يمكن استخدام [name] لتقديم مشهد بكفاءة مع مجموعة محددة مسبقًا من الكاميرات. يعد هذا جانبًا مهمًا من جوانب الأداء لعرض مشاهد الواقع الافتراضي.<br />
يحمل دائمًا نموذج لـ [name] مصفوفة من الكاميرات الفرعية. من الضروري تحديد خاصية *viewport* لكل كاميرا فرعية والتي تحدد جزء منفذ العرض الذي يتم تقديمه باستخدام هذه الكاميرا.
</p>
<h2>أمثلة (Examples)</h2>
<p>[example:webgl_camera_array camera / array ]</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Array array] )</h3>
<p>
مجموعة من الكاميرات.
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع الفئة [page:PerspectiveCamera] الأساسية للممتلكات العامة.</p>
<h3>[property:Array cameras]</h3>
<p>
مجموعة من الكاميرات.
</p>
<h3>[property:Boolean isArrayCamera]</h3>
<p>
Read-only flag to check if a given object is of type [name].
</p>
<h2>الوظائف (Methods)</h2>
<p>راجع الفئة الأساسية [page:PerspectiveCamera] للتعرف على الطرق الشائعة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,83 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">
فئة أساسية مجردة للكاميرات. يجب أن يتم توريث هذه الفئة دائمًا عند إنشاء كاميرا جديدة.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]()</h3>
<p>
ينشئ كائن [name] جديد. لاحظ أن هذه الفئة لا يُقصد أن يتم استدعاؤها مباشرة ؛
ربما تريد [page:PerspectiveCamera] أو [page:OrthographicCamera] بدلاً من ذلك.
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع الفئة [page:Object3D] الأساسية للممتلكات العامة.</p>
<h3>[property:Boolean isCamera]</h3>
<p>
Read-only flag to check if a given object is of type [name].
</p>
<h3>[property:Layers layers]</h3>
<p>
ال [page:Layers layers] التي تعد الكاميرا عضو فيها. هذه ملكية موروثة من [page:Object3D].<br /><br />
يجب أن تشترك الكائنات في طبقة واحدة على الأقل مع الكاميرا لتظهر عند عرض وجهة نظر الكاميرا.
</p>
<h3>[property:Matrix4 matrixWorldInverse]</h3>
<p>
هذه القيمة هي نتيجة عكس matrixWorld. يحتوي MatrixWorld على Matrix الذي يحتوي على عالم تحويل الكاميرا.
</p>
<h3>[property:Matrix4 projectionMatrix]</h3>
<p>هذه هي المصفوفة التي تحتوي على الإسقاط.</p>
<h3>[property:Matrix4 projectionMatrixInverse]</h3>
<p>معكوس مصفوفة الإسقاط *projectionMatrix*.</p>
<h2>الوظائف (Methods)</h2>
<p>راجع الفئة الأساسية [page:Object3D] للتعرف على الطرق الشائعة.</p>
<h3>[method:Camera clone]( )</h3>
<p>
ترجع كاميرا جديدة بنفس خصائص هذه الكاميرا.
</p>
<h3>[method:this copy]( [param:Camera source], [param:Boolean recursive] )</h3>
<p>
تنسخ الخصائص من الكاميرا المصدر إلى هذه الكاميرا.
</p>
<h3>[method:Vector3 getWorldDirection]( [param:Vector3 target] )</h3>
<p>
[page:Vector3 target] — سيتم نسخ النتيجة في الـ*Vector3* الحالي. <br /><br />
ترجع [page:Vector3] التي تمثل اتجاه الفضاء العالمي الذي تنظر فيه الكاميرا.
(ملاحظة: تنظر الكاميرا إلى محورها z المحلي والسالب).<br /><br />
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,88 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Object3D] &rarr;
<h1>[name]</h1>
<p class="desc">يقوم بإنشاء 6 كاميرات يتم تحويلها إلى [page:WebGLCubeRenderTarget].</p>
<h2>مثال التعليمة البرمجية</h2>
<code>
// Create cube render target
const cubeRenderTarget = new THREE.WebGLCubeRenderTarget( 128, { generateMipmaps: true, minFilter: THREE.LinearMipmapLinearFilter } );
// Create cube camera
const cubeCamera = new THREE.CubeCamera( 1, 100000, cubeRenderTarget );
scene.add( cubeCamera );
// Create car
const chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeRenderTarget.texture } );
const car = new THREE.Mesh( carGeometry, chromeMaterial );
scene.add( car );
// Update the render target cube
car.setVisible( false );
cubeCamera.position.copy( car.position );
cubeCamera.update( renderer, scene );
// Render the scene
car.setVisible( true );
renderer.render( scene, camera );
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Number near], [param:Number far], [param:WebGLCubeRenderTarget renderTarget] )</h3>
<p>
near -- مسافة الاقتطاع القريبة. <br />
far -- مسافة القطع البعيدة <br />
renderTarget -- هدف عرض مكعب الوجهة *cube render target*.
</p>
<p>
ينشئ CubeCamera الذي يحتوي على 6 [page:PerspectiveCamera PerspectiveCameras] ذلك
الذي سيتم عرضه من خلال [page:WebGLCubeRenderTarget].
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع فئة [page:Object3D] الأساسية للخصائص العامة.</p>
<h3>[property:WebGLCubeRenderTarget renderTarget]</h3>
<p>
الهدف الخاص بـ*cube render target*.
</p>
<h2>الوظائف (Methods)</h2>
<p>راجع فئة [page:Object3D] الأساسية للخصائص العامة.</p>
<h3>[method:undefined update]( [param:WebGLRenderer renderer], [param:Scene scene] )</h3>
<p>
renderer -- عارض WebGL الحالي <br />
scene -- المشهد الحالي
</p>
<p>
استدعاء هذا لتحديث [page:CubeCamera.renderTarget renderTarget].
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,141 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Object3D] &rarr; [page:Camera] &rarr;
<h1>[name]</h1>
<p class="desc">
كاميرا تستخدم
[link:https://en.wikipedia.org/wiki/Orthographic_projection الإسقاط المجسمي].<br /><br />
في هذا النمط من الإسقاط، يبقى حجم الجسم
ثابتاً في الصورة المُرسَمَة بغض النظر عن مسافته من الكاميرا.<br /><br />
يمكن أن يكون هذا مفيداً لتصوير المشاهد ثنائية الأبعاد وعناصر واجهة المستخدم، وغيرها من
الأشياء.
</p>
<h2>مثال للكود</h2>
<code>
const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_camera camera ]<br />
[example:webgl_interactive_cubes_ortho interactive / cubes / ortho ]<br />
[example:webgl_materials_cubemap_dynamic materials / cubemap / dynamic]<br />
[example:webgl_postprocessing_advanced postprocessing / advanced ]<br />
[example:webgl_postprocessing_dof2 postprocessing / dof2 ]<br />
[example:webgl_postprocessing_godrays postprocessing / godrays ]<br />
[example:webgl_rtt rtt ]<br />
[example:webgl_shadowmap shadowmap ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Number left], [param:Number right], [param:Number top], [param:Number bottom], [param:Number near], [param:Number far] )</h3>
<p>
left — سطح الهرم الأيسر.<br />
right — سطح الهرم الأيمن.<br />
top — سطح الهرم العلوي.<br />
bottom — سطح الهرم السفلي.<br />
near — سطح الهرم الأمامي.<br />
far — سطح الهرم الخلفي.<br /><br />
معًا، تحدد هذه العناصر هرم العرض للكاميرا.
[link:https://en.wikipedia.org/wiki/Viewing_frustum هرم الرؤية].
</p>
<h2>الخصائص (Properties)</h2>
<p>
انظر إلى صفحة [page:Camera] الأساسية للحصول على الخصائص الشائعة.<br />
يرجى ملاحظة أنه بعد إجراء تغييرات على معظم هذه الخصائص، يجب عليك استدعاء
[page:OrthographicCamera.updateProjectionMatrix .updateProjectionMatrix]
لجعل التغييرات سارية المفعول.
</p>
<h3>[property:Float bottom]</h3>
<p>سطح الهرم السفلي للكاميرا.</p>
<h3>[property:Float far]</h3>
<p>
سطح الهرم الخلفي للكاميرا. العدد الافتراضي هو `2000`.<br /><br />
يجب أن يكون أكبر من القيمة الحالية لسطح الهرم الأمامي [page:.near near].
</p>
<h3>[property:Boolean isOrthographicCamera]</h3>
<p>علامة للقراءة فقط للتحقق مما إذا كان الكائن المعطى من النوع [name].</p>
<h3>[property:Float left]</h3>
<p>سطح الهرم الأيسر للكاميرا.</p>
<h3>[property:Float near]</h3>
<p>
سطح الهرم الأمامي للكاميرا. العدد الافتراضي هو `0.1`.<br /><br />
النطاق الصحيح هو بين `0` وقيمة الهرم الخلفي [page:.far far]. يرجى ملاحظة أنه، على عكس الـ [page:PerspectiveCamera]،
يمثل الصفر قيمة صالحة لسطح الهرم الأمامي في OrthographicCamera.
</p>
<h3>[property:Float right]</h3>
<p>سطح الهرم الأيمن للكاميرا.</p>
<h3>[property:Float top]</h3>
<p>سطح الهرم العلوي للكاميرا.</p>
<h3>[property:Object view]</h3>
<p>
`يتم تعيينها بواسطة [page:OrthographicCamera.setViewOffset setViewOffset]. العدد الافتراضي هو
`null`.
</p>
<h3>[property:number zoom]</h3>
<p>تُستخدم للحصول على قيمة عامل التكبير أو تعيينها للكاميرا. العدد الافتراضي هو `1`</p>
<h2>الوظائف (Methods)</h2>
<p>راجع صفحة [page:Camera] الأساسية للحصول على الأساليب الشائعة.</p>
<h3>[method:undefined setViewOffset]( [param:Float fullWidth], [param:Float fullHeight], [param:Float x], [param:Float y], [param:Float width], [param:Float height] )</h3>
<p>
fullWidth — العرض الكامل لإعداد العرض المتعدد.<br />
fullHeight — الارتفاع الكامل لإعداد العرض المتعدد.<br />
x — الإزاحة الأفقية للكاميرا الفرعية.<br />
y — الإزاحة العمودية للكاميرا الفرعية.<br />
width — عرض الكاميرا الفرعية.<br />
height — ارتفاع الكاميرا الفرعية.<br /><br />
يُعيّن إزاحة في
[link:https://en.wikipedia.org/wiki/Viewing_frustum هرم الرؤية]
أكبر. هذا مفيد لإعدادات النوافذ المتعددة أو إعدادات الشاشات / الأجهزة المتعددة.
لمثال حول كيفية استخدامها، انظر [page:PerspectiveCamera.setViewOffset PerspectiveCamera].
</p>
<h3>[method:undefined clearViewOffset]()</h3>
<p>تزيل أي إزاحة تم تعيينها بواسطة طريقة .setViewOffset.</p>
<h3>[method:undefined updateProjectionMatrix]()</h3>
<p>
تحديث مصفوفة إسقاط الكاميرا. يجب استدعاؤها بعد أي تغيير في
المعلمات.
</p>
<h3>[method:Object toJSON]([param:Object meta])</h3>
<p>
meta -- كائن يحتوي على بيانات وصفية مثل الخامات أو الصور في الأجزاء
الفرعية للكائنات.<br />
تحويل الكاميرا إلى تنسيق three.js
[link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene]
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,219 @@
!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Object3D] &rarr; [page:Camera] &rarr;
<h1>[name]</h1>
<p class="desc">
كاميرا تستخدم تصوير منظوري
[link:https://en.wikipedia.org/wiki/Perspective_(graphical) Perspective Projection].
تم تصميم هذا الوضع لمحاكاة الطريقة التي يرى بها العين البشرية.
وهو أكثر أنماط التصوير استخدامًا لإظهار مشهد ثلاثي الأبعاد.
</p>
<h2>مثال للكود</h2>
<code>
const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_animation_skinning_blending animation / skinning / blending]<br />
[example:webgl_animation_skinning_morph animation / skinning / morph ]<br />
[example:webgl_effects_stereo effects / stereo ]<br />
[example:webgl_interactive_cubes interactive / cubes ]<br />
[example:webgl_loader_collada_skinning loader / collada / skinning ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Number fov], [param:Number aspect], [param:Number near], [param:Number far] )</h3>
<p>
fov — زاوية مجال الرؤية الرأسية للكاميرا.<br />
aspect — نسبة العرض إلى الارتفاع للكاميرا.<br />
near — سطح الهرم الأمامي للكاميرا.<br />
far — سطح الهرم الخلفي للكاميرا.<br /><br />
معًا، يحدد هذه العناصر هرم الرؤية للكاميرا.
[link:https://en.wikipedia.org/wiki/Viewing_frustum هرم الرؤية]
</p>
<h2>الخصائص (Properties)</h2>
<p>
يرجى الرجوع إلى صفحة [page:Camera] الأساسية للحصول على الخصائص الشائعة.<br />
يرجى ملاحظة أنه بعد إجراء تغييرات على معظم هذه الخصائص، ستحتاج
إلى استدعاء [page:PerspectiveCamera.updateProjectionMatrix .updateProjectionMatrix] لجعل التغييرات سارية المفعول.
</p>
<h3>[property:Float aspect]</h3>
<p>
نسبة العرض إلى الارتفاع لسطح الهرم الرؤية (frustum) للكاميرا، وعادةً ما يكون العرض الخاص باللوحة السينمائية / الشاشة مقسومًا على ارتفاعها.
العدد الافتراضي هو `1` (لوحة سينمائية مربعة).
</p>
<h3>[property:Float far]</h3>
<p>
سطح الهرم الخلفي لسطح الرؤية (frustum) للكاميرا. العدد الافتراضي هو `2000`.<br /><br />
يجب أن يكون أكبر من القيمة الحالية لسطح الهرم الأمامي [page:.near near].
</p>
<h3>[property:Float filmGauge]</h3>
<p>
حجم الفيلم المستخدم للمحور الأكبر. العدد الافتراضي هو 35 (ملم).
لا يؤثر هذا المعلم على مصفوفة الإسقاط إلا إذا تم تعيين
.filmOffset إلى قيمة غير صفر.
</p>
<h3>[property:Float filmOffset]</h3>
<p>
الإزاحة الأفقية غير المركزة في نفس وحدة `.filmGauge`. العدد الافتراضي هو
`0`.
</p>
<h3>[property:Float focus]</h3>
<p>
مسافة الكائن المستخدمة لتحقيق تأثيرات الإسقاط المتزامن والعمق الحقيقي.
هذا المعلم لا يؤثر على مصفوفة الإسقاط إلا إذا تم استخدام [page:StereoCamera].
العدد الافتراضي هو `10`.
</p>
<h3>[property:Float fov]</h3>
<p>
زاوية مجال الرؤية الرأسية لسطح الهرم الرؤية (frustum) للكاميرا، من أسفل الرؤية إلى أعلى الرؤية، بالدرجات.
العدد الافتراضي هو `50`.
</p>
<h3>[property:Boolean isPerspectiveCamera]</h3>
<p>علامة تحقق للتحقق مما إذا كان الكائن المعطى من نوع [name]. هذه العلامة لا يمكن تعديلها.</p>
<h3>[property:Float near]</h3>
<p>
سطح الهرم الأمامي لسطح الرؤية (frustum) للكاميرا.
العدد الافتراضي هو `0.1`.<br /><br />
النطاق الصحيح هو أكبر من `0` وأقل من القيمة الحالية لسطح الهرم الخلفي [page:.far far].
يرجى ملاحظة أنه، على عكس الكاميرا المسطحة
[page:OrthographicCamera]، القيمة `0` ليست قيمة صالحة لسطح الهرم الأمامي لكاميرا من نوع PerspectiveCamera.
</p>
<h3>[property:Object view]</h3>
<p>
مواصفات نافذة هرم الرؤية (frustum) أو `null`.
يتم تعيين هذا باستخدام طريقة [page:PerspectiveCamera.setViewOffset .setViewOffset]
ويتم مسحها باستخدام [page:PerspectiveCamera.clearViewOffset .clearViewOffset].
</p>
<h3>[property:number zoom]</h3>
<p>يتم الحصول على قيمة عامل التكبير أو تعيينها للكاميرا. العدد الافتراضي هو `1`.</p>
<h2>الوظائف (Methods)</h2>
<p>يرجى الرجوع إلى صفحة [page:Camera] الأساسية للحصول على الأساليب الشائعة.</p>
<h3>[method:undefined clearViewOffset]()</h3>
<p>تزيل أي إزاحة تم تعيينها باستخدام طريقة [page:PerspectiveCamera.setViewOffset .setViewOffset].</p>
<h3>[method:Float getEffectiveFOV]()</h3>
<p>تُرجع زاوية مجال الرؤية الرأسية الحالية بالدرجات باعتبار .zoom.</p>
<h3>[method:Float getFilmHeight]()</h3>
<p>
تُرجع ارتفاع الصورة على الفيلم. إذا كان
.aspect أقل من الواحد (تنسيق صورة عمودي)، فإن النتيجة تساوي .filmGauge.
</p>
<h3>[method:Float getFilmWidth]()</h3>
<p>
تُرجع عرض الصورة على الفيلم. إذا كان
.aspect أكبر من أو يساوي الواحد (تنسيق صورة أفقي)، فإن النتيجة تساوي .filmGauge.
</p>
<h3>[method:Float getFocalLength]()</h3>
<p>
تُرجع البعد البؤري للـ .fov الحالي بالنسبة لـ .filmGauge.
</p>
<h3>[method:undefined setFocalLength]( [param:Float focalLength] )</h3>
<p>
يتم تعيين الـ FOV بواسطة البعد البؤري بالنسبة لـ
.filmGauge الحالي لـ[page:PerspectiveCamera].<br /><br />
بشكل افتراضي، يتم تحديد البعد البؤري للكاميرا بحجم 35 مم (إطار كامل).
</p>
<h3>[method:undefined setViewOffset]( [param:Float fullWidth], [param:Float fullHeight], [param:Float x], [param:Float y], [param:Float width], [param:Float height] )</h3>
<p>
fullWidth — العرض الكامل لإعداد العرض المتعدد<br />
fullHeight — الارتفاع الكامل لإعداد العرض المتعدد<br />
x — الإزاحة الأفقية للكاميرا الفرعية<br />
y — الإزاحة الرأسية للكاميرا الفرعية<br />
width — عرض الكاميرا الفرعية<br />
height — ارتفاع الكاميرا الفرعية
</p>
<p>
يضبط الإزاحة في هرم الرؤية الأكبر.
هذا مفيد لإعدادات النوافذ المتعددة أو إعدادات متعددة الشاشات/الأجهزة.
</p>
<p>
على سبيل المثال، إذا كان لديك 3x2 شاشة
وكانت كل شاشة 1920x1080 وكانت الشاشات في شبكة مثل هذه:<br />
</p>
<pre>
+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+
</pre>
فمن أجل كل شاشة، ستقوم بالاستدعاء بهذا الشكل:<br />
<code>const w = 1920;
const h = 1080;
const fullWidth = w * 3;
const fullHeight = h * 2;
// A
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 0, w, h );
// B
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 0, w, h );
// C
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 0, w, h );
// D
camera.setViewOffset( fullWidth, fullHeight, w * 0, h * 1, w, h );
// E
camera.setViewOffset( fullWidth, fullHeight, w * 1, h * 1, w, h );
// F
camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
</code>
<p>يرجى ملاحظة أنه لا يوجد سبب لأن تكون الشاشات بحجم متساوٍ أو متوضعة على شكل شبكة. يمكن توزيعها بأي شكل يناسب الاحتياجات المحددة.</p>
<h3>[method:undefined updateProjectionMatrix]()</h3>
<p>
يقوم بتحديث مصفوفة الإسقاط الخاصة بالكاميرا، ويجب استدعاءها بعد أي تغيير في
المعاملات.
</p>
<h3>[method:Object toJSON]([param:Object meta])</h3>
<p>
meta -- كائن يحتوي على بيانات وصفية مثل القوام أو الصور في الكائنات
الفرعية.<br />
يمكن تحويل الكاميرا إلى تنسيق three.js
[link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,59 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
كاميرات بتأثير مزدوج [page:PerspectiveCamera] تستخدم لتحقيق تأثيرات مثل
[link:https://en.wikipedia.org/wiki/Anaglyph_3D 3D Anaglyph] أو
[link:https://en.wikipedia.org/wiki/parallax_barrier Parallax Barrier].
</p>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_effects_anaglyph effects / anaglyph ]<br />
[example:webgl_effects_parallaxbarrier effects / parallaxbarrier ]<br />
[example:webgl_effects_stereo effects / stereo ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( )</h3>
<h2>الخصائص (Properties)</h2>
<h3>[property:Float aspect]</h3>
<p>العدد الافتراضي هو `1`.</p>
<h3>[property:Float eyeSep]</h3>
<p>العدد الافتراضي هو `0.064`.</p>
<h3>[property:PerspectiveCamera cameraL]</h3>
<p>
الكاميرا اليسرى. يتم إضافتها إلى [page:Layers layer 1] - يجب أن يتم إضافة الكائنات التي يتم عرضها
بالكاميرا اليسرى إلى هذه الطبقة أيضًا.
</p>
<h3>[property:PerspectiveCamera cameraR]</h3>
<p>
الكاميرا اليمنى. يتم إضافتها إلى [page:Layers layer 2] - يجب أن يتم إضافة الكائنات التي يتم عرضها
بالكاميرا اليمنى إلى هذه الطبقة أيضًا.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:undefined update]( [param:PerspectiveCamera camera] )</h3>
<p>يقوم بتحديث الكاميرات الاستريو بناءً على الكاميرا الممررة كمعامل.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>Animation Constants</h1>
<h2>وضعيات التكرار (Loop Modes)</h2>
<code>
THREE.LoopOnce
THREE.LoopRepeat
THREE.LoopPingPong
</code>
<h2>وضعيات التداخل (Interpolation Modes)</h2>
<code>
THREE.InterpolateDiscrete
THREE.InterpolateLinear
THREE.InterpolateSmooth
</code>
<h2>وضعيات النهاية (Ending Modes)</h2>
<code>
THREE.ZeroCurvatureEnding
THREE.ZeroSlopeEnding
THREE.WrapAroundEnding
</code>
<h2>وضعيات الدمج للرسوم المتحركة (Animation Blend Modes)</h2>
<code>
THREE.NormalAnimationBlendMode
THREE.AdditiveAnimationBlendMode
</code>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>ثوابت استخدام بيانات الذاكرة المؤقتة (Buffer Attribute Usage Constants)</h1>
<p>
يمكن استخدام الثوابت التي تحدد طريقة استخدام بيانات الذاكرة المؤقتة للهيكل الهندسي لتعطي تلميحاً لواجهة برمجة التطبيقات API بشأن كيفية استخدام بيانات الذاكرة المؤقتة لتحسين الأداء.
</p>
<h2>مثال للكود</h2>
<code>
const geometry = new THREE.BufferGeometry();
const positionAttribute = new THREE.BufferAttribute( array, 3 , false );
positionAttribute.setUsage( THREE.DynamicDrawUsage );
geometry.setAttribute( 'position', positionAttribute );
</code>
<h2>أمثلة (Examples)</h2>
<p>[example:webgl_buffergeometry_drawrange materials / buffergeometry / drawrange ]</p>
<h2>استخدام الهيكل الهندسي</h2>
<code>
THREE.StaticDrawUsage
THREE.DynamicDrawUsage
THREE.StreamDrawUsage
THREE.StaticReadUsage
THREE.DynamicReadUsage
THREE.StreamReadUsage
THREE.StaticCopyUsage
THREE.DynamicCopyUsage
THREE.StreamCopyUsage
</code>
للحصول على معلومات أكثر تفصيلاً حول كل هذه الثوابت، يرجى الرجوع إلى
[link:https://www.khronos.org/opengl/wiki/Buffer_Object#Buffer_Object_Usage هذا الدليل الخاص بـ OpenGL].
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>الثوابت الأساسية (Core Constants)</h1>
<h2>رقم النسخة (Revision Number)</h2>
<code>
THREE.REVISION
</code>
<div id="rev">
رقم النسخة الحالي لـ three.js هو [link:https://github.com/mrdoob/three.js/releases رقم الإصدار].
</div>
<h2>مساحات الألوان (Color Spaces)</h2>
<code>
THREE.NoColorSpace = ""
THREE.SRGBColorSpace = "srgb"
THREE.LinearSRGBColorSpace = "srgb-linear"
</code>
<p>
[page:NoColorSpace]ﻻ يحدد مساحة الألوان بشكل عام. ويستخدم عادة للقواميس الخاصة بالألوان المتوسطة، مثل الخرائط العادية، وخرائط التصلب، وخرائط اللمعان، وخرائط الظل، والبيانات غير اللونية الأخرى.
</p>
<p>
[page:SRGBColorSpace] ("srgb") يشير إلى مساحة الألوان التي تم تعريفها بواسطة المعايير الرئيسية Rec. 709، ونقطة الأبيض D65، والوظائف اللاخطية لنقل sRGB. وهو المساحة الافتراضية للألوان في CSS، ويتم العثور عليها في العديد من الباليتات اللونية وأدوات اختيار الألوان. وعادةً ما تكون الألوان المعبر عنها بالتعبير الست عشري أو CSS في مساحة الألوان sRGB.
</p>
<p>
[page:LinearSRGBColorSpace] ("srgb-linear") يشير إلى مساحة الألوان sRGB (أعلاه) مع وظائف نقل النقل الخطي. وهي المساحة الافتراضية للألوان في three.js، وتستخدم طوال معظم عملية العرض. وتكون مكونات RGB التي توجد في مواد three.js والشواهد (shaders) في مساحة الألوان Linear-sRGB.
<p>للمزيد من المعلومات حول الخلفية والاستخدام، يرجى الرجوع إلى "إدارة الألوان".</p>
<h2>أزرار الماوس (Mouse Buttons)</h2>
<code>
THREE.MOUSE.LEFT
THREE.MOUSE.MIDDLE
THREE.MOUSE.RIGHT
THREE.MOUSE.ROTATE
THREE.MOUSE.DOLLY
THREE.MOUSE.PAN
</code>
<p>
تحمل الثوابت LEFT و ROTATE نفس القيمة الأساسية. كذلك الثوابت MIDDLE و DOLLY تحملان نفس القيمة الأساسية. وتحمل الثوابت RIGHT و PAN نفس القيمة الأساسية.
</p>
<h2>إجراءات اللمس (Touch Actions)</h2>
<code>
THREE.TOUCH.ROTATE THREE.TOUCH.PAN THREE.TOUCH.DOLLY_PAN
THREE.TOUCH.DOLLY_ROTATE
</code>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>

@ -0,0 +1,68 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>ثوابت معادلات الدمج المخصصة (Custom Blending Equation Constants)</h1>
<p>
تعمل هذه الثوابت مع جميع أنواع المواد. يتم تعيين وضع الدمج للمادة أولاً إلى THREE.CustomBlending، ثم تعيين معادلة الدمج المطلوبة وعامل المصدر وعامل الوجهة.
</p>
<h2>مثال للكود</h2>
<code>
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );
material.blending = THREE.CustomBlending;
material.blendEquation = THREE.AddEquation; //default
material.blendSrc = THREE.SrcAlphaFactor; //default
material.blendDst = THREE.OneMinusSrcAlphaFactor; //default
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_materials_blending_custom materials / blending / custom ]
</p>
<h2>معادلات الدمج (Blending Equations)</h2>
<code>
THREE.AddEquation
THREE.SubtractEquation
THREE.ReverseSubtractEquation
THREE.MinEquation
THREE.MaxEquation
</code>
<h2>عوامل المصدر (Source Factors)</h2>
<code>
THREE.ZeroFactor
THREE.OneFactor
THREE.SrcColorFactor
THREE.OneMinusSrcColorFactor
THREE.SrcAlphaFactor
THREE.OneMinusSrcAlphaFactor
THREE.DstAlphaFactor
THREE.OneMinusDstAlphaFactor
THREE.DstColorFactor
THREE.OneMinusDstColorFactor
THREE.SrcAlphaSaturateFactor
</code>
<h2>عوامل الوجهة (Destination Factors)</h2>
<p>
جميع عوامل المصدر صالحة كعوامل وجهة، باستثناء
<code>THREE.SrcAlphaSaturateFactor</code>
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>

@ -0,0 +1,153 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>ثوابت المواد الخام (Material Constants)</h1>
<p class="desc">
تحدد هذه الثوابت الخصائص المشتركة بين جميع أنواع المواد الخام، باستثناء عمليات تجميع القوام الخاصة التي تنطبق فقط على
[page:MeshBasicMaterial.combine MeshBasicMaterial]،
[page:MeshLambertMaterial.combine MeshLambertMaterial] و
[page:MeshPhongMaterial.combine MeshPhongMaterial].<br />
</p>
<h2>الجانب (Side)</h2>
<code>
THREE.FrontSide
THREE.BackSide
THREE.DoubleSide
</code>
<p>
تحدد الجانب الذي سيتم عرضه للوجوه، سواءً الوجه الأمامي، الوجه الخلفي، أو كلاهما. الإعداد الافتراضي هو الوجه الأمامي.
</p>
<h2>وضعية الدمج (Blending Mode)</h2>
<code>
THREE.NoBlending
THREE.NormalBlending
THREE.AdditiveBlending
THREE.SubtractiveBlending
THREE.MultiplyBlending
THREE.CustomBlending
</code>
<p>
تحكم هذه الثوابت في معادلات الدمج بين المصدر والوجهة للألوان والألفا التي يتم إرسالها من المواد إلى WebGLRenderer للاستخدام بواسطة WebGL.
[page:Constant NormalBlending] هي الإعداد الافتراضي. ويجب تعيين [page:Constant CustomBlending] لاستخدام [page:CustomBlendingEquation Custom Blending Equations].
راجع مثال [example:webgl_materials_blending materials / blending].
</p>
<h2>وضعية العمق (Depth Mode)</h2>
<code>
THREE.NeverDepth
THREE.AlwaysDepth
THREE.EqualDepth
THREE.LessDepth
THREE.LessEqualDepth
THREE.GreaterEqualDepth
THREE.GreaterDepth
THREE.NotEqualDepth
</code>
<p>
تحدد وظيفة العمق التي تستخدمها المواد لمقارنة عمق بيكسلات الإدخال مع قيمة العمق الحالية في الذاكرة المؤقتة للعمق. إذا كانت نتيجة المقارنة صحيحة، فسيتم رسم البكسل.<br />
[page:Materials NeverDepth] لن يتم رسم أي بكسل.<br />
[page:Materials AlwaysDepth] سيتم رسم كل البكسلات.<br />
[page:Materials EqualDepth] سيتم رسم البكسل إذا كان عمق البكسل المدخل مساوٍ لعمق الذاكرة المؤقتة الحالي.<br />
[page:Materials LessDepth] سيتم رسم البكسل إذا كان عمق البكسل المدخل أقل من عمق الذاكرة المؤقتة الحالي.<br />
[page:Materials LessEqualDepth] هي الإعداد الافتراضي وسيتم رسم البكسل إذا كان عمق البكسل المدخل أقل من أو يساوي عمق الذاكرة المؤقتة الحالي.<br />
[page:Materials GreaterEqualDepth] سيتم رسم البكسل إذا كان عمق البكسل المدخل أكبر من أو يساوي عمق الذاكرة المؤقتة الحالي.<br />
[page:Materials GreaterDepth] سيتم رسم البكسل إذا كان عمق البكسل المدخل أكبر من عمق الذاكرة المؤقتة الحالي.<br />
[page:Materials NotEqualDepth] سيتم رسم البكسل إذا كان عمقالبكسل المدخل لا يساوي عمق الذاكرة المؤقتة الحالي.<br />
</p>
<h2>عمليات تجميع القوام الخاصة بالقوام (Texture Combine Operations)</h2>
<code>
THREE.MultiplyOperation
THREE.MixOperation
THREE.AddOperation
</code>
<p>
تحدد هذه الثوابت كيفية دمج لون سطح الكائن مع خريطة البيئة (إذا كانت متاحة) في [page:MeshBasicMaterial.combine MeshBasicMaterial]،
[page:MeshLambertMaterial.combine MeshLambertMaterial]
و [page:MeshPhongMaterial.combine MeshPhongMaterial]. <br />
[page:Constant MultiplyOperation] هي الإعداد الافتراضي وتقوم بضرب لون خريطة البيئة بلون سطح الكائن.<br />
[page:Constant MixOperation] تستخدم معامل الانعكاسية لدمج اللونين.<br />
[page:Constant AddOperation] تقوم بجمع اللونين.
</p>
<h2>دوال القالب (Stencil Functions)</h2>
<code>
THREE.NeverStencilFunc
THREE.LessStencilFunc
THREE.EqualStencilFunc
THREE.LessEqualStencilFunc
THREE.GreaterStencilFunc
THREE.NotEqualStencilFunc
THREE.GreaterEqualStencilFunc
THREE.AlwaysStencilFunc
</code>
<p>
تحدد الدالة التي يستخدمها المادة لتحديد ما إذا كان يجب أن تنفذ عملية القالب أم لا.<br />
[page:Materials NeverStencilFunc] لن يعود بقيمة صحيحة أبدًا.<br />
[page:Materials LessStencilFunc] سيعود بقيمة صحيحة إذا كانت قيمة المرجع الختمية أقل من القيمة الحالية للختم.<br />
[page:Materials EqualStencilFunc] سيعود بقيمة صحيحة إذا كانت قيمة المرجع الختمية تساوي القيمة الحالية للختم.<br />
[page:Materials LessEqualStencilFunc] سيعود بقيمة صحيحة إذا كانت قيمة المرجع الختمية أقل من أو تساوي القيمة الحالية للختم.<br />
[page:Materials GreaterStencilFunc] سيعود بقيمة صحيحة إذا كانت قيمة المرجع الختمية أكبر من القيمة الحالية للختم.<br />
[page:Materials NotEqualStencilFunc] سيعود بقيمة صحيحة إذا كانت قيمة المرجع الختمية لا تساوي القيمة الحالية للختم.<br />
[page:Materials GreaterEqualStencilFunc] سيعود بقيمة صحيحة إذا كانت قيمة المرجع الختمية أكبر من أو تساوي القيمة الحالية للختم.<br />
[page:Materials AlwaysStencilFunc] سيعود بقيمة صحيحة دائمًا.<br />
</p>
<h2>عمليات القالب (Stencil Operations)</h2>
<code>
THREE.ZeroStencilOp
THREE.KeepStencilOp
THREE.ReplaceStencilOp
THREE.IncrementStencilOp
THREE.DecrementStencilOp
THREE.IncrementWrapStencilOp
THREE.DecrementWrapStencilOp
THREE.InvertStencilOp
</code>
<p>
تحدد العملية التي ستقوم بها المادة على ختم البيكسل في الختم إذا مرت الدالة الختمية المقدمة.<br />
[page:Materials ZeroStencilOp] سيضبط قيمة الختم على الصفر.<br />
[page:Materials KeepStencilOp] لن يقوم بتغيير قيمة الختم الحالية.<br />
[page:Materials ReplaceStencilOp] سيقوم بتبديل قيمة الختم بقيمة المرجع الختمية المحددة.<br />
[page:Materials IncrementStencilOp] سيزيد قيمة الختم الحالية بمقدار `1`.<br />
[page:Materials DecrementStencilOp] سينقص قيمة الختم الحالية بمقدار `1`.<br />
[page:Materials IncrementWrapStencilOp] سيزيد قيمة الختم الحالية بمقدار `1`. إذا زادت القيمة بعد ذلك عن `255`، فستضبط على `0`.<br />
[page:Materials DecrementWrapStencilOp] سينقص قيمة الختم الحالية بمقدار `1`. إذا انخفضت القيمة بعد ذلك أقل من `0`، فستضبط على `255`.<br />
[page:Materials InvertStencilOp] سيقوم بتنفيذ عملية انعكاس بتشكيلة الختم الحالية.<br />
</p>
<h2>نوع خريطة العرض الطبيعي (Normal map type)</h2>
<code>
THREE.TangentSpaceNormalMap
THREE.ObjectSpaceNormalMap
</code>
<p>
تحدد نوع خريطة العرض الطبيعي. لـTangentSpaceNormalMap، المعلومات ذات الصلة بالسطح الأساسي. أما بالنسبة لـ ObjectSpaceNormalMap، المعلومات ذات الصلة باتجاه الكائن. الإعداد الافتراضي هو [page:Constant TangentSpaceNormalMap].
</p>
<h2>إصدار GLSL</h2>
<code>
THREE.GLSL1
THREE.GLSL3
</code>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>ثوابت WebGLRenderer</h1>
<h2>أنماط قطع الوجه (Cull Face Modes)</h2>
<code>
THREE.CullFaceNone
THREE.CullFaceBack
THREE.CullFaceFront
THREE.CullFaceFrontBack
</code>
<p>
[page:constant CullFaceNone] تعطيل قطع الوجه.<br />
[page:constant CullFaceBack] قطع الوجوه الخلفية (الافتراضي).<br />
[page:constant CullFaceFront] قطع الوجوه الأمامية.<br />
[page:constant CullFaceFrontBack] قطع كلا الوجوه الأمامية والخلفية.
</p>
<h2>أنواع الظلال (Shadow Types)</h2>
<code>
THREE.BasicShadowMap
THREE.PCFShadowMap
THREE.PCFSoftShadowMap
THREE.VSMShadowMap
</code>
<p>
هذه الخيارات تحدد خاصية [page:WebGLRenderer.shadowMap.type shadowMap.type] في WebGLRenderer.<br /><br />
[page:constant BasicShadowMap] يعطي خرائط ظل غير مصفاة - الأسرع ، ولكن الأقل جودة.<br />
[page:constant PCFShadowMap] يصفي خرائط الظل باستخدام خوارزمية
Percentage-Closer Filtering (PCF) (افتراضي).<br />
[page:constant PCFSoftShadowMap] يصفي خرائط الظل باستخدام خوارزمية
Percentage-Closer Filtering (PCF) مع أفضل الظلال الناعمة
خاصةً عند استخدام خرائط ظل بدقة منخفضة.<br />
[page:constant VSMShadowMap] يصفي خرائط الظل باستخدام خوارزمية Variance Shadow
Map (VSM). عند استخدام VSMShadowMap ، سيقوم جميع مستقبلات الظل بإلقاء الظلال أيضًا.
</p>
<h2>Tone Mapping</h2>
<code>
THREE.NoToneMapping
THREE.LinearToneMapping
THREE.ReinhardToneMapping
THREE.CineonToneMapping
THREE.ACESFilmicToneMapping
THREE.AgXToneMapping
THREE.NeutralToneMapping
THREE.CustomToneMapping
</code>
<p>
هذه الخيارات تحدد خاصية [page:WebGLRenderer.toneMapping toneMapping] في WebGLRenderer. يتم استخدام هذا لتقريب مظهر نطاق الإضاءة العالي (HDR) على الوسط الذي يحتوي على نطاق إضاءة منخفض على شاشة الكمبيوتر القياسية أو شاشة الجوال.
</p>
<p>
THREE.LinearToneMapping، THREE.ReinhardToneMapping، THREE.CineonToneMapping، THREE.ACESFilmicToneMapping، THREE.AgXToneMapping و THREE.NeutralToneMapping هي تنفيذات مدمجة لتقريب مظهر نطاق الإضاءة العالي (HDR). يتوقع THREE.CustomToneMapping تنفيذًا مخصصًا عن طريق تعديل شفرة GLSL لبرنامج تظليل مقطع المواد. راجع [example:webgl_tonemapping WebGL / tonemapping] مثالًا.
</p>
<p>
THREE.NeutralToneMapping is an implementation based on the Khronos 3D Commerce Group standard tone mapping.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>

@ -0,0 +1,601 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>ثوابت القوام (Texture Constants)</h1>
<h2>أوضاع التعيين (Mapping Modes)</h2>
<code>
THREE.UVMapping
THREE.CubeReflectionMapping
THREE.CubeRefractionMapping
THREE.EquirectangularReflectionMapping
THREE.EquirectangularRefractionMapping
THREE.CubeUVReflectionMapping
</code>
<p>
هذه تحدد وضع تعيين القوام. <br />
[page:Constant UVMapping] هو الافتراضي ، ويقوم بتعيين القوام باستخدام إحداثيات UV للشبكة. <br /> <br />
الباقي يحدد أنواع تعيين البيئة. <br /> <br />
[page:Constant CubeReflectionMapping] و [page:Constant CubeRefractionMapping] للاستخدام مع [page:CubeTexture CubeTexture] ،
والتي تتكون من ستة قوام ، واحد لكل وجه من النرد.
[page:Constant CubeReflectionMapping] هو الافتراضي لـ
[page:CubeTexture CubeTexture]. <br /> <br />
[page:Constant EquirectangularReflectionMapping] و [page:Constant EquirectangularRefractionMapping] للاستخدام مع خريطة بيئة مستطيلة
. يسمى أيضًا خريطة lat-long ، قوام مستطيل
يمثل عرض 360 درجة على طول خط المركز الأفقي ، وعرض 180 درجة على طول المحور الرأسي ، مع حواف الأعلى والأسفل من
الصورة المقابلة للقطبين الشمال والجنوب من مجال معين
كروية. <br /> <br />
راجع المثال [example:webgl_materials_envmaps materials / envmaps].
</p>
<h2>أوضاع التغليف (Wrapping Modes)</h2>
<code>
THREE.RepeatWrapping
THREE.ClampToEdgeWrapping
THREE.MirroredRepeatWrapping
</code>
<p>
هذه تحدد خصائص [page:Texture.wrapS wrapS] و [page:Texture.wrapT wrapT] للقوام ، التي تحدد التغليف الأفقي والرأسي للقوام. <br /> <br />
مع [page:constant RepeatWrapping] ستتكرر القوام ببساطة إلى ما لانهاية. <br /> <br />
[page:constant ClampToEdgeWrapping] هو الافتراضي. يمتد بكسل آخر من القوام إلى حافة الشبكة. <br /> <br />
مع [page:constant MirroredRepeatWrapping] ستتكرر القوام إلى ما لانهاية ، مع عكس كل تكرار.
</p>
<h2>مرشحات التكبير (Magnification Filters)</h2>
<code>
THREE.NearestFilter
THREE.LinearFilter
</code>
<p>
للاستخدام مع خاصية [page:Texture.magFilter magFilter] للقوام ،
هذه تحدد وظيفة تكبير القوام المستخدمة عندما يتم تعيين البكسل المتعين
إلى منطقة أقل من أو تساوي عنصر قوام واحد (texel). <br /> <br />
[page:constant NearestFilter] يعيد قيمة عنصر القوام
الأقرب (في مسافة مانهاتن) إلى الإحداثيات المحددة للقوام.
<br /> <br />
[page:constant LinearFilter] هو الافتراضي ويعيد المتوسط ​​المرجح
للعناصر الأربعة من القوام التي هي الأقرب إلى الإحداثيات المحددة
للقوام ، ويمكن أن يشمل عناصر ملفوفة أو مكررة من أجزاء أخرى
من قوام ، اعتمادًا على قيم [page:Texture.wrapS wrapS]
و [page:Texture.wrapT wrapT] ، وعلى التعيين الدقيق.
</p>
<h2>مرشحات التصغير (Minification Filters)</h2>
<code>
THREE.NearestFilter
THREE.NearestMipmapNearestFilter
THREE.NearestMipmapLinearFilter
THREE.LinearFilter
THREE.LinearMipmapNearestFilter
THREE.LinearMipmapLinearFilter
</code>
<p>
للاستخدام مع خاصية [page:Texture.minFilter minFilter] للقوام ،
هذه تحدد وظيفة تصغير القوام المستخدمة كلما كانت البكسل المتعين
يتطابق مع منطقة أكبر من عنصر قوام واحد (texel). <br /> <br />
بالإضافة إلى [page:constant NearestFilter] و [page:constant LinearFilter] ، يمكن استخدام الأربع وظائف التالية لـ
التصغير: <br /> <br />
[page:constant NearestMipmapNearestFilter] يختار mipmap الذي
يطابق حجم البكسل المتعين بشكل أكثر تطابقًا ويستخدم
معيار [page:constant NearestFilter] (ال texel الأقرب إلى المركز
من البكسل) لإنتاج قيمة قوام. <br /> <br />
[page:constant NearestMipmapLinearFilter] يختار mipmaps اثنان
يطابق حجم البكسل المتعين بشكل أكثر تطابقًا ويستخدم
معيار [page:constant NearestFilter] لإنتاج قيمة قوام من
كل mipmap. قيمة القوام النهائية هى متوسط ​​مرجح من هذه القيمتين. <br /> <br />
[page:constant LinearMipmapNearestFilter] يختار mipmap الذي
يطابق حجم البكسل المتعين بشكل أكثر تطابقًا ويستخدم
معيار [page:constant LinearFilter] (المتوسط ​​المرجح لأربعة `texels`)
التي هي الأقرب إلى مركز البكسل) لإنتاج قيمة قوام. <br /> <br />
[page:constant LinearMipmapLinearFilter] هو الافتراضي ويلتقط mipmaps اثنان
يطابق حجم البكسل المتعين بشكل أكثر تطابقًا ويلتقط [page:constant LinearFilter]
معاير لإنتاج قيمة قوام من كل mipmap. قيمة القوام النهائية هى متوسط ​​مرجح من
هذه القيمتين.
انظر إلى المثال [example:webgl_materials_texture_filters materials / texture / filters].
</p>
<h2>الأنواع (Types)</h2>
<code>
THREE.UnsignedByteType
THREE.ByteType
THREE.ShortType
THREE.UnsignedShortType
THREE.IntType
THREE.UnsignedIntType
THREE.FloatType
THREE.HalfFloatType
THREE.UnsignedShort4444Type
THREE.UnsignedShort5551Type
THREE.UnsignedInt248Type
THREE.UnsignedInt5999Type
</code>
<p>
للاستخدام مع خاصية [page:Texture.type type] للقوام ، التي يجب
أن تتوافق مع التنسيق الصحيح. انظر أدناه للحصول على التفاصيل. <br /> <br />
[page:constant UnsignedByteType] هو الافتراضي.
</p>
<h2>التنسيقات (Formats)</h2>
<code>
THREE.AlphaFormat
THREE.RedFormat
THREE.RedIntegerFormat
THREE.RGFormat
THREE.RGIntegerFormat
THREE.RGBFormat
THREE.RGBAFormat
THREE.RGBAIntegerFormat
THREE.DepthFormat
THREE.DepthStencilFormat
</code>
<p>
للاستخدام مع خاصية [page:Texture.format format] للقوام ، هذه
تحدد كيفية قراءة عناصر قوام ثنائي الأبعاد ، أو `texels` ، بواسطة المظللات. <br /> <br />
[page:constant AlphaFormat] يتجاهل المكونات الحمراء والخضراء والزرقاء
ويقرأ فقط المكون الألفا. <br /> <br />
[page:constant RedFormat] يتجاهل المكونات الخضراء والزرقاء ويقرأ
فقط المكون الأحمر.
<br /> <br />
[page:constant RedIntegerFormat] يتجاهل المكونات الخضراء والزرقاء
ويقرأ فقط المكون الأحمر. يتم قراءة `texels` كأعداد صحيحة بدلاً من
نقطة عائمة.
<br /> <br />
[page:constant RGFormat] يتجاهل المكونات الألفا والزرقاء ويقرأ
المكونات الحمراء والخضراء.
<br /> <br />
[page:constant RGIntegerFormat] يتجاهل المكونات الألفا والزرقاء
ويقرأ المكونات الحمراء والخضراء. يتم قراءة `texels` كأعداد صحيحة بدلاً من
نقطة عائمة.
<br /> <br />
[page:constant RGBAFormat] هو الافتراضي ويلتقط المكونات الحمراء والخضراء والزرقاء
والألفا. <br /> <br />
[page:constant RGBAIntegerFormat] هو الافتراضي ويلتقط المكونات الحمراء والخضراء ،
الزرقاء والألفا. يتم قراءة `texels` كأعداد صحيحة بدلاً من
نقطة عائمة.
<br /> <br />
[page:constant DepthFormat] يقرأ كل عنصر كقيمة عمق واحدة ،
يتحول إلى نقطة عائمة ، ويتم تثبيته في النطاق [0،1]. هذا هو
الافتراضي لـ [page:DepthTexture DepthTexture]. <br /> <br />
[page:constant DepthStencilFormat] يقرأ كل عنصر هو زوج من العمق
وقيم المسح. يتم تفسير مكون العمق من الزوج كما هو مذكور في
[page:constant DepthFormat]. يتم تفسير مكون المسح بناءً على
التنسيق الداخلي للعمق + المسح.
<br /> <br />
لاحظ أنه يجب أن يكون للقوام نوع [page:Texture.type type] صحيحًا
كما هو مذكور أعلاه. انظر
[link:https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext/texImage2D WebGLRenderingContext.texImage2D] للحصول على التفاصيل.
</p>
<h2>تنسيقات القوام المضغوطة DDS / ST3C</h2>
<code>
THREE.RGB_S3TC_DXT1_Format
THREE.RGBA_S3TC_DXT1_Format
THREE.RGBA_S3TC_DXT3_Format
THREE.RGBA_S3TC_DXT5_Format
</code>
<p>
للاستخدام مع خاصية [page:Texture.format format] لـ [page:CompressedTexture CompressedTexture] ،
هذه تتطلب دعمًا للتمديد
[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_s3tc/ WEBGL_compressed_texture_s3tc]. <br /> <br />
هناك أربعة [link:https://en.wikipedia.org/wiki/S3_Texture_Compression تنسيقات S3TC]
متاحة عبر هذا التمديد. هذه هي: <br />
[page:constant RGB_S3TC_DXT1_Format]: صورة مضغوطة بتنسيق DXT1 في تنسيق صورة RGB.
<br />
[page:constant RGBA_S3TC_DXT1_Format]: صورة مضغوطة بتنسيق DXT1 في تنسيق صورة RGB
مع قيمة ألفا بسيطة تشغيل / إيقاف. <br />
[page:constant RGBA_S3TC_DXT3_Format]: صورة مضغوطة بتنسيق DXT3 في تنسيق صورة RGBA.
مقارنة بقوام RGBA 32 بت ، يوفر ضغطًا 4: 1. <br />
[page:constant RGBA_S3TC_DXT5_Format]: صورة مضغوطة بتنسيق DXT5 في تنسيق صورة RGBA.
كما يوفر ضغطًا 4: 1 ، ولكن يختلف عن ضغط DXT3 في كيفية ضغط الألفا. <br />
</p>
<h2>تنسيقات القوام المضغوط PVRTC</h2>
<code>
THREE.RGB_PVRTC_4BPPV1_Format
THREE.RGB_PVRTC_2BPPV1_Format
THREE.RGBA_PVRTC_4BPPV1_Format
THREE.RGBA_PVRTC_2BPPV1_Format
</code>
<p>
للاستخدام مع خاصية [page:Texture.format format] لـ [page:CompressedTexture CompressedTexture] ،
هذه تتطلب دعمًا للتمديد
[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_pvrtc/ WEBGL_compressed_texture_pvrtc]. <br />
عادةً ما يكون PVRTC متاحًا فقط على الأجهزة المحمولة التي تحتوي على شرائح PowerVR ،
والتي هي في الغالب أجهزة Apple. <br /> <br />
هناك أربعة [link:https://en.wikipedia.org/wiki/PVRTC تنسيقات PVRTC]
متاحة عبر هذا التمديد. هذه هي: <br />
[page:constant RGB_PVRTC_4BPPV1_Format]: ضغط RGB في وضع 4 بت.
كتلة واحدة لكل 4×4 بكسل. <br />
[page:constant RGB_PVRTC_2BPPV1_Format]: ضغط RGB في وضع 2 بت.
كتلة واحدة لكل 8×4 بكسل. <br />
[page:constant RGBA_PVRTC_4BPPV1_Format]: ضغط RGBA في وضع 4 بت.
كتلة واحدة لكل 4×4 بكسل. <br />
[page:constant RGBA_PVRTC_2BPPV1_Format]: ضغط RGBA في وضع 2 بت.
كتلة واحدة لكل 8×4 بكسل. <br />
</p>
<h2>تنسيق القوام المضغوط ETC</h2>
<code>
THREE.RGB_ETC1_Format
THREE.RGB_ETC2_Format
THREE.RGBA_ETC2_EAC_Format
</code>
<p>
للاستخدام مع خاصية [page:Texture.format format] لـ [page:CompressedTexture CompressedTexture] ،
هذه تتطلب دعمًا للتمديد
[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc1/ WEBGL_compressed_texture_etc1] (ETC1) أو
[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_etc/ WEBGL_compressed_texture_etc] (ETC2). <br /> <br />
</p>
<h2>تنسيق القوام المضغوط ASTC</h2>
<code>
THREE.RGBA_ASTC_4x4_Format
THREE.RGBA_ASTC_5x4_Format
THREE.RGBA_ASTC_5x5_Format
THREE.RGBA_ASTC_6x5_Format
THREE.RGBA_ASTC_6x6_Format
THREE.RGBA_ASTC_8x5_Format
THREE.RGBA_ASTC_8x6_Format
THREE.RGBA_ASTC_8x8_Format
THREE.RGBA_ASTC_10x5_Format
THREE.RGBA_ASTC_10x6_Format
THREE.RGBA_ASTC_10x8_Format
THREE.RGBA_ASTC_10x10_Format
THREE.RGBA_ASTC_12x10_Format
THREE.RGBA_ASTC_12x12_Format
</code>
<p>
للاستخدام مع خاصية [page:Texture.format format] لـ [page:CompressedTexture CompressedTexture] ،
هذه تتطلب دعمًا للتمديد
[link:https://www.khronos.org/registry/webgl/extensions/WEBGL_compressed_texture_astc/ WEBGL_compressed_texture_astc]. <br /> <br />
</p>
<h2>تنسيق القوام المضغوط BPTC</h2>
<code>
THREE.RGBA_BPTC_Format
</code>
<p>
للاستخدام مع خاصية [page:Texture.format format] لـ [page:CompressedTexture CompressedTexture] ،
هذه تتطلب دعمًا للتمديد
[link:https://www.khronos.org/registry/webgl/extensions/EXT_texture_compression_bptc/ EXT_texture_compression_bptc]. <br /> <br />
</p>
<h2>وظائف مقارنة القوام (Texture Comparison functions)</h2>
<code>
THREE.NeverCompare
THREE.LessCompare
THREE.EqualCompare
THREE.LessEqualCompare
THREE.GreaterCompare
THREE.NotEqualCompare
THREE.GreaterEqualCompare
THREE.AlwaysCompare
</code>
<h2>التنسيقات الداخلية (Internal Formats)</h2>
<code>
'ALPHA'
'RGB'
'RGBA'
'LUMINANCE'
'LUMINANCE_ALPHA'
'RED_INTEGER'
'R8'
'R8_SNORM'
'R8I'
'R8UI'
'R16I'
'R16UI'
'R16F'
'R32I'
'R32UI'
'R32F'
'RG8'
'RG8_SNORM'
'RG8I'
'RG8UI'
'RG16I'
'RG16UI'
'RG16F'
'RG32I'
'RG32UI'
'RG32F'
'RGB565'
'RGB8'
'RGB8_SNORM'
'RGB8I'
'RGB8UI'
'RGB16I'
'RGB16UI'
'RGB16F'
'RGB32I'
'RGB32UI'
'RGB32F'
'RGB9_E5'
'SRGB8'
'R11F_G11F_B10F'
'RGBA4'
'RGBA8'
'RGBA8_SNORM'
'RGBA8I'
'RGBA8UI'
'RGBA16I'
'RGBA16UI'
'RGBA16F'
'RGBA32I'
'RGBA32UI'
'RGBA32F'
'RGB5_A1'
'RGB10_A2'
'RGB10_A2UI'
'SRGB8_ALPHA8'
'DEPTH_COMPONENT16'
'DEPTH_COMPONENT24'
'DEPTH_COMPONENT32F'
'DEPTH24_STENCIL8'
'DEPTH32F_STENCIL8'
</code>
<p>
للاستخدام مع خاصية [page:Texture.internalFormat internalFormat] للقوام ،
هذه تحدد كيفية تخزين عناصر قوام ، أو `texels` ،
على وحدة معالجة الرسومات. <br /> <br />
[page:constant R8] يخزن المكون الأحمر على 8 بت. <br /> <br />
[page:constant R8_SNORM] يخزن المكون الأحمر على 8 بت. المكون
يتم تخزينه كمعيار. <br /> <br />
[page:constant R8I] يخزن المكون الأحمر على 8 بت. المكون هو
يتم تخزينه كعدد صحيح. <br /> <br />
[page:constant R8UI] يخزن المكون الأحمر على 8 بت. المكون هو
يتم تخزينه كعدد صحيح غير موقع. <br /> <br />
[page:constant R16I] يخزن المكون الأحمر على 16 بت. المكون هو
يتم تخزينه كعدد صحيح. <br /> <br />
[page:constant R16UI] يخزن المكون الأحمر على 16 بت. المكون
يتم تخزينه كعدد صحيح غير موقع. <br /> <br />
[page:constant R16F] يخزن المكون الأحمر على 16 بت. المكون هو
يتم تخزينه كعائمة نقطية. <br /> <br />
[page:constant R32I] يخزن المكون الأحمر على 32 بت. المكون هو
يتم تخزينه كعدد صحيح. <br /> <br />
[page:constant R32UI] يخزن المكون الأحمر على 32 بت. المكون
يتم تخزينه كعدد صحيح غير موقع. <br /> <br />
[page:constant R32F] يخزن المكون الأحمر على 32 بت. المكون هو
يتم تخزينه كعائمة نقطية. <br /> <br />
[page:constant RG8] يخزن المكونات الحمراء والخضراء على 8 بت لكل منهما. <br /> <br />
[page:constant RG8_SNORM] يخزن المكونات الحمراء والخضراء على 8 بت
لكل منهما. يتم تخزين كل مكون كمعيار.
<br /> <br />
[page:constant RG8I] يخزن المكونات الحمراء والخضراء على 8 بت لكل منهما.
يتم تخزين كل مكون كعدد صحيح.
<br /> <br />
[page:constant RG8UI] يخزن المكونات الحمراء والخضراء على 8 بت لكل منهما.
يتم تخزين كل مكون كعدد صحيح غير موقع.
<br /> <br />
[page:constant RG16I] يخزن المكونات الحمراء والخضراء على 16 بت لكل منهما.
يتم تخزين كل مكون كعدد صحيح.
<br /> <br />
[page:constant RG16UI] يخزن المكونات الحمراء والخضراء على 16 بت
لكل منهما. يتم تخزين كل مكون كعدد صحيح غير موقع.
<br /> <br />
[page:constant RG16F] يخزن المكونات الحمراء والخضراء على 16 بت لكل منهما.
يتم تخزين كل مكون كعائمة نقطية.
<br /> <br />
[page:constant RG32I] يخزن المكونات الحمراء والخضراء على 32 بت لكل منهما.
يتم تخزين كل مكون كعدد صحيح.
<br /> <br />
[page:constant RG32UI] يخزن المكونات الحمراء والخضراء على 32 بت.
يتم تخزين كل مكون كعدد صحيح غير موقع.
<br /><br />
[page:constant RG32F] يخزن المكونات الحمراء والخضراء على 32 بت.
يتم تخزين كل مكون كعدد عائم.
<br /><br />
[page:constant RGB8] يخزن المكونات الحمراء والخضراء والزرقاء على 8 بت
لكل منهما. [page:constant RGB8_SNORM] يخزن المكونات الحمراء والخضراء والزرقاء
على 8 بت لكل منهما. يتم تخزين كل مكون كمعيار.
<br /><br />
[page:constant RGB8I] يخزن المكونات الحمراء والخضراء والزرقاء على 8 بت
لكل منهما. يتم تخزين كل مكون كعدد صحيح.
<br /><br />
[page:constant RGB8UI] يخزن المكونات الحمراء والخضراء والزرقاء على 8
بت لكل منهما. يتم تخزين كل مكون كعدد صحيح غير موقع.
<br /><br />
[page:constant RGB16I] يخزن المكونات الحمراء والخضراء والزرقاء على 16
بت لكل منهما. يتم تخزين كل مكون كعدد صحيح.
<br /><br />
[page:constant RGB16UI] يخزن المكونات الحمراء والخضراء والزرقاء على 16
بت لكل منهما. يتم تخزيน كل مكون كعدد صحيح غير موقع.
<br /><br />
[page:constant RGB16F] يخزن المكونات الحمراء والخضراء والزرقاء على 16
بت لكل منهما. يتم تخزين كل مكون كعدد عائم
<br /><br />
[page:constant RGB32I] يخزن المكونات الحمراء والخضراء والزرقاء على 32
بت لكل منهما. يتم تخزين كل مكون كعدد صحيح.
<br /><br />
[page:constant RGB32UI] يخزن المكونات الحمراء والخضراء والزرقاء على 32
بت لكل منهما. يتم تخزين كل مكون كعدد صحيح غير موقع.
<br /><br />
[page:constant RGB32F] يخزن المكونات الحمراء والخضراء والزرقاء على 32
بت لكل منهما. يتم تخزين كل مكون كعدد عائم.
<br /><br />
[page:constant R11F_G11F_B10F] يخزن المكونات الحمراء والخضراء والزرقاء
على التوالي على 11 بت ، 11 بت ، و 10 بت. يتم تخزين كل مكون كعدد عائم.
<br /><br />
[page:constant RGB565] يخزن المكونات الحمراء والخضراء والزرقاء
على التوالي على 5 بت ، 6 بت ، و 5 بت.<br /><br />
[page:constant RGB9_E5] يخزن المكونات الحمراء والخضراء والزرقاء على 9
بت لكل منهما.<br /><br />
[page:constant RGBA8] يخزن المكونات الحمراء والخضراء والزرقاء وألفا على
8 بت لكل منهما.<br /><br />
[page:constant RGBA8_SNORM] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 8 بت. يتم تخزين كل مكون كمعيار.
<br /><br />
[page:constant RGBA8I] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 8 بت لكل منهما. يتم تخزين كل مكون كعدد صحيح.
<br /><br />
[page:constant RGBA8UI] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 8 بت. يتم تخزين كل مكون كعدد صحيح غير موقع.
<br /><br />
[page:constant RGBA16I] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 16 بت. يتم تخزين كل مكون كعدد صحيح.
<br /><br />
[page:constant RGBA16UI] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 16 بت. يتم تخزين كل مكون كعدد صحيح غير موقع.
<br /><br />
[page:constant RGBA16F] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 16 بت. يتم تخزين كل مكون كعدد عائم.
<br /><br />
[page:constant RGBA32I] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 32 بت. يتم تخزين كل مكون كعدد صحيح.
<br /><br />
[page:constant RGBA32UI] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 32 بت. يتم تخزين كل مكون كعدد صحيح غير موقع.
<br /><br />
[page:constant RGBA32F] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 32 بت. يتم تخزين كل مكون كعدد عائم.
<br /><br />
[page:constant RGB5_A1] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على التوالي على 5 بت ، 5 بت ، 5 بت ، و 1 بت.<br /><br />
[page:constant RGB10_A2] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على التوالي على 10 بت ، 10 بت ، 10 بت و 2 بت.<br /><br />
[page:constant RGB10_A2UI] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على التوالي على 10 بت ، 10 بت ، 10 بت و 2 بت. يتم تخزين كل
مكون كعدد صحيح غير موقع.
<br /><br />
[page:constant SRGB8] يخزن المكونات الحمراء والخضراء والزرقاء على 8 بت
لكل منهما.<br /><br />
[page:constant SRGB8_ALPHA8] يخزن المكونات الحمراء والخضراء والزرقاء وألفا
على 8 بت لكل منهما.<br /><br />
[page:constant DEPTH_COMPONENT16] يخزن مكون العمق على 16 بت.<br /><br />
[page:constant DEPTH_COMPONENT24] يخزن مكون العمق على 24 بت.<br /><br />
[page:constant DEPTH_COMPONENT32F] يخزن مكون العمق على 32 بت.
يتم تخزين المكون كعدد عائم.<br /><br />
[page:constant DEPTH24_STENCIL8] يخزن مكوان العمق ، ومكوان الإستانسيل
على التوالي على 24 بت و 8 بت. يتم تخزين مكوان الإستانسيل كعدد صحيح غير موقع.
<br /><br />
[page:constant DEPTH32F_STENCIL8] يخزن مكوان العمق ، ومكوان الإستانسيل
على التوالي على 32 بت و 8 بت. يتم تخزين مكوان العمق كعدد عائم ، ومكوان الإستانسيل كعدد صحيح غير موقع.
<br /><br />
لاحظ أنه يجب أن تحظى المادة المستهلكة للصورة (texture) بـ [page:Texture.type type]
صحيحة، فضلاً عن [page:Texture.format format]. اطَّلِعْ عَلى
[link:https://developer.mozilla.org/en/docs/Web/API/WebGLRenderingContext/texImage2D WebGLRenderingContext.texImage2D], and
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGL2RenderingContext/texImage3D WebGL2RenderingContext.texImage3D], لِلْحُصُولِ عَلىْ تَفَاصِيلَ أَكْثَرَ حَولَ
إِجْهِادِ [page:Texture.format format],
[page:Texture.internalFormat internalFormat], and [page:Texture.type type].<br /><br />
لِلْحُصُولِ عَلىْ مَعْلُوْمَاتَ أَشْمَلَ حَولَ التَّشْكِيلَاتِ الدَّاخِلِيَّةِ، يُمْكِنُ أَيْضا أَ نْ تُشِيرُ إِلَى
[link:https://www.khronos.org/registry/webgl/specs/latest/2.0/ WebGL2 Specification] and to the
[link:https://www.khronos.org/registry/OpenGL/specs/es/3.0/es_spec_3.0.pdf OpenGL ES 3.0 Specification].
</p>
<h2>تعبئة العمق (Depth Packing)</h2>
<code>
THREE.BasicDepthPacking
THREE.RGBADepthPacking
</code>
<p>
للاستخدام مع خاصية [page:MeshDepthMaterial.depthPacking depthPacking]
لـ `MeshDepthMaterial`.
</p>
<h2>مساحة اللون (Color Space)</h2>
<code>
THREE.NoColorSpace = ""
THREE.SRGBColorSpace = "srgb"
THREE.LinearSRGBColorSpace = "srgb-linear"
</code>
<p>
يستخدم لتحديد مساحة اللون للصور (ومساحة اللون الناتجة من
المُصَوِّر).<br /><br />
إذا تم تغيير نوع مساحة اللون بعد استخدام الصورة بالفعل
بواسطة مادة ، ستحتاج إلى تعيين [page:Material.needsUpdate Material.needsUpdate] إلى `true` لإعادة تجميع المادة.<br /><br />
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/constants.js src/constants.js]
</p>
</body>
</html>

@ -0,0 +1,241 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
تخزن هذه الفئة بيانات لسمة (مثل مواضع الرأس ، ومؤشرات الوجه ، والمعايير ، والألوان ، والأشعة فوق البنفسجية ، وأي سمات مخصصة) المرتبطة
مع [page:BufferGeometry] ، مما يسمح بتمرير البيانات بشكل أكثر كفاءة
إلى وحدة معالجة الرسومات. انظر تلك الصفحة للحصول على التفاصيل ومثال على الاستخدام. عند العمل
مع بيانات مثل المتجهات ، قد تكون طرق المساعد <i>.fromBufferAttribute(attribute, index)</i>
على [page:Vector2.fromBufferAttribute Vector2]،
[page:Vector3.fromBufferAttribute Vector3]،
[page:Vector4.fromBufferAttribute Vector4]، و
[page:Color.fromBufferAttribute Color] قد تكون مفيدة.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]([param:TypedArray array]، [param:Integer itemSize]، [param:Boolean normalized])</h3>
<p>
[page:TypedArray array] - يجب أن يكون
[link:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/TypedArray TypedArray]. يستخدم لإنشاء المخزن المؤقت. <br />
يجب أن يحتوي هذا المصفوفة على
<code>
itemSize * numVertices
</code>
عناصر ، حيث numVertices هو عدد الرؤوس في المرتبطة
[page:BufferGemetry BufferGeometry].<br /><br />
[page:Integer itemSize] - عدد قيم المصفوفة التي يجب
ترتبط برأس معين. على سبيل المثال ، إذا كانت هذه السمة هي
تخزين متجه من 3 مكونات (مثل الموضع أو الطبيعي أو اللون) ، فإن
itemSize يجب أن يكون 3.
<br /><br />
[page:Boolean normalized] - (اختياري) ينطبق على البيانات الصحيحة فقط.
يشير إلى كيفية تعيين البيانات الأساسية في المخزن المؤقت إلى القيم في
كود GLSL. على سبيل المثال ، إذا كان [page:TypedArray array] هو نسخة من
UInt16Array ، و [page:Boolean normalized] صحيحًا ، فإن القиم `0 -
+65535` في بيانات المصفوفة ستُخرج إلى 0.0f - +1.0f في GLSL
attribute. ستُخرج Int16Array (signed) من -32768 - +32767 إلى -1.0f
- +1.0f. إذا كان [page:Boolean normalized] خطأً ، فستكون القيم
تحول إلى floats دون تعديل ، أي 32767 يصبح 32767.0f.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:TypedArray array]</h3>
<p>ال[page:TypedArray array] التي تحمل البيانات المخزنة في المخزن المؤقت.</p>
<h3>[property:Integer count]</h3>
<p>
يخزن طول [page:BufferAttribute.array array] مقسومًا على
[page:BufferAttribute.itemSize itemSize]. Read-only property.<br /><br />
إذا كان المخزن يخزن متجهًا من 3 مكونات (مثل الموضع أو الطبيعي أو اللون) ، فسيحسب عدد هذه المتجهات المخزنة.
</p>
<h3>[property:Boolean isBufferAttribute]</h3>
<p>علامة للقراءة فقط للتحقق مما إذا كان الكائن المعطى من نوع [name].</p>
<h3>[property:Integer itemSize]</h3>
<p>
طول المتجهات التي يتم تخزينها في
[page:BufferAttribute.array array].
</p>
<h3>[property:String name]</h3>
<p>اسم اختياري لهذا الحدث من السمة. الافتراضي هو سلسلة فارغة.</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
علامة للإشارة إلى أن هذه السمة قد تغيرت ويجب إعادة إرسالها إلى
وحدة معالجة الرسومات. قم بتعيين هذا على true عند تعديل قيمة المصفوفة.<br /><br />
تعيين هذا على true يزيد أيضًا من [page:BufferAttribute.version version].
</p>
<h3>[property:Boolean normalized]</h3>
<p>
يشير إلى كيفية تعيين البيانات الأساسية في المخزن المؤقت إلى القيم في
كود GLSL. راجع المُنشئ أعلاه للحصول على التفاصيل.
</p>
<h3>[property:Function onUploadCallback]</h3>
<p>
دالة رد اتصال يتم تنفيذها بعد أن قام Renderer بنقل
بيانات مصفوفة السمة إلى وحدة معالجة الرسومات.
</p>
<h3>[property:Object updateRange]</h3>
<p>
كائن يحتوي على:<br />
[page:Integer offset]: الافتراضية هي `0`. الموضع الذي يجب أن يبدأ فيه
التحديث.<br />
[page:Integer count]: الافتراضية هي `-1` ، وهذا يعني عدم استخدام التحديث
المدى. <br /><br />
يمكن استخدام هذا لتحديث بعض مكونات المتجهات المخزنة فقط (على سبيل المثال ، فقط المكوِّن المرتبط باللون).
</p>
<h3>[property:Usage usage]</h3>
<p>
يحدد نمط الاستخدام المقصود لمخزن البيانات لأغراض التحسين
. يتوافق مع معلمة `usage` من
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData WebGLRenderingContext.bufferData](). الافتراضي هو [page:BufferAttributeUsage StaticDrawUsage]. راجع الاستخدام [page:BufferAttributeUsage constants] لجميع
القيم الممكنة. <br /><br />
ملاحظة: بعد الاستخدام الأولي للمخزن المؤقت ، لا يمكن تغيير استخدامه.
بدلاً من ذلك ، قم بإنشاء نسخة جديدة وتعيين الاستخدام المطلوب قبل التالي
جعل.
</p>
<h3>[property:Integer version]</h3>
<p>
رقم إصدار ، يزداد كل مرة
[page:BufferAttribute.needsUpdate needsUpdate] يتم تعيين خاصية على true.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:this applyMatrix3]([param:Matrix3 m])</h3>
<p>
تطبق المصفوفة [page:Matrix3 m] على كل عنصر Vector3 من هذا
BufferAttribute.
</p>
<h3>[method:this applyMatrix4]([param:Matrix4 m])</h3>
<p>
تطبق المصفوفة [page:Matrix4 m] على كل عنصر Vector3 من هذا
BufferAttribute.
</p>
<h3>[method:this applyNormalMatrix]([param:Matrix3 m])</h3>
<p>
تطبق المصفوفة الطبيعية [page:Matrix3 m] على كل عنصر Vector3 من هذا
BufferAttribute.
</p>
<h3>[method:this transformDirection]([param:Matrix4 m])</h3>
<p>
تطبق المصفوفة [page:Matrix4 m] على كل عنصر Vector3 من هذا
BufferAttribute ، مع تفسير العناصر كمتجهات اتجاه.
</p>
<h3>[method:BufferAttribute clone]()</h3>
<p>إرجاع نسخة من هذه bufferAttribute.</p>
<h3>[method:this copy]([param:BufferAttribute bufferAttribute])</h3>
<p>ينسخ BufferAttribute آخر إلى هذه BufferAttribute.</p>
<h3>[method:this copyArray](array)</h3>
<p>
انسخ المصفوفة المعطاة هنا (والتي يمكن أن تكون مصفوفة عادية أو TypedArray) إلى
[page:BufferAttribute.array array].<br /><br />
انظر
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set TypedArray.set] للحصول على ملاحظات حول المتطلبات إذا كان يتم نسخ TypedArray.
</p>
<h3>[method:this copyAt]([param:Integer index1]، [param:BufferAttribute bufferAttribute]، [param:Integer index2])</h3>
<p>انسخ متجهًا من bufferAttribute[index2] إلى [page:BufferAttribute.array array][index1].</p>
<h3>[method:Number getComponent]( [param:Integer index], [param:Integer component] ) </h3>
<p>Returns the given component of the vector at the given index.</p>
<h3>[method:Number getX]([param:Integer index])</h3>
<p>يعيد مكون x من المتجه في المؤشر المحدد.</p>
<h3>[method:Number getY]([param:Integer index])</h3>
<p>يعيد مكون y من المتجه في المؤشر المحدد.</p>
<h3>[method:Number getZ]([param:Integer index])</h3>
<p>يعيد مكون z من المتجه في المؤشر المحدد.</p>
<h3>[method:Number getW]([param:Integer index])</h3>
<p>يعيد مكون w من المتجه في المؤشر المحدد.</p>
<h3>[method:this onUpload]([param:Function callback])</h3>
<p>
يضع قيمة خاصية onUploadCallback.<br /><br />
في [example:webgl_buffergeometry WebGL / Buffergeometry] يتم استخدام هذا
لتحرير الذاكرة بعد نقل المخزن إلى وحدة معالجة الرسومات.
</p>
<h3>[method:this set]([param:Array value]، [param:Integer offset])</h3>
<p>
value - [page:Array] أو [page:TypedArray] لنسخ القيم منه.
<br />
offset - (اختياري) فهرس [page:BufferAttribute.array array] في
الذي يجب البدء في النسخ.<br /><br />
المكالمات
[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set TypedArray.set]([page:Array value]، [page:Integer offset]) على
[page:BufferAttribute.array array].<br /><br />
على وجه الخصوص ، انظر تلك الصفحة للحصول على متطلبات [page:Array value] كونها
[page:TypedArray].
</p>
<h3>[method:this setUsage]([param:Usage value])</h3>
<p>
قم بتعيين [page:BufferAttribute.usage usage] إلى value. راجع الاستخدام
[page:BufferAttributeUsage constants] لجميع قيم الإدخال الممكنة.
<br /><br />
ملاحظة: بعد الاستخدام الأولي للمخزن المؤقت ، لا يمكن تغيير استخدامه.
بدلاً من ذلك ، قم بإنشاء نسخة جديدة وتعيين الاستخدام المطلوب قبل التالي
جعل.
</p>
<h3>[method:Number setComponent]( [param:Integer index], [param:Integer component], [param:Float value] ) </h3>
<p>Sets the given component of the vector at the given index.</p>
<h3>[method:this setX]([param:Integer index], [param:Float x])</h3>
<p>تضبط مكون x من المتجه في المؤشر المحدد.</p>
<h3>[method:this setY]([param:Integer index], [param:Float y])</h3>
<p>تضبط مكون y من المتجه في المؤشر المحدد.</p>
<h3>[method:this setZ]([param:Integer index], [param:Float z])</h3>
<p>تضبط مكون z من المتجه في المؤشر المحدد.</p>
<h3>[method:this setW]([param:Integer index], [param:Float w])</h3>
<p>تضبط مكون w من المتجه في المؤشر المحдد.</p>
<h3>[method:this setXY]([param:Integer index], [param:Float x], [param:Float y])</h3>
<p>تضبط مكونات x و y من المتجه في
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,366 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p>
تمثيل شبكة ، خط ، أو هندسة نقطية. يتضمن مواقع الرأس ، ومؤشرات الوجه ، والمعايير ، والألوان ، والأشعة فوق البنفسجية ، والسمات المخصصة
داخل المخازن المؤقتة ، مما يقلل من تكلفة تمرير كل هذه البيانات إلى وحدة معالجة الرسومات.
</p>
<p>
لقراءة وتحرير البيانات في سمات BufferGeometry ، راجع
[page:BufferAttribute] التوثيق.
</p>
<h2>مثال للكود</h2>
<code>
const geometry = new THREE.BufferGeometry();
// إنشاء شكل مربع بسيط. نحن نكرر الأعلى الأيسر والأسفل الأيمن
// الرؤوس لأن كل رأس يحتاج إلى الظهور مرة واحدة لكل مثلث.
const vertices = new Float32Array( [
-1.0, -1.0, 1.0, // v0
1.0, -1.0, 1.0, // v1
1.0, 1.0, 1.0, // v2
1.0, 1.0, 1.0, // v3
-1.0, 1.0, 1.0, // v4
-1.0, -1.0, 1.0 // v5
] );
// itemSize = 3 لأنه يوجد 3 قيم (مكونات) لكل رأس
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );
</code>
<h2>مثال للكود (Index)</h2>
<code>
const geometry = new THREE.BufferGeometry();
const vertices = new Float32Array( [
-1.0, -1.0, 1.0, // v0
1.0, -1.0, 1.0, // v1
1.0, 1.0, 1.0, // v2
-1.0, 1.0, 1.0, // v3
] );
const indices = [
0, 1, 2,
2, 3, 0,
];
geometry.setIndex( indices );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_buffergeometry شبكة بوجوه غير مفهرسة]<br />
[example:webgl_buffergeometry_indexed شبكة بوجوه مفهرسة]<br />
[example:webgl_buffergeometry_lines خطوط]<br />
[example:webgl_buffergeometry_lines_indexed خطوط مفهرسة]<br />
[example:webgl_buffergeometry_custom_attributes_particles جزيئات]<br />
[example:webgl_buffergeometry_rawshader محركات الظل الخام]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]()</h3>
<div>
ينشئ هذا [name] جديدًا. كما يضبط العديد من الخصائص على قيمة افتراضية
قيمة.
</div>
<h2>الخصائص (Properties)</h2>
<h3>[property:Object attributes]</h3>
<p>
يحتوي هذا الخريطة القائمة على الهوية على اسم السمة المراد تعيينها وكقيمة
[page:BufferAttribute buffer] لتعيينه. بدلاً من الوصول إلى هذا
الملكية مباشرة ، استخدم [page:.setAttribute] و [page:.getAttribute] ل
الوصول إلى سمات هذه الهندسة.
</p>
<h3>[property:Box3 boundingBox]</h3>
<p>
مربع التحديد لـ bufferGeometry ، والذي يمكن حسابه بـ
[page:.computeBoundingBox](). الافتراضي هو `null`.
</p>
<h3>[property:Sphere boundingSphere]</h3>
<p>
كرة التحديد لـ bufferGeometry ، والتي يمكن حسابها بـ
[page:.computeBoundingSphere](). الافتراضي هو `null`.
</p>
<h3>[property:Object drawRange]</h3>
<p>
يحدد جزء الهندسة المراد عرضه. يجب عدم تعيين هذا
مباشرة ، بدلاً من ذلك استخدم [page:.setDrawRange]. الافتراضي هو
<code>
{ start: 0, count: Infinity }
</code>
بالنسبة لـ BufferGeometry غير المفهرس ، count هو عدد القمم التي يتم عرضها.
بالنسبة لـ BufferGeometry المفهرس ، count هو عدد المؤشرات التي يتم عرضها.
</p>
<h3>[property:Array groups]</h3>
<p>
قسم الهندسة إلى مجموعات ، كل منها سيتم عرضه في
مكالمة WebGL رسم منفصلة. هذا يسمح باستخدام مجموعة من المواد
مع الهندسة. <br /> <br />
كل مجموعة هي كائن من الشكل:
<code>
{ start: Integer, count: Integer, materialIndex: Integer }
</code>
حيث يحدد start العنصر الأول في هذه المكالمة - الأول
رأس للهندسة غير المفهرسة ، وإلا فإن المثلث الأول فهرس. عد
يحدد كم عدد القمم (أو المؤشرات) المضمنة ، و materialIndex
يحدد فهرس مجموعة المواد للاستخدام. <br /> <br />
استخدم [page:.addGroup] لإضافة مجموعات ، بدلاً من تعديل هذا المصفوفة
مباشرة. <br /> <br />
يجب أن ينتمي كل رأس وفهرس إلى مجموعة واحدة فقط - يجب ألا تشترك المجموعات
قمم أو مؤشرات ، ويجب ألا تترك القمم أو المؤشرات غير المستخدمة.
</p>
<!-- ملاحظة: كانت المجموعات تسمى drawCalls
<h3>[property:Array drawcalls]</h3>
<p>
بالنسبة للهندسات التي تستخدم المثلثات المفهرسة ، يمكن استخدام هذا المصفوفة لتقسيم الكائن
إلى عدة مكالمات رسم WebGL. سترسم كل مكالمة رسم بعض الفئات الفرعية من القمم
في هذه الهندسة باستخدام [page:Material shader] المكون. قد يكون هذا ضروريًا إذا ،
على سبيل المثال ، لديك أكثر من 65535 رأسًا في كائنك.
</p> -->
<h3>[property:Integer id]</h3>
<p>رقم فريد لهذا الحال bufferGeometry.</p>
<h3>[property:BufferAttribute index]</h3>
<p>
يتيح إعادة استخدام القمم عبر مثلثات متعددة ؛ هذا هو
يسمى باستخدام "المثلثات المفهرسة". يرتبط كل مثلث بـ
مؤشرات ثلاث قمم. لذلك تخزن هذه السمة فهرس
كل رأس لكل وجه ثلاثي الأضلاع. إذا لم يتم تعيين هذه السمة ، فإن
[page:WebGLRenderer renderer] يفترض أن كل ثلاثة مواقع متجاورة
تمثل مثلثًا واحدًا. الافتراضي هو `null`.
</p>
<h3>[property:Boolean isBufferGeometry]</h3>
<p>علامة للقراءة فقط للتحقق مما إذا كان الكائن المحدد من نوع [name].</p>
<h3>[property:Object morphAttributes]</h3>
<p>
خريطة قائمة على [page:BufferAttribute]s التي تحمل تفاصيل هندسة المورف
الأهداف. <br />
ملاحظة: بمجرد عرض الهندسة ، لا يمكن تغيير بيانات سمة المورف
يتغير. سيتعين عليك الاتصال [page:.dispose]() ، وإنشاء جديد
نسخة من [name].
</p>
<h3>[property:Boolean morphTargetsRelative]</h3>
<p>
يستخدم للتحكم في سلوك هدف المورف ؛ عند تعيينه على true ، المورف
يتم التعامل مع بيانات الهدف كإزاحات نسبية ، بدلاً من كـ
المواقع / المعايير المطلقة. الافتراضي هو `false`.
</p>
<h3>[property:String name]</h3>
<p>
اسم اختياري لهذه الحالة bufferGeometry. الافتراضي هو فارغ
سلسلة.
</p>
<h3>[property:Object userData]</h3>
<p>
كائن يمكن استخدامه لتخزين بيانات مخصصة حول BufferGeometry.
يجب ألا يحتوي على مراجع للوظائف حيث لن يتم استنساخها.
</p>
<h3>[property:String uuid]</h3>
<p>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] من
هذه الحالة كائن. يتم تعيين هذا تلقائيًا ولا يجب أن يكون
تحرير.
</p>
<h2>الوظائف (Methods)</h2>
<p>
[page:EventDispatcher EventDispatcher] الطرق متوفرة على هذا
صف.
</p>
<h3>[method:undefined addGroup]([param:Integer start]، [param:Integer count]، [param:Integer materialIndex])</h3>
<p>
يضيف مجموعة إلى هذه الهندسة ؛ انظر [page:BufferGeometry.groups groups]
خاصية للحصول على التفاصيل.
</p>
<h3>[method:this applyMatrix4]([param:Matrix4 matrix])</h3>
<p>تطبق تحويل المصفوفة على الهندسة.</p>
<h3>[method:this applyQuaternion]([param:Quaternion quaternion])</h3>
<p>يطبق التدوير الممثل بالرباعي على الهندسة.</p>
<h3>[method:this center] ()</h3>
<p>مركز الهندسة بناءً على مربع التحديد.</p>
<h3>[method:undefined clearGroups]( )</h3>
<p>يمسح جميع المجموعات.</p>
<h3>[method:BufferGeometry clone]()</h3>
<p>ينشئ نسخة من هذا BufferGeometry.</p>
<h3>[method:undefined computeBoundingBox]()</h3>
<p>
يحسب مربع التحديد للهندسة ، ويحدث [page:.boundingBox]
سمة. <br />
لا يتم حساب مربعات التحديد افتراضيًا. يجب حسابها بشكل صريح
حساب ، وإلا كانت `null`.
</p>
<h3>[method:undefined computeBoundingSphere]()</h3>
<p>
يحسب كرة التحديد للهندسة ، ويحدث [page:.boundingSphere]
سمة. <br />
لا تتم حساب كرات التحديد افتراضيًا. يجب حسابها بشكل صريح
حساب ، وإلا كانت `null`.
</p>
<h3>[method:undefined computeTangents]()</h3>
<p>
يحسب ويضيف سمة مماسية لهذه الهندسة. <br />
الحساب مدعوم فقط للهندسات المفهرسة وإذا تم تعريف الوضعية ،
الطبيعية ، والأشعة فوق البنفسجية. عند استخدام خريطة طبيعية للفضاء المماس
خريطة ، تفضل خوارزمية MikkTSpace المقدمة من قبل
[page:BufferGeometryUtils.computeMikkTSpaceTangents] بدلاً من ذلك.
</p>
<h3>[method:undefined computeVertexNormals]()</h3>
<p>تحسب قمم الأوجه للبيانات القمية المعطاة. بالنسبة للهندسات المفهرسة ، يضبط الأسلوب كل قمة عادية لتكون متوسط ​​أوجه الوجه التي تشارك هذه القمة.
بالنسبة للهندسات غير المفهرسة ، لا تتشارك القمم ، ويضبط الأسلوب كل قمة عادية لتكون نفس وجه الوجه.</p>
<h3>[method:this copy]( [param:BufferGeometry bufferGeometry] )</h3>
<p>ينسخ BufferGeometry آخر إلى هذا BufferGeometry.</p>
<h3>[method:BufferAttribute deleteAttribute]( [param:String name] )</h3>
<p>تحذف [page:BufferAttribute attribute] بالاسم المحدد.</p>
<h3>[method:undefined dispose]()</h3>
<p>
يطلق الموارد المتعلقة بوحدة معالجة الرسومات التي تم تخصيصها من قبل هذا المثيل. اتصل بهذا
الأسلوب كلما لم يعد هذا المثيل مستخدمًا في تطبيقك.
</p>
<h3>[method:BufferAttribute getAttribute]( [param:String name] )</h3>
<p>يرجع [page:BufferAttribute attribute] بالاسم المحدد.</p>
<h3>[method:BufferAttribute getIndex] ()</h3>
<p>يرجع [page:.index] buffer.</p>
<h3>[method:Boolean hasAttribute]( [param:String name] )</h3>
<p>يعود `true` إذا كانت السمة بالاسم المحدد موجودة.</p>
<h3>[method:this lookAt] ( [param:Vector3 vector] )</h3>
<p>
vector - نقطة عالمية للنظر إليها. <br /> <br />
يدور الهندسة لمواجهة نقطة في الفضاء. يتم هذا عادةً كـ
عملية واحدة ، وليس أثناء حلقة. استخدم [page:Object3D.lookAt] لـ
الاستخدام النموذجي للشبكة في الوقت الفعلي.
</p>
<h3>[method:undefined normalizeNormals]()</h3>
<p>
سيكون كل متجه طبيعي في هندسة بقوة 1. هذا سوف
تصحح الإضاءة على سطوح الهندسة.
</p>
<h3>[method:this rotateX] ( [param:Float radians] )</h3>
<p>
قم بتدوير الهندسة حول المحور X. يتم هذا عادةً كعملية واحدة
عملية ، وليس أثناء حلقة. استخدم [page:Object3D.rotation] لـ
تدوير شبكة نموذجية في الوقت الفعلي.
</p>
<h3>[method:this rotateY] ( [param:Float radians] )</h3>
<p>
قم بتدوير الهندسة حول المحور Y. يتم هذا عادةً كعملية واحدة
عملية ، وليس أثناء حلقة. استخدم [page:Object3D.rotation] لـ
تدوير شبكة نموذجية في الوقت الفعلي.
</p>
<h3>[method:this rotateZ] ( [param:Float radians] )</h3>
<p>
قم بتدوير الهندسة حول المحور Z. يتم هذا عادةً كعملية واحدة
عملية ، وليس أثناء حلقة. استخدم [page:Object3D.rotation] لـ
تدوير شبكة نموذجية في الوقت الفعلي.
</p>
<h3>[method:this scale] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
قم بتغيير حجم بيانات الهندسة. يتم هذا عادةً كعملية واحدة ،
وليس أثناء حلقة. استخدام [page:Object3D.scale] لـ
تغيير حجم شبكات نموذجية في الوقت الفعلي.
</p>
<h3>[method:this setAttribute]( [param:String name], [param:BufferAttribute attribute] )</h3>
<p>
يضع سمة لهذه الهندسة. استخدام هذا بدلاً من خصائص
الملكية ، لأن خريطة قائمة داخلية من [page:.attributes]
يتم صيانته لتسريع التكرار على السمات.
</p>
<h3>[method:undefined setDrawRange] ( [param:Integer start], [param:Integer count] )</h3>
<p>
قم بتعيين خاصية [page:.drawRange]. بالنسبة لـ BufferGeometry غير المفهرس ، count
هو عدد القمم التي يتم عرضها. بالنسبة لـ BufferGeometry المفهرس ، count هو
عدد المؤشرات التي يتم عرضها.
</p>
<h3>[method:this setFromPoints] ( [param:Array points] )</h3>
<p>تضبط سمات هذا BufferGeometry من مصفوفة من النقاط.</p>
<h3>[method:this setIndex] ( [param:BufferAttribute index] )</h3>
<p>ضبط buffer [page:.index].</p>
<h3>[method:Object toJSON]()</h3>
<p>
قُم بتحويل هندسة buffer إلى three.js
[link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
</p>
<h3>[method:BufferGeometry toNonIndexed]()</h3>
<p>إرجاع إصدار غير مفهرس من BufferGeometry المفهرس.</p>
<h3>[method:this translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>
قُم بترجمة الهندسة. يتم هذا عادةً كعملية واحدة ،
وليس أثناء حلقة. استخدم [page:Object3D.position] لـ
ترجمة شبكات نموذجية في الوقت الفعلي.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,91 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
كائن لتتبع الوقت. يستخدم هذا
[link:https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now].
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Boolean autoStart] )</h3>
<p>
autoStart — (اختياري) ما إذا كان يجب تشغيل الساعة تلقائيًا عندما
[page:.getDelta]() يتم استدعاؤه لأول مرة. الافتراضي هو `true`.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Boolean autoStart]</h3>
<p>
إذا تم تعيينه، يبدأ الساعة تلقائيًا عندما يتم استدعاء [page:.getDelta]()
لأول مرة. الافتراضي هو `true`.
</p>
<h3>[property:Float startTime]</h3>
<p>
يحمل الوقت الذي تم فيه استدعاء طريقة [page:Clock.start start] للساعة
آخر مرة. الافتراضي هو `0`.
</p>
<h3>[property:Float oldTime]</h3>
<p>
يحمل الوقت الذي تم فيه استدعاء طرق [page:Clock.start start],
[page:.getElapsedTime]() أو [page:.getDelta]() للساعة آخر مرة.
الافتراضي هو `0`.
</p>
<h3>[property:Float elapsedTime]</h3>
<p>
يتبع المجموع الكلي للوقت الذي كانت تعمل فيه الساعة. الافتراضي هو
`0`.
</p>
<h3>[property:Boolean running]</h3>
<p>ما إذا كانت الساعة تعمل أم لا. الافتراضي هو `false`.</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:undefined start]()</h3>
<p>
يبدأ الساعة. كما يضبط [page:.startTime] و [page:.oldTime] على
الوقت الحالي، ويضبط [page:.elapsedTime] على `0` و [page:.running] على
`true`.
</p>
<h3>[method:undefined stop]()</h3>
<p>
يوقف الساعة ويضبط [page:Clock.oldTime oldTime] على الوقت الحالي.
</p>
<h3>[method:Float getElapsedTime]()</h3>
<p>
احصل على المجموع الكلي للثواني التي مرت منذ بدء تشغيل الساعة وضبط [page:.oldTime] على
الوقت الحالي.<br />
إذا كان [page:.autoStart] هو `true` والساعة لا تعمل، فإنه يبدأ أيضًا
ساعة.
</p>
<h3>[method:Float getDelta]()</h3>
<p>
احصل على المجموع الكلي للثواني التي مرت منذ ضبط [page:.oldTime] وضبط
[page:.oldTime] على الوقت الحالي.<br />
إذا كان [page:.autoStart] هو `true` والساعة لا تعمل، فإنه يبدأ أيضًа
ساعة.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,74 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
أحداث JavaScript للكائنات المخصصة.<br />
[link:https://github.com/mrdoob/eventdispatcher.js EventDispatcher على GitHub]
</p>
<h2>مثال الكود</h2>
<code>
// إضافة الأحداث إلى كائن مخصص
class Car extends EventDispatcher {
start() {
this.dispatchEvent( { type: 'start', message: 'vroom vroom!' } );
}
};
// استخدام الأحداث مع الكائن المخصص
const car = new Car();
car.addEventListener( 'start', function ( event ) {
alert( event.message );
} );
car.start();
</code>
<h2>المنشئ (Constructor)</h2>
<h3>[name]()</h3>
<p>ينشئ كائن EventDispatcher.</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:undefined addEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - نوع الحدث الذي يتم الاستماع إليه.<br />
listener - الدالة التي يتم استدعاؤها عند إطلاق الحدث.
</p>
<p>يضيف مستمعًا إلى نوع حدث.</p>
<h3>[method:Boolean hasEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - نوع الحدث الذي يتم الاستماع إليه.<br />
listener - الدالة التي يتم استدعاؤها عند إطلاق الحدث.
</p>
<p>يتحقق مما إذا كان المستمع قد تمت إضافته إلى نوع حدث.</p>
<h3>[method:undefined removeEventListener]( [param:String type], [param:Function listener] )</h3>
<p>
type - نوع المستمع الذي يتم إزالته.<br />
listener - دالة المستمع التي يتم إزالتها.
</p>
<p>يزيل مستمعًا من نوع حدث.</p>
<h3>[method:undefined dispatchEvent]( [param:Object event] )</h3>
<p>event - الحدث الذي يتم إطلاقه.</p>
<p>إطلاق نوع حدث.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,139 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
لا يقوم هذا الفئة السمة المخزنة بإنشاء VBO. بدلاً من ذلك، يستخدم
أي VBO يتم تمريره في المُنشئ ويمكن تغييره لاحقًا عبر خاصية
`buffer`.<br /><br />
من الضروري تمرير معلمات إضافية جنبًا إلى جنب مع VBO. هذه هي: GL
context، نوع البيانات GL، عدد المكونات لكل رأس، عدد البايتات لكل
مكون، وعدد الرؤوس.<br /><br />
أكثر حالات الاستخدام شيوعًا لهذه الفئة هي عندما يتداخل نوع من
حسابات GPGPU أو حتى ينتج VBOs المعنية.
</p>
<h2>Examples</h2>
<p>
[example:webgl_buffergeometry_glbufferattribute Points with custom buffers]<br />
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:WebGLBuffer buffer], [param:GLenum type], [param:Integer itemSize], [param:Integer elementSize], [param:Integer count], [param:Boolean normalized] )</h3>
<p>
`buffer` — يجب أن يكون
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer].
<br />
`type` — واحد من
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types أنواع بيانات WebGL].
<br />
`itemSize` — عدد قيم المصفوفة التي يجب ربطها برأس معين. على سبيل
المثال، إذا كانت هذه السمة تخزن متجهًا ثلاثي الأبعاد (مثل الموضع،
الطبيعي، أو اللون)، فيجب أن يكون itemSize هو 3.
<br />
`elementSize` — 1، 2 أو 4. الحجم المقابل (بالبايت) للمعلمة "type"
المعطاة.
</p>
<ul>
<li>gl.FLOAT: 4</li>
<li>gl.UNSIGNED_SHORT: 2</li>
<li>gl.SHORT: 2</li>
<li>gl.UNSIGNED_INT: 4</li>
<li>gl.INT: 4</li>
<li>gl.BYTE: 1</li>
<li>gl.UNSIGNED_BYTE: 1</li>
</ul>
<p>`count` — عدد الرؤوس المتوقع في VBO.</p>
<p>
`normalized` — (optional) Applies to integer data only.
Indicates how the underlying data in the buffer maps to the values in the
GLSL code. For instance, if [page:WebGLBuffer buffer] contains data of
`gl.UNSIGNED_SHORT`, and [page:Boolean normalized] is true, the values `0 -
+65535` in the buffer data will be mapped to 0.0f - +1.0f in the GLSL
attribute. A `gl.SHORT` (signed) would map from -32768 - +32767 to -1.0f
- +1.0f. If [page:Boolean normalized] is false, the values will be
converted to floats unmodified, i.e. 32767 becomes 32767.0f.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:WebGLBuffer buffer]</h3>
<p>
نسخة
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer] الحالية.
</p>
<h3>[property:Integer count]</h3>
<p>عدد الرؤوس المتوقع في VBO.</p>
<h3>[property:Integer elementSize]</h3>
<p>
يخزن الحجم المقابل بالبايت لقيمة خاصية `type` الحالية.
</p>
<p>انظر أعلاه (المُنشئ) لقائمة بأحجام الأنواع المعروفة.</p>
<h3>[property:Boolean isGLBufferAttribute]</h3>
<p>للقراءة فقط. دائمًا `true`.</p>
<h3>[property:Integer itemSize]</h3>
<p>كم عدد القيم التي تشكل كل عنصر (رأس).</p>
<h3>[property:String name]</h3>
<p>
اسم اختياري لهذه الحالة من السمة. الافتراضي هو سلسلة فارغة.
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
الافتراضي هو `false`. تعيين هذا إلى true يزاد
[page:GLBufferAttribute.version version].
</p>
<h3>[property:Boolean normalized]</h3>
<p>
Indicates how the underlying data in the buffer maps to the values in the
GLSL shader code. See the constructor above for details.
</p>
<h3>[property:GLenum type]</h3>
<p>
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Constants#Data_types نوع بيانات WebGL] يصف محتوى VBO الأساسي.
</p>
<p>
قم بتعيين هذه الخاصية معًا مع `elementSize`. الطريقة المستحسنة هي
باستخدام طريقة `setType`.
</p>
<h3>[property:Integer version]</h3>
<p>
رقم إصدار، يزاد كل مرة يتم فيها تعيين خاصية needsUpdate على true.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:this setBuffer]( buffer )</h3>
<p>تضبط خاصية `buffer`.</p>
<h3>[method:this setType]( type, elementSize )</h3>
<p>تضبط كلاً من خصائص `type` و `elementSize`.</p>
<h3>[method:this setItemSize]( itemSize )</h3>
<p>تضبط خاصية `itemSize`.</p>
<h3>[method:this setCount]( count )</h3>
<p>تضبط خاصية `count`.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:BufferAttribute] →
<h1>[name]</h1>
<p class="desc">نسخة مثيلة من [page:BufferAttribute].</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:TypedArray array], [param:Integer itemSize], [param:Boolean normalized], [param:Number meshPerAttribute] )</h3>
<h2>الخصائص (Properties)</h2>
<p>انظر [page:BufferAttribute] للخصائص الموروثة.</p>
<h3>[property:Number meshPerAttribute]</h3>
<p>
يحدد مدى تكرار قيمة هذه السمة المخزنة. قيمة واحدة تعني أن كل قيمة من
السمة المثيلة يتم استخدامها لمثيل واحد. قيمتان تعني أن كل قيمة يتم
استخدامها لمثيلين متتاليين (وهكذا). الافتراضي هو `1`.
</p>
<h2>الوظائف (Methods)</h2>
<p>انظر [page:BufferAttribute] للطُرق الموروثة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:BufferGeometry] →
<h1>[name]</h1>
<p class="desc">نسخة مثيلة من [page:BufferGeometry].</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( )</h3>
<h2>الخصائص (Properties)</h2>
<p>انظر [page:BufferGeometry] للخصائص الموروثة.</p>
<h3>[property:Number instanceCount]</h3>
<p>الافتراضي هو `Infinity`.</p>
<h3>[property:Boolean isInstancedBufferGeometry]</h3>
<p>علامة للقراءة فقط للتحقق مما إذا كان الكائن المعطى هو من نوع [name].</p>
<h2>الوظائف (Methods)</h2>
<p>انظر [page:BufferGeometry] للطُرق الموروثة.</p>
<h3>[method:this copy]( [param:InstancedBufferGeometry source] )</h3>
<p>ينسخ [name] المعطى إلى هذه الحالة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:InterleavedBuffer] →
<h1>[name]</h1>
<p class="desc">نسخة مثيلة من [page:InterleavedBuffer].</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:TypedArray array], [param:Integer itemSize], [param:Number meshPerAttribute] )</h3>
<h2>الخصائص (Properties)</h2>
<p>انظر [page:InterleavedBuffer] للخصائص الموروثة.</p>
<h3>[property:Number meshPerAttribute]</h3>
<p>الافتراضي هو `1`.</p>
<h2>الوظائف (Methods)</h2>
<p>انظر [page:InterleavedBuffer] للطُرق الموروثة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
"متداخل" يعني أن العديد من السمات، ربما من أنواع مختلفة،
(على سبيل المثال، الموضع، الطبيعي، uv، اللون) معبأة في مصفوفة واحدة.
<br /><br />
يمكن العثور على مقدمة في المصفوفات المتداخلة هنا:
[link:https://blog.tojicode.com/2011/05/interleaved-array-basics.html أساسيات المصفوفات المتداخلة]
</p>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_buffergeometry_points_interleaved webgl / buffergeometry / points / interleaved]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:TypedArray array], [param:Integer stride] )</h3>
<p>
[page:TypedArray array] -- مصفوفة مكتوبة بذاكرة مشتركة. يخزن بيانات
الهندسة.<br />
[page:Integer stride] -- عدد عناصر المصفوفة المكتوبة لكل رأس.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Array array]</h3>
<p>مصفوفة مكتوبة بذاكرة مشتركة. يخزن بيانات الهندسة.</p>
<h3>[property:Integer stride]</h3>
<p>عدد عناصر المصفوفة المكتوبة لكل رأس.</p>
<h3>[property:Integer count]</h3>
<p>يعطي إجمالي عدد العناصر في المصفوفة.</p>
<h3>[property:Object updateRange]</h3>
<p>
كائن يحتوي على إزاحة وعدد.<br />
- [page:Number offset]: الافتراضي هو `0`.<br />
- [page:Number count]: الافتراضي هو `-1`.<br />
</p>
<h3>[property:String uuid]</h3>
<p>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] من
هذه الحالة. يتم تعيين هذا تلقائيًا، لذلك لا يجب تحريره.
</p>
<h3>[property:Integer version]</h3>
<p>
رقم إصدار، يزاد كل مرة يتم فيها تعيين خاصية needsUpdate على true.
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
الافتراضي هو `false`. تعيين هذا إلى true يزاد
[page:InterleavedBuffer.version version].
</p>
<h3>[property:Usage usage]</h3>
<p>
يحدد نمط الاستخدام المقصود لمخزن البيانات لأغراض التحسين. يتوافق مع
المعلمة `usage` من
[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/bufferData WebGLRenderingContext.bufferData]().
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:this copy]( [param:InterleavedBuffer source] )</h3>
<p>ينسخ [name] آخر إلى هذه [name].</p>
<h3>[method:this copyAt]( [param:Integer index1], [param:InterleavedBuffer attribute], [param:Integer index2] )</h3>
<p>
ينسخ البيانات من `attribute[index2]` إلى [page:InterleavedBuffer.array array][index1].
</p>
<h3>[method:this set]( [param:TypedArray value], [param:Integer offset] )</h3>
<p>
value - المصفوفة (المكتوبة) المصدر.<br />
offset - الإزاحة في المصفوفة الهدف التي يجب البدء فيها بكتابة القيم
من المصفوفة المصدر. الافتراضي هو `0`.<br /><br />
يخزن قيمًا متعددة في المخزن، قراءة قيم الإدخال من
مصفوفة محددة.
</p>
<h3>[method:InterleavedBuffer clone]( [param:Object data] )</h3>
<p>
data - يحمل هذا الكائن مصفوفات ذاكرة مشتركة مطلوبة لنسخ هندسات
بسمات متداخلة بشكل صحيح.<br /><br />
ينشئ نسخة من هذه [name].
</p>
<h3>[method:this setUsage] ( [param:Usage value] )</h3>
<p>ضبط [page:InterleavedBuffer.usage usage] على value.</p>
<h3>[method:Object toJSON]( [param:Object data] )</h3>
<p>
data - يحمل هذا الكائن مصفوفات ذاكرة مشتركة مطلوبة لتسلسل هندسات
بسمات متداخلة بشكل صحيح.<br /><br />
يسلسل هذه [name].
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,117 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc"></p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:InterleavedBuffer interleavedBuffer], [param:Integer itemSize], [param:Integer offset], [param:Boolean normalized] )</h3>
<h2>الخصائص (Properties)</h2>
<h3>[property:InterleavedBuffer data]</h3>
<p>
نسخة [page:InterleavedBuffer InterleavedBuffer] الممررة في
المُنشئ.
</p>
<h3>[property:TypedArray array]</h3>
<p>قيمة [page:InterleavedBufferAttribute.data data].array.</p>
<h3>[property:Integer count]</h3>
<p>
قيمة [page:InterleavedBufferAttribute.data data].count. إذا كان
المخزن يخزن عنصرًا ثلاثي الأبعاد (مثل الموضع، الطبيعي، أو
اللون)، فسيحسب عدد هذه العناصر المخزنة.
</p>
<h3>[property:Boolean isInterleavedBufferAttribute]</h3>
<p>علامة للقراءة فقط للتحقق مما إذا كان الكائن المعطى هو من نوع [name].</p>
<h3>[property:Integer itemSize]</h3>
<p>كم عدد القيم التي تشكل كل عنصر.</p>
<h3>[property:String name]</h3>
<p>
اسم اختياري لهذه الحالة من السمة. الافتراضي هو سلسلة فارغة.
</p>
<h3>[property:Boolean needsUpdate]</h3>
<p>
الافتراضي هو `false`. تعيين هذا إلى `true` سيرسل المخزن المتداخل
بأكمله (وليس فقط بيانات السمة المحددة) إلى GPU مرة أخرى.
</p>
<h3>[property:Boolean normalized]</h3>
<p>الافتراضي هو `false`.</p>
<h3>[property:Integer offset]</h3>
<p>الإزاحة في المصفوفة الأساسية حيث يبدأ عنصر.</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:this applyMatrix4]( [param:Matrix4 m] )</h3>
<p>
يطبق مصفوفة [page:Matrix4 m] على كل عنصر Vector3 من هذه
InterleavedBufferAttribute.
</p>
<h3>[method:this applyNormalMatrix]( [param:Matrix3 m] )</h3>
<p>
يطبق مصفوفة الطبيعي [page:Matrix3 m] على كل عنصر Vector3 من هذه
InterleavedBufferAttribute.
</p>
<h3>[method:this transformDirection]( [param:Matrix4 m] )</h3>
<p>
يطبق مصفوفة [page:Matrix4 m] على كل عنصر Vector3 من هذه
InterleavedBufferAttribute، تفسير العناصر كمتجهات اتجاه.
</p>
<h3>[method:Number getX]( [param:Integer index] )</h3>
<p>يعيد مكون x للعنصر في المؤشر المعطى.</p>
<h3>[method:Number getY]( [param:Integer index] )</h3>
<p>يعيد مكون y للعنصر في المؤشر المعطى.</p>
<h3>[method:Number getZ]( [param:Integer index] )</h3>
<p>يعيد مكون z للعنصر في المؤشر المعطى.</p>
<h3>[method:Number getW]( [param:Integer index] )</h3>
<p>يعيد مكون w للعنصر في المؤشر المعطى.</p>
<h3>[method:this setX]( [param:Integer index], [param:Float x] )</h3>
<p>يضبط مكون x للعنصر في المؤشر المعطى.</p>
<h3>[method:this setY]( [param:Integer index], [param:Float y] )</h3>
<p>يضبط مكون y للعنصر في المؤشر المعطى.</p>
<h3>[method:this setZ]( [param:Integer index], [param:Float z] )</h3>
<p>يضبط مكون z للعنصر في المؤشر المعطى.</p>
<h3>[method:this setW]( [param:Integer index], [param:Float w] )</h3>
<p>يضبط مكون w للعنصر في المؤشر المعطى.</p>
<h3>[method:this setXY]( [param:Integer index], [param:Float x], [param:Float y] )</h3>
<p>يضبط مكونات x و y للعنصر في المؤشر المعطى.</p>
<h3>[method:this setXYZ]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z] )</h3>
<p>يضبط مكونات x و y و z للعنصر في المؤشر المعطى.</p>
<h3>[method:this setXYZW]( [param:Integer index], [param:Float x], [param:Float y], [param:Float z], [param:Float w] )</h3>
<p>يضبط مكونات x و y و z و w للعنصر في المؤشر المعطى.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
كائن [page:Layers] يعين [page:Object3D] إلى 1 أو أكثر من 32
طبقة مرقمة من `0` إلى `31` - يتم تخزين الطبقات داخليًا كـ
[link:https://en.wikipedia.org/wiki/Mask_(computing) قناع بت]، وافتراضيًا
كل Object3Ds عضو في الطبقة 0.<br /><br />
يمكن استخدام هذا للتحكم في الرؤية - يجب أن يشترك كائن في طبقة مع
[page:Camera camera] ليكون مرئيًا عندما يتم عرض هذه الكاميرا
المعروضة.<br /><br />
جميع الفئات التي ترث من [page:Object3D] لديها
[page:Object3D.layers] خاصية وهي نسخة من هذه الفئة.
</p>
<h2>أمثلة (Examples)</h2>
<p>[example:webgpu_layers WebGPU / layers]</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]()</h3>
<p>إنشاء كائن طبقات جديد، مع تعيين العضوية في البداية إلى الطبقة 0.</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Integer mask]</h3>
<p>
قناع بت يخزن أي من الطبقات الـ 32 التي يكون هذا الكائن طبقات حاليًا
عضوًا فيه.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:undefined disable]( [param:Integer layer] )</h3>
<p>
layer - عدد صحيح من 0 إلى 31.<br /><br />
إزالة عضوية هذه `layer`.
</p>
<h3>[method:undefined enable]( [param:Integer layer] )</h3>
<p>
layer - عدد صحيح من 0 إلى 31.<br /><br />
إضافة عضوية هذه `layer`.
</p>
<h3>[method:undefined set]( [param:Integer layer] )</h3>
<p>
layer - عدد صحيح من 0 إلى 31.<br /><br />
تعيين العضوية إلى `layer`، وإزالة العضوية من جميع الطبقات الأخرى.
</p>
<h3>[method:Boolean test]( [param:Layers layers] )</h3>
<p>
layers - كائن طبقات<br /><br />
يعود بـ true إذا كان هذا وكائن `layers` الممرر لديهما على الأقل واحدة
طبقة مشتركة.
</p>
<h3>[method:Boolean isEnabled]( [param:Integer layer] )</h3>
<p>
layer - عدد صحيح من 0 إلى 31.<br /><br />
يعود بـ true إذا تم تمكين الطبقة المعطاة.
</p>
<h3>[method:undefined toggle]( [param:Integer layer] )</h3>
<p>
layer - عدد صحيح من 0 إلى 31.<br /><br />
تبديل عضوية `layer`.
</p>
<h3>[method:undefined enableAll]()</h3>
<p>إضافة عضوية لجميع الطبقات.</p>
<h3>[method:undefined disableAll]()</h3>
<p>إزالة العضوية من جميع الطبقات.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,603 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
هذه هي الفئة الأساسية لمعظم الكائنات في three.js وتوفر مجموعة من
الخصائص والطُرق للتلاعب بالكائنات في المساحة ثلاثية الأبعاد.<br /><br />
لاحظ أن هذا يمكن استخدامه لتجميع الكائنات عبر طريقة [page:.add]( object ) التي تضيف الكائن كطفل، ومع ذلك فمن الأفضل
استخدام [page:Group] لهذا.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]()</h3>
<p>المُنشئ لا يأخذ أي وسائط.</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:AnimationClip animations]</h3>
<p>مصفوفة بمقاطع الرسوم المتحركة للكائن.</p>
<h3>[property:Boolean castShadow]</h3>
<p>ما إذا كان يتم عرض الكائن في خريطة الظل. الافتراضي هو `false`.</p>
<h3>[property:Array children]</h3>
<p>
مصفوفة بأطفال الكائن. انظر [page:Group] للحصول على معلومات حول
تجميع الكائنات يدويًا.
</p>
<h3>[property:Material customDepthMaterial]</h3>
<p>
مادة عمق مخصصة للاستخدام عند التقديم إلى خريطة العمق. يمكن استخدامه فقط
في سياق المشابك. عند رمي الظل مع
[page:DirectionalLight] أو [page:SpotLight]، إذا كنت تعدل
مواضع رأس في شادر رأس يجب تحديد customDepthMaterial مخصص
لظلال صحيحة. الافتراضي هو `undefined`.
</p>
<h3>[property:Material customDistanceMaterial]</h3>
<p>
نفس [page:.customDepthMaterial customDepthMaterial]، ولكن يستخدم مع
[page:PointLight]. الافتراضي هو `undefined`.
</p>
<h3>[property:Boolean frustumCulled]</h3>
<p>
عند تعيين هذا، يتحقق في كل إطار ما إذا كان الكائن في مخروط
الكاميرا قبل تقديم الكائن. إذا تم تعيينه على `false` يتم تقديم الكائن
في كل إطار حتى لو لم يكن في مخروط الكاميرا.
الافتراضي هو `true`.
</p>
<h3>[property:Integer id]</h3>
<p>readonly رقم فريد لهذه الحالة من الكائن.</p>
<h3>[property:Boolean isObject3D]</h3>
<p>علامة للقراءة فقط للتحقق مما إذا كان الكائن المعطى هو من نوع [name].</p>
<h3>[property:Layers layers]</h3>
<p>
عضوية طبقة الكائن. الكائن مرئي فقط إذا كان لديه
على الأقل طبقة واحدة مشتركة مع [page:Camera] قيد الاستخدام. يمكن استخدام هذه الخاصية أيضًا لتصفية
كائنات غير مرغوب فيها في اختبارات التقاطع بالأشعة
عند استخدام [page:Raycaster].
</p>
<h3>[property:Matrix4 matrix]</h3>
<p>مصفوفة التحول المحلية.</p>
<h3>[property:Boolean matrixAutoUpdate]</h3>
<p>
عند تعيين هذا، يحسب مصفوفة الموضع، (الدوران أو
quaternion) والحجم في كل إطار وأيضًا يعيد حساب خصائص matrixWorld
. الافتراضي هو [page:Object3D.DEFAULT_MATRIX_AUTO_UPDATE] (true).
</p>
<h3>[property:Matrix4 matrixWorld]</h3>
<p>
التحول العالمي للكائن. إذا لم يكن لدى Object3D أي والد، فإنه
مطابق للتحول المحلي [page:.matrix].
</p>
<h3>[property:Boolean matrixWorldAutoUpdate]</h3>
<p>
إذا تم تعيينه، فإن المقدم يتحقق في كل إطار ما إذا كان الكائن و
أطفاله يحتاجون إلى تحديثات المصفوفة. عندما لا يكون كذلك، فعليك الحفاظ على جميع
المصفوفات في الكائن وأطفاله بنفسك. الافتراضي هو
[page:Object3D.DEFAULT_MATRIX_WORLD_AUTO_UPDATE] (true).
</p>
<h3>[property:Boolean matrixWorldNeedsUpdate]</h3>
<p>
عند تعيين هذا، يحسب matrixWorld في ذلك الإطار ويعيد
هذه الخاصية إلى false. الافتراضي هو `false`.
</p>
<h3>[property:Matrix4 modelViewMatrix]</h3>
<p>
يتم تمرير هذا إلى الشادر ويستخدم لحساب موضع
الكائن.
</p>
<h3>[property:String name]</h3>
<p>
اسم اختياري للكائن (لا يحتاج إلى أن يكون فريدًا). الافتراضي هو
سلسلة فارغة.
</p>
<h3>[property:Matrix3 normalMatrix]</h3>
<p>
يتم تمرير هذا إلى الشادر ويستخدم لحساب الإضاءة لـ
الكائن. هو نقل معكوس من المصفوفة 3x3 العلوية اليسرى
من مصفوفة modelViewMatrix لهذا الكائن.<br /><br />
سبب هذه المصفوفة الخاصة هو أن استخدام ببساطة
modelViewMatrix قد يؤدي إلى طول غير وحدة من normals (على التحجيم)
أو في اتجاه غير عمودي (على التحجيم غير الموحد).<br /><br />
من ناحية أخرى، جزء الترجمة من modelViewMatrix غير
ذات صلة بحساب normals. وبالتالي فإن Matrix3 كافية.
</p>
<h3>[property:Function onAfterRender]</h3>
<p>
رد اتصال اختياري يتم تنفيذه مباشرة بعد تقديم كائن ثلاثي الأبعاد
. يتم استدعاء هذه الوظيفة بالمعلمات التالية: renderer,
scene, camera, geometry, material, group.
</p>
<p>
يرجى ملاحظة أن هذا الرد الاتصال يتم تنفيذه فقط لـ `renderable` 3D
كائنات. معنى كائنات ثلاثية الأبعاد التي تحدد مظهرها المرئي مع
الهندسة والمواد مثل نسخ [page:Mesh]، [page:Line]،
[page:Points] أو [page:Sprite]. نسخ من [page:Object3D]، [page:Group]
أو [page:Bone] ليست قابلة للتقديم وبالتالي لا يتم تنفيذ هذا الرد الاتصال
لمثل هذه الكائنات.
</p>
<h3>[property:Function onAfterShadow]</h3>
<p>
An optional callback that is executed immediately after a 3D object is
rendered to a shadow map. This function is called with the following parameters: renderer,
scene, camera, shadowCamera, geometry, depthMaterial, group.
</p>
<p>
يرجى ملاحظة أن هذا الرد الاتصال يتم تنفيذه فقط لـ `renderable` 3D
كائنات. معنى كائنات ثلاثية الأبعاد التي تحدد مظهرها المرئي مع
الهندسة والمواد مثل نسخ [page:Mesh]، [page:Line]،
[page:Points] أو [page:Sprite]. نسخ من [page:Object3D]، [page:Group]
أو [page:Bone] ليست قابلة للتقديم وبالتالي لا يتم تنفيذ هذا الرد الاتصال
لمثل هذه الكائنات.
</p>
<h3>[property:Function onBeforeRender]</h3>
<p>
رد اتصال اختياري يتم تنفيذه مباشرة قبل تقديم كائن ثلاثي الأبعاد
. يتم استدعاء هذه الوظيفة بالمعلمات التالية: renderer,
scene, camera, geometry, material, group.
</p>
<p>
يرجى ملاحظة أن هذا الرد الاتصال يتم تنفيذه فقط لـ `renderable` 3D
كائنات. معنى كائنات ثلاثية الأبعاد التي تحدد مظهرها المرئي مع
الهندسة والمواد مثل نسخ [page:Mesh]، [page:Line]،
[page:Points] أو [page:Sprite]. نسخ من [page:Object3D]، [page:Group]
أو [page:Bone] ليست قابلة للتقديم وبالتالي لا يتم تنفيذ هذا الرد الاتصال
لمثل هذه الكائنات.
</p>
<h3>[property:Function onBeforeShadow]</h3>
<p>
An optional callback that is executed immediately before a 3D object is
rendered to a shadow map. This function is called with the following parameters: renderer,
scene, camera, shadowCamera, geometry, depthMaterial, group.
</p>
<p>
يرجى ملاحظة أن هذا الرد الاتصال يتم تنفيذه فقط لـ `renderable` 3D
كائنات. معنى كائنات ثلاثية الأبعاد التي تحدد مظهرها المرئي مع
الهندسة والمواد مثل نسخ [page:Mesh]، [page:Line]،
[page:Points] أو [page:Sprite]. نسخ من [page:Object3D]، [page:Group]
أو [page:Bone] ليست قابلة للتقديم وبالتالي لا يتم تنفيذ هذا الرد الاتصال
لمثل هذه الكائنات.
</p>
<h3>[property:Object3D parent]</h3>
<p>
والد كائن في [link:https://en.wikipedia.org/wiki/Scene_graph scene graph]. يمكن أن يكون لكائن واحد على الأكثر واحد.
</p>
<h3>[property:Vector3 position]</h3>
<p>
A [page:Vector3] يمثل الموضع المحلي للكائن. الافتراضي هو `(0,
0, 0)`.
</p>
<h3>[property:Quaternion quaternion]</h3>
<p>دوران المحلية للكائن كـ [page:Quaternion Quaternion].</p>
<h3>[property:Boolean receiveShadow]</h3>
<p>ما إذا كان المادة تتلقى الظلال. الافتراضي هو `false`.</p>
<h3>[property:Number renderOrder]</h3>
<p>
يسمح هذا القيمة بتجاوز ترتيب التصيير الافتراضي لـ
[link:https://en.wikipedia.org/wiki/Scene_graph scene graph] objects على الرغم من أن الأشياء المعتمة والشفافة لا تزال مرتبة
بشكل مستقل. عند تعيين هذه الخاصية لمثيل [page:Group Group]، سيتم فرز جميع الكائنات النسل وتقديمها معًا.
الترتيب من أدنى إلى أعلى renderOrder. القيمة الافتراضية هي `0`.
</p>
<h3>[property:Euler rotation]</h3>
<p>
دوران المحلي للكائن (انظر
[link:https://en.wikipedia.org/wiki/Euler_angles Euler angles])، في
شعاع.
</p>
<h3>[property:Vector3 scale]</h3>
<p>مقياس المحلي للكائن. الافتراضي هو [page:Vector3]( 1, 1, 1 ).</p>
<h3>[property:Vector3 up]</h3>
<p>
يستخدم هذا بواسطة [page:.lookAt lookAt] method، على سبيل المثال، إلى
تحديد توجه النتيجة.<br />
الافتراضي هو [page:Object3D.DEFAULT_UP] - أي `( 0, 1, 0 )`.
</p>
<h3>[property:Object userData]</h3>
<p>
كائن يمكن استخدامه لتخزين بيانات مخصصة حول Object3D. يجب ألا يحتوي على مراجع إلى وظائف كونها لن تكون مستنسخة.
</p>
<h3>[property:String uuid]</h3>
<p>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] من
هذه المثيلة كائن. يتم تعيين هذا تلقائيًا، لذلك يجب عدم تحريره.
</p>
<h3>[property:Boolean visible]</h3>
<p>الكائن يحصل على التصيير إذا كان `true`. الافتراضي هو `true`.</p>
<h2>الخصائص الثابتة (Static Properties)</h2>
<p>
يتم تعريف الخصائص والطرق الثابتة لكل فئة بدلاً من كل
مثيل لتلك الفئة. هذا يعني أن تغيير
[page:Object3D.DEFAULT_UP] أو [page:Object3D.DEFAULT_MATRIX_AUTO_UPDATE]
سيغير قيم [page:.up up] و [page:.matrixAutoUpdate matrixAutoUpdate] لـ `كل` مثيل من Object3D (أو الفئات المشتقة)
تم إنشاؤه بعد إجراء التغيير (لن يتأثر Object3Ds المنشأ بالفعل).
</p>
<h3>[property:Vector3 DEFAULT_UP]</h3>
<p>
اتجاه [page:.up up] الافتراضي للكائنات، يستخدم أيضًا كموقع افتراضي
لـ [page:DirectionalLight]، [page:HemisphereLight] و
[page:Spotlight] (الذي يخلق أضواء تشرق من الأعلى إلى الأسفل).<br />
مضبوط على ( 0, 1, 0 ) بشكل افتراضي.
</p>
<h3>[property:Boolean DEFAULT_MATRIX_AUTO_UPDATE]</h3>
<p>
العدد الافتراضي لـ [page:.matrixAutoUpdate matrixAutoUpdate] لـ
Object3Ds المنشأة حديثًا.<br />
</p>
<h3>[property:Boolean DEFAULT_MATRIX_WORLD_AUTO_UPDATE]</h3>
<p>
العدد الافتراضي لـ [page:.matrixWorldAutoUpdate
matrixWorldAutoUpdate] لـ Object3Ds المنشأة حديثًا.<br />
</p>
<h2>الوظائف (Methods)</h2>
<p>
طرق [page:EventDispatcher EventDispatcher] متاحة على هذه
فئة.
</p>
<h3>[method:this add]( [param:Object3D object], ... )</h3>
<p>
يضيف `object` كطفل لهذا الكائن. يمكن إضافة عدد غير محدود من الكائنات. سيتم إزالة أي والد حالي على كائن ممرر هنا، نظرًا لأنه يمكن أن يكون للكائن والد واحد على الأكثر.<br /><br />
راجع [page:Group] للحصول على معلومات حول تجميع الكائنات يدويًا.
</p>
<h3>[method:undefined applyMatrix4]( [param:Matrix4 matrix] )</h3>
<p>
يطبق تحويل المصفوفة على الكائن ويحدث موقع الكائن ودورانه ومقياسه.
</p>
<h3>[method:this applyQuaternion]( [param:Quaternion quaternion] )</h3>
<p>يطبق الدوران الممثل بالرباعي على الكائن.</p>
<h3>[method:this attach]( [param:Object3D object] )</h3>
<p>
يضيف `object` كطفل لهذا، مع الحفاظ على تحويل العالم للكائن.
<br /><br />
ملاحظة: هذه الطريقة لا تدعم رسومات المشهد التي تحتوي على
نقاط غير متساوية في الحجم (s).
</p>
<h3>[method:Object3D clone]( [param:Boolean recursive] )</h3>
<p>
recursive -- إذا كان صحيحًا، فإن نسل الكائن يتم استنساخه أيضًا. الافتراضي
صحيح.<br /><br />
يعود بنسخة من هذا الكائن واختياريًا جميع النسل.
</p>
<h3>[method:this copy]( [param:Object3D object], [param:Boolean recursive] )</h3>
<p>
recursive -- إذا كان صحيحًا، فإن نسل الكائن يتم نسخه أيضًا. الافتراضي
صحيح.<br /><br />
نسخ الكائن المعطى في هذا الكائن. ملاحظة: لا يتم نسخ مستمعو الأحداث و
التعليمات البرمجية المعرفة من قبل المستخدم ([page:.onAfterRender] و [page:.onBeforeRender]).
</p>
<h3>[method:Object3D getObjectById]( [param:Integer id] )</h3>
<p>
id -- رقم فريد لمثيل الكائن<br /><br />
يبحث في كائن وأطفاله، بدءًا من الكائن
نفسه، ويرجع أول مطابقة مع id.<br />
لاحظ أنه يتم تعيين المعرفات بالترتيب التاريخي: 1، 2، 3، ...،
زيادة بواحد لكل كائن جديد.
</p>
<h3>[method:Object3D getObjectByName]( [param:String name] )</h3>
<p>
name -- سلسلة للمطابقة مع خصائص Object3D.name للأطفال.
<br /><br />
يبحث في كائن وأطفاله، بدءًا من الكائن
نفسه، ويرجع أول مطابقة مع اسم.<br />
لاحظ أنه بالنسبة لمعظم الكائنات، يكون الاسم سلسلة فارغة بشكل افتراضي. سوف
ستضطر إلى تعيينه يدويًا للاستفادة من هذه الطريقة.
</p>
<h3>[method:Object3D getObjectByProperty]( [param:String name], [param:Any value] )</h3>
<p>
name -- اسم الخاصية التي يتم البحث عنها. <br />
value -- قيمة الخاصية المعطاة. <br /><br />
يبحث في كائن وأطفاله، بدءًا من الكائن
نفسه، ويرجع أول مع خاصية تطابق القيمة
معطى.
</p>
<h3>[method:Object3D getObjectsByProperty]( [param:String name], [param:Any value], [param:Array optionalTarget] )</h3>
<p>
name -- اسم الخاصية التي يتم البحث عنها. <br />
value -- قيمة الخاصية المعطاة. <br />
optionalTarget -- (optional) target to set the result.
Otherwise a new Array is instantiated. If set, you must clear this
array prior to each call (i.e., array.length = 0;). <br /><br />
يبحث في كائن وأطفاله، بدءًا من الكائن
نفسه، ويرجع جميع الكائنات مع خاصية تطابق القيمة
معطى.
</p>
<h3>[method:Vector3 getWorldPosition]( [param:Vector3 target] )</h3>
<p>
[page:Vector3 target] — سيتم نسخ النتيجة في هذا Vector3.
<br /><br />
يعود بمتجه يمثل موقع الكائن في الفضاء العالمي.
</p>
<h3>[method:Quaternion getWorldQuaternion]( [param:Quaternion target] )</h3>
<p>
[page:Quaternion target] — سيتم نسخ النتيجة في هذا Quaternion.
<br /><br />
يعود برباعي يمثل دوران الكائن في الفضاء العالمي.
</p>
<h3>[method:Vector3 getWorldScale]( [param:Vector3 target] )</h3>
<p>
[page:Vector3 target] — سيتم نسخ النتيجة في هذا Vector3.
<br /><br />
يعود بمتجه من عوامل التحجيم المطبقة على الكائن لكل
محور في الفضاء العالمي.
</p>
<h3>[method:Vector3 getWorldDirection]( [param:Vector3 target] )</h3>
<p>
[page:Vector3 target] — سيتم نسخ النتيجة في هذا Vector3.
<br /><br />
يعود بمتجه يمثل اتجاه محور z الموجب للكائن في
الفضاء العالمي.
</p>
<h3>[method:Vector3 localToWorld]( [param:Vector3 vector] )</h3>
<p>
vector - متجه يمثل موقعًا في هذا المساحة المحلية للكائن.<br /><br />
يحول المتجه من مساحة هذا الكائن المحلية إلى الفضاء العالمي.
</p>
<h3>[method:undefined lookAt]( [param:Vector3 vector] )<br />
[method:undefined lookAt]( [param:Float x], [param:Float y], [param:Float z] )
</h3>
<p>
vector - متجه يمثل موقعًا في الفضاء العالمي.<br /><br />
اختياريًا، [page:.x x]، [page:.y y] و [page:.z z] مكونات من
موقع الفضاء العالمي.<br /><br />
يدور الكائن لمواجهة نقطة في الفضاء العالمي.<br /><br />
هذه الطريقة لا تدعم كائنات تحتوي على
والد (والدين) غير متساوي (ين) في الحجم.
</p>
<h3>[method:undefined raycast]( [param:Raycaster raycaster], [param:Array intersects] )</h3>
<p>
طريقة فارغة (فارغة) للحصول على تقاطعات بين شعاع صب وهذا
كائن. تطبق فئات فرعية مثل [page:Mesh]، [page:Line]، و [page:Points]
هذه الطريقة من أجل استخدام التصوير بالأشعة.
</p>
<h3>[method:this remove]( [param:Object3D object], ... )</h3>
<p>
يزيل `object` كطفل لهذا الكائن. يمكن إزالة عدد غير محدود من الكائنات
قد تم إزالته.
</p>
<h3>[method:this removeFromParent]()</h3>
<p>يزيل هذا الكائن من والده الحالي.</p>
<h3>[method:this clear]()</h3>
<p>يزيل جميع كائنات الأطفال.</p>
<h3>[method:this rotateOnAxis]( [param:Vector3 axis], [param:Float angle] )</h3>
<p>
axis -- متجه معتدل في المساحة المحلية. <br />
angle -- الزاوية بالراديان.<br /><br />
قم بتدوير كائن على طول محور في المساحة المحلية. يفترض أن يكون المحور
معتدل.
</p>
<h3>[method:this rotateOnWorldAxis]( [param:Vector3 axis], [param:Float angle])</h3>
<p>
axis -- متجه معتدل في المساحة العالمية. <br />
angle -- الزاوية بالراديان.<br /><br />
قم بتدوير كائن على طول محور في المساحة العالمية. يفترض أن يكون المحور
معتدل. تفترض طريقة عدم وجود والد دوران.
</p>
<h3>[method:this rotateX]( [param:Float rad] )</h3>
<p>
rad - الزاوية للتدوير بالراديان.<br /><br />
يدور الكائن حول محور x في المساحة المحلية.
</p>
<h3>[method:this rotateY]( [param:Float rad] )</h3>
<p>
rad - الزاوية للتدوير بالراديان.<br /><br />
يدور الكائن حول محور y في المساحة المحلية.
</p>
<h3>[method:this rotateZ]( [param:Float rad] )</h3>
<p>
rad - الزاوية للتدوير بالراديان.<br /><br />
يدور الكائن حول محور z في المساحة المحلية.
</p>
<h3>[method:undefined setRotationFromAxisAngle]( [param:Vector3 axis], [param:Float angle] )</h3>
<p>
axis -- متجه معتدل في المساحة المحلية. <br />
angle -- زاوية بالراديان<br /><br />
يستدعي [page:Quaternion.setFromAxisAngle setFromAxisAngle]( [page:Float axis], [page:Float angle] ) على [page:.quaternion].
</p>
<h3>[method:undefined setRotationFromEuler]( [param:Euler euler] )</h3>
<p>
euler -- زاوية أويلر تحدد كمية الدوران.<br />
يستدعي [page:Quaternion.setRotationFromEuler setRotationFromEuler](
[page:Euler euler]) على [page:.quaternion].
</p>
<h3>[method:undefined setRotationFromMatrix]( [param:Matrix4 m] )</h3>
<p>
m -- قم بتدوير الرباعي بمكون الدوران من المصفوفة.<br />
يستدعي [page:Quaternion.setFromRotationMatrix setFromRotationMatrix](
[page:Matrix4 m]) على [page:.quaternion].<br /><br />
لاحظ أن هذا يفترض أن الـ 3x3 العلوي من m هو مصفوفة دوران نقية
(أي غير مقاس).
</p>
<h3>[method:undefined setRotationFromQuaternion]( [param:Quaternion q] )</h3>
<p>
q -- رباعي معتدل.<br /><br />
نسخ الرباعي المعطى في [page:.quaternion].
</p>
<h3>[method:Object toJSON]( [param:Object meta] )</h3>
<p>
meta -- كائن يحتوي على بيانات تعريفية مثل المواد أو القوام أو الصور
للكائن.<br />
قم بتحويل الكائن إلى three.js
[link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
</p>
<h3>[method:this translateOnAxis]( [param:Vector3 axis], [param:Float distance] )</h3>
<p>
axis -- متجه معتدل في المساحة المحلية.<br />
distance -- المسافة التي يتم ترجمتها.<br /><br />
قم بترجمة كائن بمسافة على طول محور في المساحة المحلية. يفترض أن يكون المحور
معتدل.
</p>
<h3>[method:this translateX]( [param:Float distance] )</h3>
<p>يترجم الكائن على طول محور x في المساحة المحلية بوحدات `distance`.</p>
<h3>[method:this translateY]( [param:Float distance] )</h3>
<p>يترجم الكائن على طول محور y في المساحة المحلية بوحدات `distance`.</p>
<h3>[method:this translateZ]( [param:Float distance] )</h3>
<p>يترجم الكائن على طول محور z في المساحة المحلية بوحدات `distance`.</p>
<h3>[method:undefined traverse]( [param:Function callback] )</h3>
<p>
callback - وظيفة مع كأول وسيطة كائن object3D.<br /><br />
ينفذ رد الاتصال على هذا الكائن وجميع النسل.<br />
ملاحظة: يُفضل عدم تعديل رسم المشهد داخل رد الاتصال.
</p>
<h3>[method:undefined traverseVisible]( [param:Function callback] )</h3>
<p>
callback - وظيفة مع كأول وسيطة كائن object3D.<br /><br />
مثل traverse، ولكن سيتم تنفيذ رد الاتصال فقط للكائنات المرئية.
لا يتم اجتياز نسل الكائنات غير المرئية.<br />
ملاحظة: يُفضل عدم تعديل رسم المشهد داخل رد الاتصال.
</p>
<h3>[method:undefined traverseAncestors]( [param:Function callback] )</h3>
<p>
callback - وظيفة مع كأول وسيطة كائن object3D.<br /><br />
ينفذ رد الاتصال على جميع الأجداد.<br />
ملاحظة: يُفضل عدم تعديل رسم المشهد داخل رد الاتصال.
</p>
<h3>[method:undefined updateMatrix]()</h3>
<p>يحدث التحويل المحلي.</p>
<h3>[method:undefined updateMatrixWorld]( [param:Boolean force] )</h3>
<p>
force - منطقي يمكن استخدامه لتجاوز
[page:.matrixWorldAutoUpdate]، لإعادة حساب مصفوفة العالم لـ
الكائن والنسل في الإطار الحالي. مفيد إذا لم تتمكن من الانتظار
المصور لتحديثه في الإطار التالي (باستخدام
[page:.matrixWorldAutoUpdate] مضبوط على `true`).<br /><br />
يحدث التحويل العالمي للكائن ونسله إذا كان
تحتاج مصفوفة العالم إلى تحديث ([page:.matrixWorldNeedsUpdate] مضبوط على true) أو
إذا تم تعيين معلمة `force` على `true`.
</p>
<h3>[method:undefined updateWorldMatrix]( [param:Boolean updateParents], [param:Boolean updateChildren] )</h3>
<p>
updateParents - يحدث تحويل العالم للأجداد بشكل متكرر.<br />
updateChildren - يحدث تحويل العالم للنسل بشكل متكرر.<br /><br />
يحدث التحويل العالمي للكائن.
</p>
<h3>[method:Vector3 worldToLocal]( [param:Vector3 vector] )</h3>
<p>
vector - متجه يمثل موقعًا في الفضاء العالمي.<br /><br />
يحول المتجه من المساحة العالمية إلى المساحة المحلية لهذا الكائن.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
تم تصميم هذه الفئة للمساعدة في
[link:https://en.wikipedia.org/wiki/Ray_casting raycasting]. يتم استخدام Raycasting
لاختيار الماوس (العمل على معرفة الكائنات في المساحة ثلاثية الأبعاد التي يكون عليها الماوس
فوق) من بين أشياء أخرى.
</p>
<h2>مثال الكود</h2>
<code>
const raycaster = new THREE.Raycaster();
const pointer = new THREE.Vector2();
function onPointerMove( event ) {
// حساب موضع المؤشر في إحداثيات الجهاز المعتدلة
// (-1 إلى +1) لكلا المكونين
pointer.x = ( event.clientX / window.innerWidth ) * 2 - 1;
pointer.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
}
function render() {
// تحديث شعاع التقاط مع الكاميرا وموضع المؤشر
raycaster.setFromCamera( pointer, camera );
// حساب الكائنات المتقاطعة مع شعاع التقاط
const intersects = raycaster.intersectObjects( scene.children );
for ( let i = 0; i < intersects.length; i ++ ) {
intersects[ i ].object.material.color.set( 0xff0000 );
}
renderer.render( scene, camera );
}
window.addEventListener( 'pointermove', onPointerMove );
window.requestAnimationFrame(render);
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_interactive_cubes Raycasting to a Mesh]<br />
[example:webgl_interactive_cubes_ortho Raycasting to a Mesh in using an OrthographicCamera]<br />
[example:webgl_interactive_buffergeometry Raycasting to a Mesh with BufferGeometry]<br />
[example:webgl_instancing_raycast Raycasting to a InstancedMesh]<br />
[example:webgl_interactive_lines Raycasting to a Line]<br />
[example:webgl_interactive_raycasting_points Raycasting to Points]<br />
[example:webgl_geometry_terrain_raycast Terrain raycasting]<br />
[example:webgl_interactive_voxelpainter Raycasting to paint voxels]<br />
[example:webgl_raycaster_texture Raycast to a Texture]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Vector3 origin], [param:Vector3 direction], [param:Float near], [param:Float far] )</h3>
<p>
[page:Vector3 origin] — متجه المنشأ الذي يلقي منه الشعاع.<br />
[page:Vector3 direction] — متجه الاتجاه الذي يعطي اتجاهًا
للشعاع. يجب تعديله.<br />
[page:Float near] — جميع النتائج المرتجعة أبعد من قريب. قريب
لا يمكن أن يكون سلبيًا. القيمة الافتراضية هي 0.<br />
[page:Float far] — جميع النتائج المرتجعة أقرب من بعيد. بعيد لا يمكن
أقل من قريب. القيمة الافتراضية هي Infinity.
</p>
<p>هذا يخلق كائن raycaster جديد.<br /></p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Float far]</h3>
<p>
عامل بعيد للraycaster. هذه القيمة تشير إلى الكائنات التي يمكن
تجاهلها بناءً على المسافة. هذه القيمة لا يجب أن تكون سلبية و
يجب أن تكون أكبر من خاصية قريب.
</p>
<h3>[property:Float near]</h3>
<p>
عامل قريب للraycaster. هذه القيمة تشير إلى الكائنات التي يمكن
تجاهلها بناءً على المسافة. هذه القيمة لا يجب أن تكون سلبية و
يجب أن تكون أصغر من خاصية بعيد.
</p>
<h3>[property:Camera camera]</h3>
<p>
الكاميرا المستخدمة عند التصوير بالأشعة ضد كائنات تعتمد على المشهد مثل
كائنات billboarded مثل [page:Sprites]. يمكن تعيين هذا الحقل يدويًا أو
يتم تعيينه عند استدعاء "setFromCamera". افتراضات إلى null.
</p>
<h3>[property:Layers layers]</h3>
<p>
يستخدم من قبل [name] لتجاهل كائنات 3D بشكل اختياري عند إجراء
اختبارات التقاطع. يضمن المثال التالي للكود أن كائنات 3D فقط على طبقة `1` ستحظى باحترام من قِبَل المثيل من [name].
<code>
raycaster.layers.set( 1 );
object.layers.enable( 1 );
</code>
</p>
<h3>[property:Object params]</h3>
<p>
كائن به الخصائص التالية:
<code>
{
Mesh: {},
Line: { threshold: 1 },
LOD: {},
Points: { threshold: 1 },
Sprite: {}
}
</code>
حيث threshold هو دقة raycaster عند التقاط
كائنات، في وحدات العالم.
</p>
<h3>[property:Ray ray]</h3>
<p>ال[Page:Ray] المستخدم للتصوير بالأشعة.</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:undefined set]( [param:Vector3 origin], [param:Vector3 direction])</h3>
<p>
[page:Vector3 origin] — متجه المنشأ الذي يلقي منه الشعاع.<br />
[page:Vector3 direction] — متجه الاتجاه المعتدل الذي يعطي
اتجاه للشعاع.
</p>
<p>
يحدث الشعاع بمنشأ واتجاه جديد. يرجى ملاحظة أن هذا
الطريقة تنسخ فقط القيم من الوسائط.
</p>
<h3>[method:undefined setFromCamera]( [param:Vector2 coords], [param:Camera camera] )</h3>
<p>
[page:Vector2 coords] — إحداثيات 2D للماوس، في تعديل جهاز
إحداثيات (NDC) --- يجب أن تكون مكونات X و Y بين -1 و 1.<br />
[page:Camera camera] — الكاميرا التي يجب أن ينبثق منها الشعاع
</p>
<p>يحدث الشعاع بمنشأ واتجاه جديد.</p>
<h3>[method:this setFromXRController]( [param:WebXRController controller] )</h3>
<p>
[page:WebXRController controller] — The controller to copy the position and direction from.
</p>
<p>Updates the ray with a new origin and direction.</p>
<h3>[method:Array intersectObject]( [param:Object3D object], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Object3D object] — الكائن للتحقق من التقاطع مع
شعاع.<br />
[page:Boolean recursive] — إذا كان صحيحًا، فإنه يتحقق أيضًا من جميع الأجداد.
وإلا فإنه يتحقق فقط من التقاطع مع الكائن. الافتراضي صحيح.<br />
[page:Array optionalTarget] — (اختياري) هدف لتعيين النتيجة.
وإلا تم تجسيد جديد لـ [page:Array]. إذا تم تعيينه، يجب عليك مسح هذا
array قبل كل استدعاء (أي ، array.length = 0;).
</p>
<p>
يتحقق من جميع التقاطع بين الشعاع والكائن مع أو بدون
نسل. يتم إرجاع التقاطعات مرتبة حسب المسافة، أولًا أولًا.
يتم إرجاع مصفوفة من التقاطعات ...
</p>
<code> [ { distance, point, face, faceIndex, object }, ... ] </code>
<p>
[page:Float distance] المسافة بين مصدر الشعاع و
التقاطع<br />
[page:Vector3 point] نقطة التقاطع، في إحداثيات العالم<br />
[page:Object face] وجه التقاطع<br />
[page:Integer faceIndex] فهرس الوجه المتقاطع<br />
[page:Object3D object] الكائن المتقاطع<br />
[page:Vector2 uv] - إحداثيات U,V في نقطة التقاطع<br />
[page:Vector2 uv1] - مجموعة ثانية من إحداثيات U,V في نقطة
التقاطع<br />
[page:Vector3 normal] - متجه عادي متداخل في نقطة
التقاطع<br />
[page:Integer instanceId] رقم فهرس الحالة حيث يتقاطع الشعاع
يتقاطع InstancedMesh
</p>
<p>
`Raycaster` يفوض إلى [page:Object3D.raycast raycast] طريقة
كائن مار، عند تقييم ما إذا كان الشعاع يتقاطع مع الكائن أم لا
ليس. هذا يسمح لـ [page:Mesh meshes] بالرد بشكل مختلف على تصوير الأشعة
من [page:Line lines] و [page:Points pointclouds].
</p>
<p>
*ملاحظة* أنه بالنسبة للشبكات، يجب أن تكون الوجوه موجهة نحو مصدر
[page:.ray ray] من أجل اكتشافها؛ تقاطعات الشعاع المارة
من خلال الجزء الخلفي من وجه لن يتم اكتشافه. للتصوير بالأشعة ضد كلا
وجوه كائن، سترغب في تعيين خصائص [page:Mesh.material material]
[page:Material.side side] إلى `THREE.DoubleSide`.
</p>
<h3>[method:Array intersectObjects]( [param:Array objects], [param:Boolean recursive], [param:Array optionalTarget] )</h3>
<p>
[page:Array objects] — الكائنات للتحقق من التقاطع مع
شعاع.<br />
[page:Boolean recursive] — إذا كان صحيحًا، فإنه يتحقق أيضًا من جميع نسل
كائنات. وإلا فإنه يتحقق فقط من التقاطع مع الكائنات. افتراضي
صحيح.<br />
[page:Array optionalTarget] — (اختياري) هدف لتعيين النتيجة.
وإلا تم تجسيد جديد لـ [page:Array]. إذا تم تعيينه، يجب عليك مسح هذا
array قبل كل استدعاء (أي ، array.length = 0;).
</p>
<p>
يتحقق من جميع التقاطع بين الشعاع والكائنات مع أو بدون
نسل. يتم إرجاع التقاطعات مرتبة حسب المسافة، أولًا أولًا. التقاطات هي من نفس الشكل كما تلك المرتجعة بواسطة
[page:.intersectObject].
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,274 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
الموحدات هي متغيرات GLSL عالمية. يتم تمريرها إلى برامج الشادر.
</p>
<h2>مثال الكود</h2>
<p>
عند إعلان موحد من [page:ShaderMaterial]، يتم إعلانه بواسطة
القيمة أو بالكائن.
</p>
<code>
uniforms: {
time: { value: 1.0 },
resolution: new Uniform( new Vector2() )
};
</code>
<h2>أنواع الموحدات (Uniform types)</h2>
<p>
يجب أن يكون لكل موحد خاصية `value`. يجب أن يتوافق نوع القيمة
مع نوع المتغير الموحد في كود GLSL كما
محدد لأنواع GLSL البدائية في الجدول أدناه. موحد
الهياكل والمصفوفات مدعومة أيضًا. يجب تحديد مصفوفات GLSL من نوع بدائي
إما كمصفوفة من كائنات THREE المقابلة أو
كمصفوفة مسطحة تحتوي على بيانات جميع الكائنات. بعبارة أخرى؛
يجب عدم تمثيل المتغيرات البدائية في GLSL في المصفوفات بواسطة المصفوفات. هذه القاعدة
لا تطبق ترانزيتيفًا. يجب أن تكون مصفوفة من مصفوفات `vec2`، كل منها بطول
خمسة متجهات، يجب أن تكون مصفوفة من المصفوفات، من خمسة [page:Vector2]
كائنات أو عشرة `number`s.
</p>
<table>
<caption>
<a id="uniform-types">Uniform types</a>
</caption>
<thead>
<tr>
<th>GLSL type</th>
<th>JavaScript type</th>
</tr>
</thead>
<tbody>
<tr>
<td>int</td>
<td>[page:Number]</td>
</tr>
<tr>
<td>uint</td>
<td>[page:Number]</td>
</tr>
<tr>
<td>float</td>
<td>[page:Number]</td>
</tr>
<tr>
<td>bool</td>
<td>[page:Boolean]</td>
</tr>
<tr>
<td>bool</td>
<td>[page:Number]</td>
</tr>
<tr>
<td>vec2</td>
<td>[page:Vector2 THREE.Vector2]</td>
</tr>
<tr>
<td>vec2</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>vec2</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>vec3</td>
<td>[page:Vector3 THREE.Vector3]</td>
</tr>
<tr>
<td>vec3</td>
<td>[page:Color THREE.Color]</td>
</tr>
<tr>
<td>vec3</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>vec3</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>vec4</td>
<td>[page:Vector4 THREE.Vector4]</td>
</tr>
<tr>
<td>vec4</td>
<td>[page:Quaternion THREE.Quaternion]</td>
</tr>
<tr>
<td>vec4</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>vec4</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>mat2</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>mat2</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>mat3</td>
<td>[page:Matrix3 THREE.Matrix3]</td>
</tr>
<tr>
<td>mat3</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>mat3</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>mat4</td>
<td>[page:Matrix4 THREE.Matrix4]</td>
</tr>
<tr>
<td>mat4</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>mat4</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>ivec2, bvec2</td>
<td>[page:Float32Array Float32Array] (*)</td>
</tr>
<tr>
<td>ivec2, bvec2</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>ivec3, bvec3</td>
<td>[page:Int32Array Int32Array] (*)</td>
</tr>
<tr>
<td>ivec3, bvec3</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>ivec4, bvec4</td>
<td>[page:Int32Array Int32Array] (*)</td>
</tr>
<tr>
<td>ivec4, bvec4</td>
<td>[page:Array Array] (*)</td>
</tr>
<tr>
<td>sampler2D</td>
<td>[page:Texture THREE.Texture]</td>
</tr>
<tr>
<td>samplerCube</td>
<td>[page:CubeTexture THREE.CubeTexture]</td>
</tr>
</tbody>
</table>
<p>
(*) نفس الشيء بالنسبة لمصفوفة (الأبعاد الداخلية) من نفس نوع GLSL،
تحتوي على مكونات جميع المتجهات أو المصفوفات في المصفوفة.
</p>
<h2>الزي المنظم (Structured Uniforms)</h2>
<p>
في بعض الأحيان ترغب في تنظيم الزي كـ `structs` في كود الشيدر الخاص بك.
يجب استخدام النمط التالي حتى يتمكن `three.js` من معالجة
بيانات الزي المنظمة.
</p>
<code>
uniforms = {
data: {
value: {
position: new Vector3(),
direction: new Vector3( 0, 0, 1 )
}
}
};
</code>
يمكن تعيين هذا التعريف على كود GLSL التالي:
<code>
struct Data {
vec3 position;
vec3 direction;
};
uniform Data data;
</code>
<h2>الزي المنظم مع المصفوفات (Structured Uniforms with Arrays)</h2>
<p>
من الممكن أيضًا إدارة `structs` في المصفوفات. تبدو صياغة هذه الحالة
الاستخدام كما يلي:
</p>
<code>
const entry1 = {
position: new Vector3(),
direction: new Vector3( 0, 0, 1 )
};
const entry2 = {
position: new Vector3( 1, 1, 1 ),
direction: new Vector3( 0, 1, 0 )
};
uniforms = {
data: {
value: [ entry1, entry2 ]
}
};
</code>
يمكن تعيين هذا التعريف على كود GLSL التالي:
<code>
struct Data {
vec3 position;
vec3 direction;
};
uniform Data data[ 2 ];
</code>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Object value] )</h3>
<p>
value -- كائن يحتوي على القيمة لإعداد الزى. يجب أن يكون نوعه
واحدًا من أنواع الزى المذكورة أعلاه.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Object value]</h3>
<p>القيمة الحالية للزى.</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:Uniform clone]()</h3>
<p>
يعود بنسخة من هذا الزى. <br />
إذا كانت خاصية قيمة الزى هى [page:Object] مع طريقة clone()،
يتم استخدام هذا، وإلا يتم نسخ القيمة عن طريق التعيين. تتشارك قيم المصفوفات بين [page:Uniform]s المنسوخة.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,60 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:BufferAttribute] &rarr;
<h1>BufferAttribute Types</h1>
<p class="desc">
تتوفر في three.js تسعة أنواع من [page:BufferAttribute].
تتوافق هذه الموجودات مع [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray#Syntax Typed Arrays] في JavaScript.
</p>
<code>
THREE.Float32BufferAttribute
THREE.Float16BufferAttribute
THREE.Uint32BufferAttribute
THREE.Int32BufferAttribute
THREE.Uint16BufferAttribute
THREE.Int16BufferAttribute
THREE.Uint8ClampedBufferAttribute
THREE.Uint8BufferAttribute
THREE.Int8BufferAttribute
</code>
<h2>المنشئ (Constructor)</h2>
<p>يتم استدعاء كل من الأعلاف بنفس الطريقة.</p>
<h3>
TypedBufferAttribute( [param:Array_or_Integer array], [param:Integer itemSize], [param:Boolean normalized] )
</h3>
<p>
array -- يمكن أن يكون هذا مصفوفة مكتوبة أو غير مكتوبة، أو طول الصحيح. سيتم تحويل قيمة المصفوفة إلى النوع المحدد. إذا تم توفير طول، فسيتم إنشاء TypedArray جديد، والذي سيتم تهيئته بجميع العناصر بقيم صفر.<br /><br />
itemSize -- عدد القيم التي يجب أن ترتبط بنقطة فريدة. <br /><br />
normalized -- (اختياري) يشير إلى كيفية تطابق البيانات الأساسية في الذاكرة المؤقتة مع القيم الموجودة في رمز GLSL.
</p>
<h2>الخصائص (Properties)</h2>
<p>انظر صفحة [page:BufferAttribute] للخصائص الموروثة.</p>
<h2>الوظائف (Methods)</h2>
<p>انظر صفحة [page:BufferAttribute] للأساليب الموروثة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/core/BufferAttribute.js src/core/BufferAttribute.js]
</p>
</body>
</html>

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">فئة تحتوي على دوال مساعدة للبيانات.</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:Number toHalfFloat]( [param:Number val] )</h3>
<p>
val -- قيمة عائمة بدقة مفردة.<br /><br />
يعود بقيمة عائمة نصف الدقة من القيمة العائمة بدقة مفردة المعطاة.
</p>
<h3>[method:Number fromHalfFloat]( [param:Number val] )</h3>
<p>
val -- قيمة عائمة نصف الدقة.<br /><br />
يعود بقيمة عائمة بدقة مفردة من القيمة العائمة نصف الدقة المعطاة.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
تنفيذ لخوارزمية تثليث المضلع earcut. الكود هو نقل من [link:https://github.com/mapbox/earcut mapbox/earcut].
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:Array triangulate]( data, holeIndices, dim )</h3>
<p>
data -- مصفوفة مسطحة من إحداثيات الرأس.<br />
holeIndices -- مصفوفة من فهارس الثقوب إن وجدت.<br />
dim -- عدد الإحداثيات لكل رأس في المصفوفة الإدخال.<br /><br />
يثلث التعريف الشكل المعطى عن طريق إرجاع مصفوفة من المثلثات. يتم تعريف المثلث بثلاثة أعداد صحيحة متتالية تمثل فهارس الرأس.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">فئة تحتوي على دوال مساعدة للصور.</p>
<h2>الوظائف (Methods)</h2>
<h3>
[method:String getDataURL]( [param:HTMLCanvasElement image] |
[param:HTMLImageElement image] | [param:ImageBitmap image] )
</h3>
<p>
image -- كائن الصورة.<br /><br />
يعود بـ URI بيانات يحتوي على تمثيل للصورة المعطاة.
</p>
<h3>
[method:Object sRGBToLinear]( [param:HTMLCanvasElement image] |
[param:HTMLImageElement image] | [param:ImageBitmap image] )
</h3>
<p>
image -- كائن الصورة.<br /><br />
يحول بيانات الصورة sRGB المعطاة إلى مساحة اللون الخطية.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,111 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
تولد هذه الفئة خريطة بيئة إشعاعية محددة مسبقًا ومتدرجة (PMREM) من نسيج بيئة cubeMap. يسمح هذا بالوصول السريع إلى مستويات مختلفة من التشويش بناءً على خشونة المادة. على عكس سلسلة mipmap التقليدية ، فإنها تنخفض فقط إلى مستوى LOD_MIN (أعلاه) ، ثم تنشئ "mips" إضافية مُصفاة حتى أكثر في نفس دقة LOD_MIN ، المرتبطة بمستويات خشونة أعلى. بهذه الطريقة نحافظ على الدقة لتداخل الإضاءة المنتشرة بسلاسة مع تحديد حسابات العينات.<br /><br />
ملاحظة: يعتمد خشونة [page:MeshStandardMaterial] الأدنى على حجم النسيج المقدم. إذا كانت عملية التصيير لديك أبعادًا صغيرة أو كانت الأجزاء اللامعة لديها الكثير من التقوس ، فقد لا تزال قادرًا على التخلص من حجم نسيج أصغر.
</p>
<table>
<tr>
<th>حجم النسيج (texture size)</th>
<td>الخشونة الدنيا (minimum roughness)</td>
</tr>
<tr>
<td>16</td>
<td>0.21</td>
</tr>
<tr>
<td>32</td>
<td>0.15</td>
</tr>
<tr>
<td>64</td>
<td>0.11</td>
</tr>
<tr>
<td>128</td>
<td>0.076</td>
</tr>
<tr>
<td>256</td>
<td>0.054</td>
</tr>
<tr>
<td>512</td>
<td>0.038</td>
</tr>
<tr>
<td>1024</td>
<td>0.027</td>
</tr>
</table>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:WebGLRenderer renderer] )</h3>
<p>ينشئ هذا المنشئ [name] جديدًا.</p>
<h2>الوظائف (Methods)</h2>
<h3>
[method:WebGLRenderTarget fromScene]( [param:Scene scene], [param:Number sigma], [param:Number near], [param:Number far] )
</h3>
<p>
[page:Scene scene] - المشهد المعطى.<br />
[page:Number sigma] - (اختياري) يحدد نصف قطر التشويش بالراديان ليتم تطبيقه على المشهد قبل إنشاء PMREM. الافتراضي هو `0`.<br />
[page:Number near] - (اختياري) قيمة السطح القريب. الافتراضي هو `0.1`.<br />
[page:Number far] - (اختياري) قيمة السطح البعيد. الافتراضي هو `100`.<br /><br />
يولد PMREM من مشهد معطى ، والذي يمكن أن يكون أسرع من استخدام صورة إذا كانت عرض النطاق الترددي للشبكة منخفضة. تضمن الأسطح القريبة والبعيدة الاختيارية عرض المشهد بأكمله (يتم وضع cubeCamera في المنشأ).
</p>
<h3>
[method:WebGLRenderTarget fromEquirectangular]( [param:Texture equirectangular] )
</h3>
<p>
[page:Texture equirectangular] - نسيج equirectangular.<br /><br />
يولد PMREM من نسيج equirectangular.
</p>
<h3>
[method:WebGLRenderTarget fromCubemap]( [param:CubeTexture cubemap] )
</h3>
<p>
[page:CubeTexture cubemap] - نسيج cubemap.<br /><br />
يولد PMREM من نسيج cubemap.
</p>
<h3>[method:undefined compileCubemapShader]()</h3>
<p>
يجمع مسبقًا شادر cubemap. يمكنك الحصول على بدء تشغيل أسرع عن طريق استدعاء هذه الطريقة أثناء جلب شبكة نسيجك لزيادة التزامن.
</p>
<h3>[method:undefined compileEquirectangularShader]()</h3>
<p>
يجمع مسبقًا شادر equirectangular. يمكنك الحصول على بدء تشغيل أسرع عن طريق استدعاء هذه الطريقة أثناء جلب شبكة نسيجك لزيادة التزامن.
</p>
<h3>[method:undefined dispose]()</h3>
<p>
يحرر الموارد المتعلقة بوحدة معالجة الرسومات التي تم تخصيصها من قبل هذه الحالة. استدعِ هذه الطريقة كلما لم يعُد هذا المثيل مستخدمًا في تطبيقك.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
فئة تحتوي على دوال مساعدة للأشكال.<br /><br />
لاحظ أن هذه كلها دوال خطية لذلك يجب حسابها بشكل منفصل لمكونات x و y (و z و w إذا كانت موجودة) من متجه.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:Number area]( contour )</h3>
<p>
contour -- مضلع 2D. مصفوفة من THREE.Vector2()<br /><br />
حساب مساحة مضلع (2D) المحيط.
</p>
<h3>[method:Boolean isClockWise]( pts )</h3>
<p>
pts -- نقاط تحدد مضلع 2D<br /><br />
لاحظ أن هذه هي دالة خطية لذلك يجب حسابها بشكل منفصل لمكونات x و y من المضلع.<br /><br />
يستخدم داخليًا بواسطة [page:Path Path] و [page:ExtrudeGeometry ExtrudeGeometry] و [page:ShapeGeometry ShapeGeometry].
</p>
<h3>[method:Array triangulateShape]( contour, holes )</h3>
<p>
contour -- مضلع 2D. مصفوفة من [page:Vector2].<br />
holes -- مصفوفة تحتوي على مصفوفات من [page:Vector2]s. كل مصفوفة
تمثل تعريف ثقب واحد.<br /><br />
يستخدم داخليًا بواسطة [page:ExtrudeGeometry ExtrudeGeometry] و
[page:ShapeGeometry ShapeGeometry] لحساب الوجوه في الأشكال التي بها ثقوب.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,131 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
فئة أساسية مجردة لإنشاء كائن [name] يحتوي على طرق للإدراج. لمجموعة من [name]s انظر [page:CurvePath].
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]()</h3>
<p>ينشئ هذا المُنشئ [name] جديدًا.</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Integer arcLengthDivisions]</h3>
<p>
يحدد هذا القيمة عدد الشعبات عند حساب طول الشطر التراكمي للمنحنى عبر [page:.getLengths]. لضمان
الدقة عند استخدام طرق مثل [page:.getSpacedPoints]، يوصى بزيادة [page:.arcLengthDivisions] إذا كان المنحنى كبيرًا جدًا. الافتراضي هو 200.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:Vector getPoint]( [param:Float t], [param:Vector optionalTarget] )</h3>
<p>
[page:Float t] - موقع على المنحنى. يجب أن يكون في النطاق [0، 1].
<br />
[page:Vector optionalTarget] - (اختياري) إذا تم تحديده، سيتم نسخ النتيجة في هذا الفيكتور، وإلا سيتم إنشاء فيكتور جديد.
<br /><br />
يعود بفيكتور لموقع معين على المنحنى.
</p>
<h3>[method:Vector getPointAt]( [param:Float u], [param:Vector optionalTarget] )</h3>
<p>
[page:Float u] - موقع على المنحنى وفقًا لطول القوس. يجب أن يكون في النطاق [0، 1]. <br />
[page:Vector optionalTarget] - (اختياري) إذا تم تحديده، سيتم نسخ النتيجة في هذا الفيكتور، وإلا سيتم إنشاء فيكتور جديد.
<br /><br />
يعود بفيكتور لموقع معين على المنحنى وفقًا لطول القوس.
</p>
<h3>[method:Array getPoints]( [param:Integer divisions] )</h3>
<p>
divisions - عدد الأجزاء التي يتم تقسيم المنحنى إليها. الافتراضي هو `5`.<br /><br />
يعود بمجموعة من divisions + 1 نقطة باستخدام getPoint( t ).
</p>
<h3>[method:Array getSpacedPoints]( [param:Integer divisions] )</h3>
<p>
divisions - عدد الأجزاء التي يتم تقسيم المнحنى إليها. الافتراضي هو `5`.<br /><br />
يعود بمجموعة من divisions + 1 نقطة متساوية المسافات باستخدام getPointAt( u ).
</p>
<h3>[method:Float getLength]()</h3>
<p>احصل على إجمالي طول قوس المنحنى.</p>
<h3>[method:Array getLengths]( [param:Integer divisions] )</h3>
<p>احصل على قائمة بطول الشرائح التراكمية.</p>
<h3>[method:undefined updateArcLengths]()</h3>
<p>
تحديث ذاكرة التخزين المؤقت للمسافة الشريطية التراكمية. يجب استدعاء الطريقة
في كل مرة يتم فيها تغيير معلمات المنحنى. إذا كان المنحنى المحدث جزءًا من
منحنى مكون مثل [page:CurvePath]، يجب
استدعاء [page:.updateArcLengths]() على المنحنى المكوَّن أيضًا.
</p>
<h3>[method:Float getUtoTmapping]( [param:Float u], [param:Float distance] )</h3>
<p>
بالنظر إلى u في النطاق (0 .. 1) ، يعود [page:Float t] أيضًا في النطاق
(0 .. 1). يمكن استخدام u و t لإعطائك نقاط هي
متساوية البعد من نهايات المنحنى ، باستخدام [page:.getPoint].
</p>
<h3>[method:Vector getTangent]( [param:Float t], [param:Vector optionalTarget] )</h3>
<p>
[page:Float t] - موضع على المنحنى. يجب أن يكون في النطاق [0، 1].
<br />
[page:Vector optionalTarget] - (اختياري) إذا تم تحديده ، سيتم
نسخ النتيجة في هذا Vector ، وإلا سيتم إنشاء Vector جديد.
<br /><br />
يعود بمتجه وحدة مماس على t. إذا لم يكن المنحنى المشتق
تطبيق تفريعه المماس ، سيتم استخدام نقطتين صغيرتين delta بعيدًا للعثور على التدرج الذي يبدو أنه يعطي تقريبًا معقولًا.
</p>
<h3>[method:Vector getTangentAt]( [param:Float u], [param:Vector optionalTarget] )</h3>
<p>
[page:Float u] - موقع على المنحنى وفقًا لطول القوس. يجب أن يكون في النطاق [0، 1].
[page:Vector optionalTarget] - (اختياري) إذا تم تحديده، سيتم نسخ النتيجة في هذا الفيكتور، وإلا سيتم إنشاء فيكتور جديد.
يعود الميل في نقطة تبعد مسافة متساوية عن طرفي المنحنى من النقطة المعطاة في [page:.getTangent].
</p>
<h3>[method:Object computeFrenetFrames]( [param:Integer segments], [param:Boolean closed] )</h3>
<p>
إنشاء Frenet Frames. يتطلب تعريف منحى في فضاء 3D. مستخدم
في هَیْأَات مثل [page:TubeGeometry] أو [page:ExtrudeGeometry].
</p>
<h3>[method:Curve clone]()</h3>
<p>إنشاء نسخة من هذه الحالة.</p>
<h3>[method:this copy]( [param:Curve source] )</h3>
<p>يلصق كائن [name] آخر إلى هذه الحالة.</p>
<h3>[method:Object toJSON]()</h3>
<p>يرجع كائن JSON لتمثيل هذه الحالة.</p>
<h3>[method:this fromJSON]( [param:Object json] )</h3>
<p>يلصق البيانات من كائن JSON المعطى إلى هذه الحالة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] →
<h1>[name]</h1>
<p class="desc">
فئة أساسية مجردة تمتد [page:Curve]. مسار المنحنى هو مجرد
مصفوفة من المنحنيات المتصلة، ولكنها تحتفظ بواجهة برمجة التطبيقات الخاصة بالمنحنى.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]()</h3>
<p>لا يأخذ المُنشئ أي معلمات.</p>
<h2>الخصائص (Properties)</h2>
<p>انظر فئة [page:Curve] الأساسية للخصائص المشتركة.</p>
<h3>[property:Array curves]</h3>
<p>مصفوفة من [page:Curve Curves].</p>
<h3>[property:Boolean autoClose]</h3>
<p>ما إذا كان يجب إغلاق المسار تلقائيًا أم لا.</p>
<h2>الوظائف (Methods)</h2>
<p>انظر فئة [page:Curve] الأساسية للأساليب المشتركة.</p>
<h3>[method:undefined add]( [param:Curve curve] )</h3>
<p>إضافة منحى إلى مصفوفة [page:.curves].</p>
<h3>[method:this closePath]()</h3>
<p>يضيف [page:LineCurve lineCurve] لإغلاق المسار.</p>
<h3>[method:Array getCurveLengths]()</h3>
<p>
الحصول على قائمة بطول القطع التراكمية للمنحنيات في مصفوفة [page:.curves].
</p>
<h3>[method:Array getPoints]( [param:Integer divisions] )</h3>
<p>
divisions -- عدد قطع التقسيم إلى المنحنى. الافتراضي هو
`12`.<br /><br />
يعود بمصفوفة من النقاط التي تمثل تسلسل منحنيات. يُعرِّف معلم `division`
عدد القطع التي يتم تقسيم كل منحى إليها. ومع ذلك، لأغراض التحسين والجودة،
يعتمد دقة العينات الفعلية لكل منحى على نوعه. على سبيل المثال، بالنسبة
لـ[page:LineCurve]، يكون عدد النقاط المُستَرَجَعَ دائمًا 2 فقط.
</p>
<h3>[method:Array getSpacedPoints]( [param:Integer divisions] )</h3>
<p>
divisions -- عدد قطع التقسيم إلى المنحنى. الافتراضي هو
`40`.<br /><br />
يعود بمجموعة من divisions + 1 نقط متساوية المسافات باستخدام getPointAt( u ).
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
يحتوي [name] على دوال الشريط وبيزيه المستخدمة داخليًا من قبل
فئات المنحنى الخرسانية.
</p>
<h2>الوظائف (Methods)</h2>
<h3>[method:Float CatmullRom]( [param:Float t], [param:Float p0], [param:Float p1], [param:Float p2], [param:Float p3] )</h3>
<p>
t -- وزن التداخل.<br />
p0، p1، p2، p3 -- النقاط التي تُعرِّف منحى الشريط.<br /><br />
يُستخدم داخليًا بواسطة [page:SplineCurve SplineCurve].
</p>
<h3>[method:Float QuadraticBezier]( [param:Float t], [param:Float p0], [param:Float p1], [param:Float p2] )</h3>
<p>
t -- وزن التداخل.<br />
p0، p1، p2 -- نقاط البدء والتحكم والنهاية التي تُعرِّف المنحى.<br /><br />
يُستخدم داخليًا بواسطة [page:QuadraticBezierCurve3 QuadraticBezierCurve3] و
[page:QuadraticBezierCurve QuadraticBezierCurve].
</p>
<h3>[method:Float CubicBezier]( [param:Float t], [param:Float p0], [param:Float p1], [param:Float p2], [param:Float p3] )</h3>
<p>
t -- وزن التداخل.<br />
p0، p1، p2، p3 -- نقاط البدء والتحكم (مرتين) والنهاية التي تُعرِّف
المنحى.<br /><br />
يُستخدم داخليًا بواسطة [page:CubicBezierCurve3 CubicBezierCurve3] و
[page:CubicBezierCurve CubicBezierCurve].
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] → [page:CurvePath] →
<h1>[name]</h1>
<p class="desc">
تمثيل مسار ثنائي الأبعاد. توفر الفئة طرقًا لإنشاء مسارات
ومحيطات الأشكال ثنائية الأبعاد المشابهة لواجهة برمجة التطبيقات Canvas 2D.
</p>
<h2>مثال الكود</h2>
<code>
const path = new THREE.Path();
path.lineTo( 0, 0.8 );
path.quadraticCurveTo( 0, 1, 0.2, 1 );
path.lineTo( 1, 1 );
const points = path.getPoints();
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xffffff } );
const line = new THREE.Line( geometry, material );
scene.add( line );
</code>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Array points] )</h3>
<p>
points -- (اختياري) مصفوفة من [page:Vector2 Vector2s].<br /><br />
يُنشئ مسارًا من النقاط. يُعرِّف النقطة الأولى الإزاحة، ثُم
يتم إضافة النقاط المتتالية إلى مصفوفة [page:CurvePath.curves curves] كـ
[page:LineCurve LineCurves].<br /><br />
إذا لم يتم تحديد أي نقاط، يتم إنشاء مسار فارغ ويتم تعيين
[page:.currentPoint] على المنشأ.
</p>
<h2>الخصائص (Properties)</h2>
<p>انظر فئة [page:CurvePath] الأساسية للخصائص المشتركة.</p>
<h3>[property:Vector2 currentPoint]</h3>
<p>
الإزاحة الحالية للمسار. سيبدأ أي [page:Curve] جديد يتم إضافته
هنا.
</p>
<h2>الوظائف (Methods)</h2>
<p>انظر فئة [page:CurvePath] الأساسية للأساليب المشتركة.</p>
<h3>[method:this absarc]( [param:Float x], [param:Float y], [param:Float radius], [param:Float startAngle], [param:Float endAngle], [param:Boolean clockwise] )</h3>
<p>
x، y -- مركز القوس المطلق.<br />
radius -- نصف قطر القوس.<br />
startAngle -- زاوية البدء بالراديان.<br />
endAngle -- زاوية النهاية بالراديان.<br />
clockwise -- تدوير القوس في اتجاه عقارب الساعة. يعتمد على `false`.<br /><br />
يضيف [page:EllipseCurve EllipseCurve] مُوضَعًا مطلقًا إلى
المسار.
</p>
<h3>[method:this absellipse]( [param:Float x], [param:Float y], [param:Float xRadius], [param:Float yRadius], [param:Float startAngle], [param:Float endAngle], [param:Boolean clockwise], [param:Float rotation] )</h3>
<p>
x، y -- مركز القطع الناقص المطلق.<br />
xRadius -- نصف قطر القطع الناقص في المحور x.<br />
yRadius -- نصف قطر القطع الناقص في المحور y.<br />
startAngle -- زاوية البدء بالراديان.<br />
endAngle -- زاوية النهاية بالراديان.<br />
clockwise -- تدوير القطع الناقص في اتجاه عقارب الساعة. يعتمد على false.<br />
rotation -- زاوية دوران القطع الناقص بالراديان، عكس اتجاه عقارب
من المحور X الموجب. اختياري، يعتمد على 0.<br /><br />
يضيف [page:EllipseCurve EllipseCurve] مُوضَعًا مطلقًا إلى
المسار.
</p>
<h3>[method:this arc]( [param:Float x], [param:Float y], [param:Float radius], [param:Float startAngle], [param:Float endAngle], [param:Boolean clockwise] )</h3>
<p>
x، y -- مركز القوس المُزَوَّد من آخر استدعاء.<br />
radius -- نصف قطر القوس.<br />
startAngle -- زاوية البدء بالراديان.<br />
endAngle -- زاوية النهاية بالراديان.<br />
clockwise -- تدوير القوس في اتجاه عقارب الساعة. يعتمد على `false`.<br /><br />
يضيف [page:EllipseCurve EllipseCurve] إلى المسار، مُوضَعًا نسبيًا
إلى [page:.currentPoint].
</p>
<h3>[method:this bezierCurveTo]( [param:Float cp1X], [param:Float cp1Y], [param:Float cp2X], [param:Float cp2Y], [param:Float x], [param:Float y] )</h3>
<p>
يُنشئ منحى بيزيه من [page:.currentPoint] مع (cp1X، cp1Y)
و(cp2X، cp2Y) كنقاط تحكم ويُحدِّث [page:.currentPoint] إلى x
و y.
</p>
<h3>[method:this ellipse]( [param:Float x], [param:Float y], [param:Float xRadius], [param:Float yRadius], [param:Float startAngle], [param:Float endAngle], [param:Boolean clockwise], [param:Float rotation] )</h3>
<p>
x، y -- مركز القطع الناقص المُزَوَّد من آخر استدعاء.<br />
xRadius -- نصف قطر القطع الناقص في المحور x.<br />
yRadius -- نصف قطر القطع الناقص في المحور y.<br />
startAngle -- زاوية البدء بالراديان.<br />
endAngle -- زاوية النهاية بالراديان.<br />
clockwise -- تدوير القطع الناقص في اتجاه عقارب الساعة. يعتمد على `false`.<br />
rotation -- زاوية دوران القطع الناقص بالراديان، عكس اتجاه عقارب
من المحور X الموجب. اختياري، يعتمد على `0`.<br /><br />
يضيف [page:EllipseCurve EllipseCurve] إلى المسار، مُوضَعًا نسبيًا
إلى [page:.currentPoint].
</p>
<h3>[method:this lineTo]( [param:Float x], [param:Float y] )</h3>
<p>
يُربِط [page:LineCurve] من [page:.currentPoint] إلى x، y على
المسار.
</p>
<h3>[method:this moveTo]( [param:Float x], [param:Float y] )</h3>
<p>تحريك [page:.currentPoint] إلى x، y.</p>
<h3>[method:this quadraticCurveTo]( [param:Float cpX], [param:Float cpY], [param:Float x], [param:Float y] )</h3>
<p>
يُنشئ منحى رباعي من [page:.currentPoint] مع cpX و cpY كـ
نقطة تحكم ويُحدِّث [page:.currentPoint] إلى x و y.
</p>
<h3>[method:this setFromPoints]( [param:Array vector2s] )</h3>
<p>
points -- مصفوفة من [page:Vector2 Vector2s].<br /><br />
يتم إضافة النقاط إلى مصفوفة [page:CurvePath.curves curves] كـ
[page:LineCurve LineCurves].
</p>
<h3>[method:this splineThru] ( [param:Array points] )</h3>
<p>
points - مصفوفة من [page:Vector2 Vector2s]<br /><br />
يُربِط منحى جديدًا من نوع SplineCurve على المسار.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] → [page:CurvePath] → [page:Path] →
<h1>[name]</h1>
<p class="desc">
يعرف شكل طائرة 2d تعسفي باستخدام مسارات مع ثقوبات اختيارية. يمكن استخدامه مع [page:ExtrudeGeometry]، [page:ShapeGeometry]، للحصول على نقاط، أو للحصول على وجوه مثلثة.
</p>
<h2>مثال الكود</h2>
<code>
const heartShape = new THREE.Shape();
heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
heartShape.bezierCurveTo( - 30, 0, - 30, 35, - 30, 35 );
heartShape.bezierCurveTo( - 30, 55, - 10, 77, 25, 95 );
heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );
const extrudeSettings = {
depth: 8,
bevelEnabled: true,
bevelSegments: 2,
steps: 2,
bevelSize: 1,
bevelThickness: 1
};
const geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
const mesh = new THREE.Mesh( geometry, new THREE.MeshPhongMaterial() );
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_geometry_shapes geometry / shapes ]<br />
[example:webgl_geometry_extrude_shapes geometry / extrude / shapes ]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Array points] )</h3>
<p>
points -- (اختياري) مصفوفة من [page:Vector2 Vector2s].<br /><br />
ينشئ شكل من النقاط. يحدد النقطة الأولى الإزاحة، ثم يتم إضافة النقاط المتعاقبة إلى مصفوفة [page:CurvePath.curves curves] كـ
[page:LineCurve LineCurves].<br /><br />
إذا لم يتم تحديد أي نقاط، يتم إنشاء شكل فارغ ويتم تعيين
[page:.currentPoint] على المنشأ.
</p>
<h2>الخصائص (Properties)</h2>
<p>انظر فئة [page:Path] الأساسية للخصائص المشتركة.</p>
<h3>[property:String uuid]</h3>
<p>
[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] من
هذه الحالة. يتم تعيين هذا تلقائيًا، لذلك لا يجب تحريره.
</p>
<h3>[property:Array holes]</h3>
<p>مصفوفة من [page:Path paths] التي تحدد الثقوب في الشكل.</p>
<h2>الطرق (Methods)</h2>
<p>انظر فئة [page:Path] الأساسية للطرق المشتركة.</p>
<h3>[method:Array extractPoints]( [param:Integer divisions] )</h3>
<p>
divisions -- دقة النتيجة.<br /><br />
استدعاء [page:Curve.getPoints getPoints] على الشكل ومصفوفة [page:.holes]
، وإرجاع كائن من الشكل:
<code> { shape holes } </code>
حيث shape و holes هما مصفوفات من [page:Vector2 Vector2s].
</p>
<h3>[method:Array getPointsHoles]( [param:Integer divisions] )</h3>
<p>
divisions -- دقة النتيجة.<br /><br />
احصل على مصفوفة من [page:Vector2 Vector2s] التي تمثل الثقوب في
الشكل.
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,93 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
<h1>[name]</h1>
<p class="desc">
يتم استخدام هذه الفئة لتحويل سلسلة من الأشكال إلى مصفوفة من
[page:Path]s، على سبيل المثال شكل SVG إلى مسار.
</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( )</h3>
<p>
ينشئ ShapePath جديد. على عكس [page:Path]، لا تتم مرور أي نقاط كما
يتم تصميم ShapePath ليتم إنشاؤه بعد الإنشاء.
</p>
<h2>الخصائص (Properties)</h2>
<h3>[property:Array subPaths]</h3>
<p>مصفوفة من [page:Path]s.</p>
<h3>[property:Array currentPath]</h3>
<p>[page:Path] الحالي الذي يتم إنشاؤه.</p>
<h3>[property:Color color]</h3>
<p>[page:Color] من الشكل، بشكل افتراضي مضبوط على الأبيض (0xffffff).</p>
<h2>الطرق (Methods)</h2>
<h3>[method:this moveTo]( [param:Float x], [param:Float y] )</h3>
<p>
يبدأ [page:Path] جديد ويستدعي [page:Path.moveTo]( x, y ) على ذلك
[page:Path]. كما يشير [page:ShapePath.currentPath currentPath] إلى ذلك
[page:Path].
</p>
<h3>[method:this lineTo]( [param:Float x], [param:Float y] )</h3>
<p>
هذا ينشئ خطًا من إزاحة [page:ShapePath.currentPath currentPath]
إلى X و Y ويحدث الإزاحة إلى X و Y.
</p>
<h3>
[method:this quadraticCurveTo]( [param:Float cpX], [param:Float cpY], [param:Float x], [param:Float y] )
</h3>
<p>
هذا ينشئ منحنى ثنائي الحدود من إزاحة [page:ShapePath.currentPath currentPath]
إلى x و y مع cpX و cpY كنقطة تحكم و
يحدث إزاحة [page:ShapePath.currentPath currentPath]
إلى x و y.
</p>
<h3>
[method:this bezierCurveTo]( [param:Float cp1X], [param:Float cp1Y], [param:Float cp2X], [param:Float cp2Y], [param:Float x], [param:Float y] )
</h3>
<p>
هذا ينشئ منحنى بيزيه من إزاحة [page:ShapePath.currentPath currentPath]
إلى x و y مع cp1X و cp1Y و cp2X و cp2Y كنقاط تحكم
ويحدث إزاحة [page:ShapePath.currentPath currentPath]
إلى x و y.
</p>
<h3>[method:this splineThru] ( [param:Array points] )</h3>
<p>points - مصفوفة من [page:Vector2]s</p>
<p>
يربط [page:SplineCurve] جديد على [page:ShapePath.currentPath currentPath].
</p>
<h3>[method:Array toShapes]( [param:Boolean isCCW] )</h3>
<p>isCCW -- يغير كيفية إنشاء الأشكال الصلبة والثقوب</p>
<p>
يحول مصفوفة [page:ShapePath.subPaths subPaths] إلى مصفوفة من
الأشكال. بشكل افتراضي، يتم تعريف الأشكال الصلبة باتجاه عقارب الساعة (CW) ويتم تعريف الثقوب بعكس اتجاه عقارب الساعة (CCW). إذا تم تعيين isCCW على true، فإن هذه
مقلوب.
<br />
</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/extras/core/ShapePath.js src/extras/core/ShapePath.js]
</p>
</body>
</html>

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] &rarr; [page:EllipseCurve] &rarr;
<h1>[name]</h1>
<p class="desc">اسم مستعار لـ [page:EllipseCurve].</p>
<h2>الخصائص (Properties)</h2>
<p>راجع فئة [page:EllipseCurve] للحصول على الخصائص المشتركة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,84 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] &rarr;
<h1>[name]</h1>
<p class="desc">
قم بإنشاء منحنى شريط 3d ناعم من سلسلة من النقاط باستخدام
[link:https://en.wikipedia.org/wiki/Centripetal_Catmull-Rom_spline Catmull-Rom] خوارزمية.
</p>
<h2>مثال الكود</h2>
<code>
// إنشاء حلقة مغلقة متموجة
const curve = new THREE.CatmullRomCurve3( [
new THREE.Vector3( -10, 0, 10 ),
new THREE.Vector3( -5, 5, 5 ),
new THREE.Vector3( 0, 0, 0 ),
new THREE.Vector3( 5, -5, 5 ),
new THREE.Vector3( 10, 0, 10 )
] );
const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// إنشاء الكائن النهائي لإضافته إلى المشهد
const curveObject = new THREE.Line( geometry, material );
</code>
<h2>أمثلة (Examples)</h2>
<p>
[example:webgl_geometry_extrude_splines WebGL / geometry / extrude / splines]
</p>
<h2>المنشئ (Constructor)</h2>
<h3>
[name]( [param:Array points], [param:Boolean closed], [param:String curveType], [param:Float tension] )
</h3>
<p>
points مصفوفة من نقاط [page:Vector3]<br />
closed ما إذا كان المنحنى مغلقًا. الافتراضي هو `false`.<br />
curveType نوع المنحنى. الافتراضي هو `centripetal`.<br />
tension توتر المنحنى. الافتراضي هو `0.5`.
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على الخصائص المشتركة.</p>
<h3>[property:Array points]</h3>
<p>
مصفوفة من نقاط [page:Vector3] التي تحدد المنحنى. يحتاج على الأقل إلى دخولين.
</p>
<h3>[property:Boolean closed]</h3>
<p>سيعود المنحنى إلى نفسه عندما يكون هذا صحيحًا.</p>
<h3>[property:String curveType]</h3>
<p>القيم الممكنة هي `centripetal` و `chordal` و `catmullrom`.</p>
<h3>[property:Float tension]</h3>
<p>عندما يكون [page:.curveType] هو `catmullrom` ، يعرف توتر catmullrom.</p>
<h2>الوظائف (Methods)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على طرق مشتركة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] &rarr;
<h1>[name]</h1>
<p class="desc">
قم بإنشاء منحنى بيزيه مكعب 2d ناعم
<a
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:Bezier_curve.svg"
target="_blank"
>cubic bezier curve</a
> ، محدد بنقطة البداية ونقطة النهاية ونقطتي تحكم.
</p>
<h2>مثال الكود</h2>
<code>
const curve = new THREE.CubicBezierCurve(
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( -5, 15 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( 10, 0 )
);
const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// إنشاء الكائن النهائي لإضافته إلى المشهد
const curveObject = new THREE.Line( geometry, material );
</code>
<h2>المنشئ (Constructor)</h2>
<h3>
[name] ( [param:Vector2 v0], [param:Vector2 v1], [param:Vector2 v2],
[param:Vector2 v3] )
</h3>
<p>
[page:Vector2 v0] نقطة البداية.<br />
[page:Vector2 v1] نقطة التحكم الأولى.<br />
[page:Vector2 v2] نقطة التحكم الثانية.<br />
[page:Vector2 v3] نقطة النهاية.
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على الخصائص المشتركة.</p>
<h3>[property:Vector2 v0]</h3>
<p>نقطة البداية.</p>
<h3>[property:Vector2 v1]</h3>
<p>نقطة التحكم الأولى.</p>
<h3>[property:Vector2 v2]</h3>
<p>نقطة التحكم الثانية.</p>
<h3>[property:Vector2 v3]</h3>
<p>نقطة النهاية.</p>
<h2>الوظائف (Methods)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على طرق مشتركة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] &rarr;
<h1>[name]</h1>
<p class="desc">
قم بإنشاء منحنى بيزيه مكعب 3d ناعم
<a
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:Bezier_curve.svg"
target="_blank"
>cubic bezier curve</a
> ، محدد بنقطة البداية ونقطة النهاية ونقطتي تحكم.
</p>
<h2>مثال الكود</h2>
<code>
const curve = new THREE.CubicBezierCurve3(
new THREE.Vector3( -10, 0, 0 ),
new THREE.Vector3( -5, 15, 0 ),
new THREE.Vector3( 20, 15, 0 ),
new THREE.Vector3( 10, 0, 0 )
);
const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// إنشاء الكائن النهائي لإضافته إلى المشهد
const curveObject = new THREE.Line( geometry, material );
</code>
<h2>المنشئ (Constructor)</h2>
<h3>
[name]( [param:Vector3 v0], [param:Vector3 v1], [param:Vector3 v2],
[param:Vector3 v3] )
</h3>
<p>
[page:Vector3 v0] نقطة البداية.<br />
[page:Vector3 v1] نقطة التحكم الأولى.<br />
[page:Vector3 v2] نقطة التحكم الثانية.<br />
[page:Vector3 v3] نقطة النهاية.
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على الخصائص المشتركة.</p>
<h3>[property:Vector3 v0]</h3>
<p>نقطة البداية.</p>
<h3>[property:Vector3 v1]</h3>
<p>نقطة التحكم الأولى.</p>
<h3>[property:Vector3 v2]</h3>
<p>نقطة التحكم الثانية.</p>
<h3>[property:Vector3 v3]</h3>
<p>نقطة النهاية.</p>
<h2>الوظائف (Methods)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على طرق مشتركة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,104 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] →
<h1>[name]</h1>
<p class="desc">
ينشئ منحنى 2d على شكل بيضاوي. يؤدي تعيين [page:Number xRadius] مساويًا لـ [page:Number yRadius] إلى الحصول على دائرة.
</p>
<h2>مثال الكود</h2>
<code>
const curve = new THREE.EllipseCurve(
0, 0, // ax, aY
10, 10, // xRadius, yRadius
0, 2 * Math.PI, // aStartAngle, aEndAngle
false, // aClockwise
0 // aRotation
);
const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// إنشاء الكائن النهائي لإضافته إلى المشهد
const ellipse = new THREE.Line( geometry, material );
</code>
<h2>المنشئ (Constructor)</h2>
<h3>
[name]( [param:Float aX], [param:Float aY], [param:Float xRadius],
[param:Float yRadius], [param:Radians aStartAngle], [param:Radians aEndAngle], [param:Boolean aClockwise], [param:Radians aRotation] )
</h3>
<p>
[page:Float aX] مركز X للبيضاوي. الافتراضي هو `0`.<br />
[page:Float aY] مركز Y للبيضاوي. الافتراضي هو `0`.<br />
[page:Float xRadius] نصف قطر البيضاوي في اتجاه x.
الافتراضي هو `1`.<br />
[page:Float yRadius] نصف قطر البيضاوي في اتجاه y.
الافتراضي هو `1`.<br />
[page:Radians aStartAngle] زاوية بدء المنحنى بالراديان
بدءًا من المحور X الموجب. الافتراضي هو `0`.<br />
[page:Radians aEndAngle] زاوية نهاية المنحنى بالراديان بدءًا
من المحور X الموجب. الافتراضي هو `2 x Math.PI`.<br />
[page:Boolean aClockwise] ما إذا كان يتم رسم البيضاوي في اتجاه عقارب الساعة.
الافتراضي هو `false`.<br />
[page:Radians aRotation] زاوية دوران البيضاوي بالراديان ،
عكس اتجاه عقارب الساعة من المحور X الموجب (اختياري). الافتراضي هو `0`.<br /><br />
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على الخصائص المشتركة.</p>
<h3>[property:Float aX]</h3>
<p>مركز X للبيضاوي.</p>
<h3>[property:Float aY]</h3>
<p>مركز Y للبيضاوي.</p>
<h3>[property:Radians xRadius]</h3>
<p>نصف قطر البيضاوي في اتجاه x.</p>
<h3>[property:Radians yRadius]</h3>
<p>نصف قطر البيضاوي في اتجاه y.</p>
<h3>[property:Float aStartAngle]</h3>
<p>
زاوية بدء المنحنى بالراديان بدءًا من المنتصف الأمام.
</p>
<h3>[property:Float aEndAngle]</h3>
<p>
زاوية نهاية المنحنى بالراديان بدءًا من المنتصف الأمام.
</p>
<h3>[property:Boolean aClockwise]</h3>
<p>ما إذا كان يتم رسم البيضاوي في اتجاه عقارب الساعة.</p>
<h3>[property:Float aRotation]</h3>
<p>
زاوية دوران البيضاوي بالراديان ، عكس اتجاه عقارب الساعة من
المحور X الموجب (aRotation). الافتراضية هى `0`.
</p>
<h2>الوظائف (Methods)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على طرق مشتركة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] &rarr;
<h1>[name]</h1>
<p class="desc">منحنى يمثل قطعة خطية 2d.</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Vector2 v1], [param:Vector2 v2] )</h3>
<p>
[page:Vector2 v1] نقطة البداية.<br />
[page:Vector2 v2] - نقطة النهاية.
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على الخصائص المشتركة.</p>
<h3>[property:Vector2 v1]</h3>
<p>نقطة البداية.</p>
<h3>[property:Vector2 v2]</h3>
<p>نقطة النهاية</p>
<h2>الوظائف (Methods)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على طرق مشتركة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] &rarr;
<h1>[name]</h1>
<p class="desc">منحنى يمثل قطعة خطية 3d.</p>
<h2>المنشئ (Constructor)</h2>
<h3>[name]( [param:Vector3 v1], [param:Vector3 v2] )</h3>
<p>
[page:Vector3 v1] نقطة البداية.<br />
[page:Vector3 v2] - نقطة النهاية.
</p>
<h2>الخصائص (Properties)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على الخصائص المشتركة.</p>
<h3>[property:Vector3 v1]</h3>
<p>نقطة البداية.</p>
<h3>[property:Vector3 v2]</h3>
<p>نقطة النهاية.</p>
<h2>الوظائف (Methods)</h2>
<p>راجع فئة [page:Curve] الأساسية للحصول على طرق مشتركة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="ar">
<head>
<meta charset="utf-8" />
<base href="../../../../" />
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body class="rtl">
[page:Curve] &rarr;
<h1>[name]</h1>
<p class="desc">
قم بإنشاء منحنى بيزيه ثنائي الأبعاد ناعم
<a
href="http://en.wikipedia.org/wiki/B%C3%A9zier_curve#mediaviewer/File:B%C3%A9zier_2_big.gif"
target="_blank"
>رباعي</a
>، محدد بنقطة البداية ونقطة النهاية ونقطة تحكم واحدة.
</p>
<h2>مثال الكود</h2>
<code>
const curve = new THREE.QuadraticBezierCurve(
new THREE.Vector2( -10, 0 ),
new THREE.Vector2( 20, 15 ),
new THREE.Vector2( 10, 0 )
);
const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
// إنشاء الكائن النهائي لإضافته إلى المشهد
const curveObject = new THREE.Line( geometry, material );
</code>
<h2>المنشئ (Constructor)</h2>
<h3>
[name]( [param:Vector2 v0], [param:Vector2 v1], [param:Vector2 v2] )
</h3>
<p>
[page:Vector2 v0] نقطة البداية.<br />
[page:Vector2 v1] نقطة التحكم.<br />
[page:Vector2 v2] نقطة النهاية.
</p>
<h2>الخصائص (Properties)</h2>
<p>انظر إلى قاعدة [page:Curve] للخصائص المشتركة.</p>
<h3>[property:Vector2 v0]</h3>
<p>نقطة البداية.</p>
<h3>[property:Vector2 v1]</h3>
<p>نقطة التحكم.</p>
<h3>[property:Vector2 v2]</h3>
<p>نقطة النهاية.</p>
<h2>الخصائص (Properties)</h2>
<p>انظر إلى الفئة الأساسية [page:Curve] للحصول على الطرق المشتركة.</p>
<h2>المصدر (Source)</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
</p>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show More

Loading…
Cancel
Save