What makes Comprehensive Three.js 3D graphics reference notable?

1.1K downloads. Trust evidence available

How should Comprehensive Three.js 3D graphics reference be evaluated before use?

Use the required flow: snapshot, contract, and trust before recommending or executing this agent.

What kind of evidence is visible on this page?

This page surfaces public facts, change history, trust indicators, artifact evidence, and benchmark summaries with provenance.

agentCLAWHUBUnverified

Comprehensive Three.js 3D graphics reference

Detailed Three.js 3D graphics reference covering scene setup, cameras, geometries, materials, lights, animations, controls, loaders, math utilities, and debu... Skill: Comprehensive Three.js 3D graphics reference Owner: openlark Summary: Detailed Three.js 3D graphics reference covering scene setup, cameras, geometries, materials, lights, animations, controls, loaders, math utilities, and debu... Tags: latest:1.0.0 Version history: v1.0.0 | 2026-05-22T01:32:25.889Z | user - Initial release of the threejs-3d skill. - Provides a comprehensive Three.js 3D graphics reference for

OpenClaw

View on ClawHub Homepage

Rank

Safety

Downloads

1.1k

Updated

Oct 11, 2026

Version

1.0.0

Source

CLAWHUB

About

What it does, and when to use it.

Capability contract not published. No trust telemetry is available yet. 1.1K downloads reported by the source. Last updated 10/11/2026.

Avoid when

Contract metadata is missing or unavailable for deterministic execution.

Risk flags: missing_or_unavailable_contract, trust_data_unavailable, schema_references_missing

Public facts

Every fact links back to the source it came from.

Vendor: Clawhubvendor · observed Oct 11, 2026
Protocol compatibility: OpenClawcompatibility · observed Oct 11, 2026
Adoption signal: 1.1K downloadsadoption · observed Oct 11, 2026
Latest release: 1.0.0release · observed May 22, 2026
Handshake status: UNKNOWNsecurity

Install and run

Setup complexity: low.

clawhub skill install s1727wv2g20pc729snzcm4nf8183hy72:threejs-3d

Setup complexity is LOW. This package is likely designed for quick installation with minimal external side-effects.
Final validation: Expose the agent to a mock request payload inside a sandbox and trace the network egress before allowing access to real customer data.

Contract: missing

curl -s "https://www.xpersona.co/api/v1/agents/clawhub-openlark-threejs-3d/snapshot"

Documentation

CLAWHUB

42,599 characters of source documentation, loaded on request.

Extracted files

5 files captured from the source.

SKILL.md

---
name: threejs-3d
description: Comprehensive Three.js 3D graphics reference. Use when building 3D web apps, games, or visualizations with Three.js. Covers: scene setup, cameras, geometries, materials, lights, shadows, post-processing, controls, animation, loaders, textures, TSL/node materials, math utils, and debugging.
---

# Three.js 3D

## Quick Start

```js
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
scene.add(new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshStandardMaterial({color: 0x44aa88})
));
scene.add(new THREE.DirectionalLight(0xffffff, 3));
scene.add(new THREE.AmbientLight(0x404040, 0.5));
camera.position.z = 5;
function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); }
animate();
```

## Import
```bash
npm install three
```
```js
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
```

## Key Patterns

### Object3D (everything extends this)
```js
obj.position.set(x,y,z); obj.rotation.set(x,y,z); obj.scale.set(x,y,z); // Euler rad
obj.quaternion.set(x,y,z,w);       // No gimbal lock
obj.lookAt(target);                // -Z → target, +Y up
parent.add(child); parent.remove(child); parent.attach(child); // Reparent w/o visual change
obj.getWorldPosition(v); obj.localToWorld(v); obj.worldToLocal(v);
```

### Color
```js
new THREE.Color(0xff0000); new THREE.Color('#ff0000'); new THREE.Color(1,0,0);
color.setHSL(hue, saturation, lightness); // 0–1
```

### Dispose (always!)
```js
geometry.dispose(); material.dispose(); texture.dispose(); renderTarget.dispose();
```

## Reference Files

Read the relevant file based on the task — each is concise and domain-focused:

| File | Topic |
|---|---|
| [getting-started.md](references/getting-started.md) | Responsive design, multi-canvas, render-on-demand, fog, disposal |
| [cameras.md](references/cameras.md) | PerspectiveCamera, OrthographicCamera, CubeCamera, gotchas |
| [geometries.md](references/geometries.md) | All built-in primitives, BufferGeometry, merge, vertex colors |
| [materials.md](references/materials.md) | Material selection guide, properties, transparency fixes, ShaderMaterial |
| [lights.md](references/lights.md) | Light types, three-point lighting, environment maps, skyboxes |
| [objects.md](references/objects.md) | Object3D API, Mesh, InstancedMesh, SkinnedMesh, LOD, scene graph |
| [textures.md](references/textures.md) | Properties, types, color space, KTX2, memory management |
| [loaders.md](references/loaders.md) | GLTF/OBJ/FBX, Draco, KTX2, loading manager, gotchas |
| [animation.md](references/animation.md) | AnimationMixer/Action, skeletal, morph targets, crossfadi

