Skip to content

Web-ECS/do-three

Repository files navigation

Data-oriented Three.js Integrations

A library to help integrate Three.js with data-oriented design structures.

Features

Supported Three.js data structures so far:

Vector2 Quaternion
Vector3 Matrix3
Vector4 Matrix4

Structure of Arrays Example

import assert from 'assert' import { proxifyVector3 } from '@webecs/dod-three' import * as THREE from 'three' const n = 100 const PositionSoA = { x: Float32Array(n), y: Float32Array(n), z: Float32Array(n), } const id = 0 const mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), new THREE.MeshBasicMaterial( { wireframe: true } ) ) proxifyVector3(mesh.position, PositionSoA, id) mesh.position.x = 1 mesh.position.y = 2 mesh.position.z = 3 assert(PositionSoA.x[id] === 1) // true assert(PositionSoA.y[id] === 2) // true assert(PositionSoA.z[id] === 3) // true PositionSoA.x[id] = 4 PositionSoA.y[id] = 5 PositionSoA.z[id] = 6 assert(mesh.position.x === 4) // true assert(mesh.position.y === 5) // true assert(mesh.position.z === 6) // true

Array of Arrays Example

import assert from 'assert' import { proxifyVector3 } from '@webecs/dod-three' import * as THREE from 'three' const n = 100 const stride = 3 const PositionAoA = Array(n) .fill(new Float32Array(n*stride)) .map((store,i) => store.subarray(i*stride, i*stride+stride)) const id = 0 const mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), new THREE.MeshBasicMaterial( { wireframe: true } ) ) proxifyVector3(mesh.position, PositionAoA[id]) mesh.position.x = 1 mesh.position.y = 2 mesh.position.z = 3 assert(PositionAoA[id][0] === 1) // true assert(PositionAoA[id][1] === 2) // true assert(PositionAoA[id][2] === 3) // true PositionAoA[id][0] = 4 PositionAoA[id][1] = 5 PositionAoA[id][2] = 6 assert(mesh.position.x === 4) // true assert(mesh.position.y === 5) // true assert(mesh.position.z === 6) // true

Releases

No releases published

Packages

No packages published