Dioxus Three v0.0.2

A Three.js 3D model viewer component for Dioxus applications with support for custom GLSL shaders.

Works on Desktop (WebView), Web (WASM/canvas), and Mobile platforms.

📚 Full Documentation | 🎮 Demo | 🐙 GitHub

Features

• 🖥️ Multi-Platform - Desktop (Windows/macOS/Linux), Web (WASM), Mobile (iOS/Android)
• 🎮 Interactive 3D - Render and control 3D models with ease
• 📁 Multiple Formats - Supports OBJ, FBX, GLTF, GLB, STL, PLY, DAE
• 📦 Multi-Model - Load and display multiple models simultaneously
• 🎨 Custom Shaders - Built-in shader presets + custom GLSL support
• 🌊 Shader Effects - Gradient, Water, Hologram, Toon, Heatmap
• 📷 Camera Control - Adjustable camera position and target
• 🔄 Auto-rotation - Built-in auto-rotation with speed control
• 📐 Auto-center & Auto-scale - Automatically fit models to viewport
• 🔲 Wireframe Mode - Toggle wireframe visualization

Supported Formats

Installation

Add to your Cargo.toml:

[dependencies]
dioxus-three = "0.0.2"
dioxus = { version = "0.5", features = ["desktop"] }

Usage

Basic Cube

use dioxus::prelude::*;
use dioxus_three::ThreeView;

fn app() -> Element {
    rsx! {
        ThreeView {
            auto_rotate: true,
            scale: 1.5,
            color: "#00ff00".to_string(),
        }
    }
}

Load a 3D Model

use dioxus::prelude::*;
use dioxus_three::{ThreeView, ModelFormat};

fn app() -> Element {
    rsx! {
        ThreeView {
            model_url: Some("https://example.com/model.obj".to_string()),
            format: ModelFormat::Obj,
            auto_center: true,
            auto_scale: true,
            show_grid: true,
        }
    }
}

Multiple Models

use dioxus::prelude::*;
use dioxus_three::{ThreeView, ModelConfig, ModelFormat};

fn app() -> Element {
    let models = vec![
        ModelConfig::new("", ModelFormat::Cube)
            .with_position(0.0, 0.0, 0.0)
            .with_color("#ff6b6b"),
        ModelConfig::new("https://example.com/helmet.gltf", ModelFormat::Gltf)
            .with_position(2.0, 0.0, 0.0)
            .with_scale(0.5),
    ];
    
    rsx! {
        ThreeView {
            models: models,
            auto_rotate: true,
        }
    }
}

Using Shader Effects

use dioxus::prelude::*;
use dioxus_three::{ThreeView, ShaderPreset};

fn app() -> Element {
    rsx! {
        // Animated gradient
        ThreeView {
            shader: ShaderPreset::Gradient,
            auto_rotate: false, // Shader has its own animation
        }
    }
}

Custom Shaders

use dioxus::prelude::*;
use dioxus_three::{ThreeView, ShaderConfig};
use std::collections::HashMap;

fn app() -> Element {
    let mut uniforms = HashMap::new();
    uniforms.insert("u_intensity".to_string(), 0.5);
    
    let shader_config = ShaderConfig {
        vertex_shader: Some(r#"
            varying vec2 vUv;
            void main() {
                vUv = uv;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        "#.to_string()),
        fragment_shader: Some(r#"
            uniform vec3 u_color;
            uniform float u_intensity;
            varying vec2 vUv;
            
            void main() {
                vec3 color = u_color * (0.5 + sin(vUv.x * 10.0) * u_intensity);
                gl_FragColor = vec4(color, 1.0);
            }
        "#.to_string()),
        uniforms,
        animated: false,
    };
    
    rsx! {
        ThreeView {
            shader: ShaderPreset::Custom(shader_config),
            color: "#ff0000".to_string(),
        }
    }
}

Platform-Specific Usage

Desktop

dioxus_desktop::launch(app);

Web (WASM)

// Build with: dx build --platform web
dioxus_web::launch(app);

Mobile

// Build with: dx build --platform [android|ios]
dioxus_mobile::launch(app, vec![], Config::default());

Shader Presets

Props

Model Loading

Transform

Appearance

Camera

Animation

Styling

Examples

Desktop Demo

cd examples/demo
cargo run

Web Demo (WASM)

cd examples/web-demo

# Install Dioxus CLI if needed: cargo install dioxus-cli
dx serve --platform web

Mobile Demo (iOS/Android)

cd examples/mobile-demo

# Android
dx build --platform android

# iOS (macOS only)
dx build --platform ios

See examples/README.md for more details.

All demos include:

• Format selector (OBJ, FBX, GLTF, etc.)
• Model URL input
• Preset models
• Shader effects selector
• Multi-model support
• Transform controls
• Appearance controls
• Camera controls

What are Shaders?

Shaders are small programs that run on the GPU to control how 3D objects are rendered:

• Vertex Shaders - Transform geometry vertices (position, deformation)
• Fragment Shaders - Determine pixel colors (lighting, textures, effects)

Example Shader Effects

Animated Gradient:

// Fragment shader
uniform float u_time;
varying vec3 vPosition;

void main() {
    float r = sin(vPosition.x + u_time) * 0.5 + 0.5;
    float g = sin(vPosition.y + u_time * 1.5) * 0.5 + 0.5;
    float b = sin(vPosition.z + u_time * 0.5) * 0.5 + 0.5;
    gl_FragColor = vec4(r, g, b, 1.0);
}

Water Waves:

// Vertex shader
uniform float u_time;
varying float vElevation;

void main() {
    vec3 pos = position;
    float elevation = sin(pos.x * 4.0 + u_time) * 0.1;
    elevation += sin(pos.y * 3.0 + u_time * 0.8) * 0.1;
    pos.z += elevation;
    vElevation = elevation;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
}

Loading Local Files

To load local files, serve them via HTTP:

# Serve current directory on port 8080
python3 -m http.server 8080

Then use http://localhost:8080/model.obj as the URL.

Requirements

• Dioxus 0.5+
• Internet connection (for Three.js CDN and external models)

Changelog

See CHANGELOG.md for version history.

Author

Esteban Puello - eftech93@gmail.com

• GitHub: @eftech93
• Repository: github.com/eftech93/dioxus-three

License

MIT OR Apache-2.0