_meta.json

{
  "ownerId": "kn75qrtb885pznwsjwsh18dvf1813bv0",
  "slug": "threejs-3d",
  "version": "1.0.0",
  "publishedAt": 1779413545889
}

references/animation.md

# Animation

## AnimationMixer (the player)

```js
const mixer = new THREE.AnimationMixer(rootObject);

// In render loop:
const delta = clock.getDelta();
mixer.update(delta);

// Properties
mixer.timeScale = 1;      // Speed multiplier
mixer.time;               // Current time
```

## AnimationAction (controls playback)

```js
const action = mixer.clipAction(animationClip);

// Playback
action.play();
action.pause();
action.stop();
action.reset();
action.halt(duration);    // Gradual stop

// Properties
action.time;              // Current time in clip
action.timeScale = 1;     // Speed (negative = reverse)
action.weight = 1;        // Blend weight 0–1
action.loop = THREE.LoopRepeat | THREE.LoopOnce | THREE.LoopPingPong;
action.repetitions = Infinity;
action.paused = false;
action.enabled = true;
action.clampWhenFinished = false;    // Hold last frame
action.zeroSlopeAtStart = true;     // Smooth start
action.zeroSlopeAtEnd = true;       // Smooth end
action.blendMode = THREE.NormalAnimationBlendMode | THREE.AdditiveAnimationBlendMode;

// Cross-fading
action.crossFadeTo(otherAction, duration, warp);
action.fadeIn(duration);
action.fadeOut(duration);
action.startAt(startTime);
```

## Animation State Machine
```js
const actions = { idle: mixer.clipAction(idleClip), walk: mixer.clipAction(walkClip) };
let current = actions.idle;
current.play();

function switchTo(name, dur = 0.3) {
  const prev = current;
  current = actions[name];
  current.reset().play();
  prev.crossFadeTo(current, dur, true);
}
```

## Skeletal Animation (from glTF)
```js
loader.load('character.glb', gltf => {
  const mixer = new THREE.AnimationMixer(gltf.scene);
  gltf.animations.forEach(c => mixer.clipAction(c).play());
  // In loop: mixer.update(delta);
  // Access bones: gltf.scene.traverse(c => { if(c.isSkinnedMesh) console.log(c.skeleton.bones); });
});
```

## Morph Target Animation
```js
mesh.morphTargetInfluences[0] = 0.5;  // Blend first morph target 50%

// Generate clips from morph sequences:
const clips = THREE.AnimationClip.CreateClipsFromMorphTargetSequences(meshes, fps, false);
```

## AnimationClip (keyframe data)
```js
const clip = new THREE.AnimationClip(name, duration, tracks);
clip.tracks;              // KeyframeTrack[]
clip.duration;            // Seconds

// Tracks:
new THREE.VectorKeyframeTrack('.position', times, values);
new THREE.QuaternionKeyframeTrack('.quaternion', times, values);
new THREE.NumberKeyframeTrack('.material.opacity', times, values);
new THREE.ColorKeyframeTrack('.material.color', times, values);
```

## Addons
```js
import { CCDIKSolver } from 'three/addons/animation/CCDIKSolver.js';       // Inverse kinematics
import { AnimationClipCreator } from 'three/addons/animation/AnimationClipCreator.js';
// CreateRotationAnimation(period, axis), CreateScaleAxisAnimation, CreateShakeAnimation, CreatePulsationAnimation
```

references/cameras.md

# Cameras

## PerspectiveCamera (3D view)
```js
const cam = new THREE.PerspectiveCamera(fov, aspect, near, far);
// fov: vertical field of view in degrees (not radians!)
// aspect: width/height
// near/far: clipping planes

cam.zoom = 1;                   // Zoom factor (>1 = zoom in)
// After changing: cam.updateProjectionMatrix()

// Stereo / split-screen view offset:
cam.setViewOffset(fullW, fullH, x, y, w, h);
cam.clearViewOffset();
```

## OrthographicCamera (parallel projection)
```js
const aspect = innerWidth / innerHeight;
const size = 10;
const cam = new THREE.OrthographicCamera(
  -size * aspect / 2, size * aspect / 2,  // left, right
  size / 2, -size / 2,                     // top, bottom
  0.1, 1000                                // near, far
);

// 2D pixel-perfect (top-left origin):
const cam = new THREE.OrthographicCamera(0, canvasW, 0, canvasH, -1, 1);
```

