3D Viewer — @glyx-dev/three

An interactive 3D scene built with @glyx-dev/three on the GPU Canvas3D. Demonstrates the canvas3d runtime path (a build feature, enabled for this app).

Mode: Native dev (cargo run via glyx dev). Demonstrates: Canvas3D, @glyx-dev/three (Scene, PerspectiveCamera, AmbientLight, DirectionalLight, PointLight, Mesh), @glyx-dev/design

Primitives only (box / sphere / plane) — no GLTF asset required.

Run it

cd examples/model-viewer
glyx dev

This app enables the canvas3d feature in its Cargo.toml:

[features]
default = ["dev"]
dev = ["glyx-core/dev", "glyx-core/canvas3d"]

Features

Switch geometry: box / sphere / plane
Auto-rotate toggle (driven by a setInterval updating the mesh rotation)
Adjustable ambient, directional, and point light intensity
Pick the mesh color
Reset view button

Key code

import { Canvas3D } from '@glyx-dev/react'
import { Scene, PerspectiveCamera, AmbientLight, DirectionalLight, PointLight, Mesh } from '@glyx-dev/three'
 
const ref = useRef(null)
 
<Canvas3D ref={ref} style={{ flex: 1, backgroundColor: '#0b0d12' }}>
  <Scene canvasRef={ref} background={[0.04, 0.05, 0.07, 1]}>
    <PerspectiveCamera position={[0, 1.5, 4.5]} target={[0, 0, 0]} fov={55} />
    <AmbientLight intensity={ambient} />
    <DirectionalLight direction={[-0.5, -1, -0.5]} intensity={dir} />
    {point > 0 && <PointLight position={[2, 2, 2]} intensity={point} />}
    <Mesh geometry={geom} color={color} rotation={[0, angle, 0]} scale={1} />
  </Scene>
</Canvas3D>

glyx.config.json

{
  "window": { "title": "3D Viewer", "width": 1000, "height": 700, "renderMode": "skia" },
  "capabilities": {},
  "dev": { "entry": "js/app.jsx", "output": "js/dist/app.js", "watch": ["js"] }
}

Source

Browse the full source on GitHub: glyx-dev/glyx · examples/model-viewer (opens in a new tab)

Files Log Viewer