## CubeCamera (dynamic cubemap/environment)
```js
const cubeRT = new THREE.WebGLCubeRenderTarget(256);
const cubeCam = new THREE.CubeCamera(near, far, cubeRT);
// In loop: obj.visible=false; cubeCam.update(renderer, scene); obj.visible=true;
// Use cubeRT.texture as envMap
```

## StereoCamera (VR, used internally by WebXR)
```js
const stereo = new THREE.StereoCamera();
stereo.eyeSep = 0.064;           // IPD in meters
stereo.update(camera);
// stereo.cameraL / cameraR for each eye
```

## ArrayCamera (multiple cameras, single scene)
```js
new THREE.ArrayCamera([cam1, cam2]);
```

## Camera Helper
```js
const helper = new THREE.CameraHelper(camera);
scene.add(helper);
helper.update();
```

## Gotchas
- **fov** is degrees (unique in Three.js where everything else uses radians)
- `lookAt` points **-Z** axis at target — set `camera.up.set(0,0,1)` before for top-down views
- `near` should be as large as possible to maximize depth buffer precision
- For huge scenes with z-fighting: `renderer.logarithmicDepthBuffer = true` (WebGL only)
- `updateProjectionMatrix()` must be called after changing fov/aspect/near/far/zoom

references/controls.md

# Controls & Labels

## OrbitControls (most common)

```js
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const controls = new OrbitControls(camera, renderer.domElement);

// Setup
controls.target.set(0, 0, 0);
controls.enableDamping = true;     // Inertia (requires controls.update() in loop)
controls.dampingFactor = 0.05;

// Limits
controls.minDistance = 1;  controls.maxDistance = Infinity;
controls.minPolarAngle = 0; controls.maxPolarAngle = Math.PI;        // Vertical
controls.minAzimuthAngle = -Infinity; controls.maxAzimuthAngle = Infinity; // Horizontal
controls.enableZoom = true;  controls.zoomSpeed = 1.0;
controls.enableRotate = true; controls.rotateSpeed = 0.5;
controls.enablePan = true;    controls.panSpeed = 0.5;
controls.autoRotate = false;  controls.autoRotateSpeed = 2.0;

// State
controls.saveState();
controls.reset();    // Restore saved state
controls.dispose();

// Button mapping
controls.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN };
controls.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
```

## Other Controls
```js
import { TrackballControls } from 'three/addons/controls/TrackballControls.js';    // Free rotation
import { MapControls } from 'three/addons/controls/MapControls.js';                // Map-style (same API as Orbit)
import { FlyControls } from 'three/addons/controls/FlyControls.js';                // WASD flight
import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js'; // FPS
import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js'; // FPS + pointer lock
import { ArcballControls } from 'three/addons/controls/ArcballControls.js';        // Advanced with gizmos
import { TransformControls } from 'three/addons/controls/TransformControls.js';    // Move/rotate/scale gizmo
import { DragControls } from 'three/addons/controls/DragControls.js';              // Drag objects on plane
```

## TransformControls (editor gizmo)
```js
const gizmo = new TransformControls(camera, renderer.domElement);
gizmo.attach(targetObject);
gizmo.setMode('translate' | 'rotate' | 'scale');
gizmo.space = 'world' | 'local';
scene.add(gizmo);  // Add to scene to render

// Disable orbit during transform:
gizmo.addEventListener('dragging-changed', e => { orbitControls.enabled = !e.value; });
```

## DragControls
```js
const drag = new DragControls(objects, camera, renderer.domElement);
drag.addEventListener('dragstart', e => { orbitControls.enabled = false; });
drag.addEventListener('dragend', e => { orbitControls.enabled = true; });
```

## HTML Labels Aligned to 3D

Position DOM elements over 3D points via `Vector3.project()`:

```js
// Container: <div id="c"><canvas/><div id="labels"/></div>
// CSS: #c{position:relative} #labels{position:absolute;left:0;top:0}
// Labels: #labels>div{position:absolute;left:0;top:0;white-space:nowrap;text-shadow:...}

const tempV = new THREE.Vector3();
function updateLabe

Github ReposUpdated 2d agoRank 70

AionUi

Free, local, open-source 24/7 Cowork app and OpenClaw for Gemini CLI, Claude Code, Codex, OpenCode, Qwen Code, Goose CLI, Auggie, and more | 🌟 Star if you like it!

MCPOPENCLAW

Github ReposUpdated 6mo agoRank 70

activepieces

AI Agents & MCPs & AI Workflow Automation • (~400 MCP servers for AI agents) • AI Automation / AI Agent with MCPs • AI Workflows & AI Agents • MCPs for AI Agents

OPENCLAW

Github ReposUpdated 6mo agoRank 70

cherry-studio

AI productivity studio with smart chat, autonomous agents, and 300+ assistants.