Spline

https://docs.spline.design/
Admin
Spline is a web-based collaborative 3D design platform for creating production-ready interactive...
Tokens:41,254
Snippets:795
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Initialize SplineView in Compose

Source: https://docs.spline.design/exporting-your-scene/android/code-api-for-kotlin

Basic setup for embedding a Spline scene within a Jetpack Compose AndroidView.

```kotlin
@Composable
fun SplineScene() {
    AndroidView(
        factory = { ctx ->
            val view = SplineView(context = ctx)
            view.loadResource(R.raw.scene)
            view
        },
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    )
}
```

--------------------------------

### Integrate Spline Scene in SwiftUI

Source: https://docs.spline.design/exporting-your-scene/apple-platform/native-3d-embeds-for-i-os

Use the SplineView component to render 3D content. The examples demonstrate loading scenes from either a cloud URL or a local bundle file.

```swift
import SplineRuntime
import SwiftUI

struct ContentView: View {
	var body: some View {
		// // fetching from local
		// let url = Bundle.main.url(forResource: "scene", withExtension: "splineswift")!

		// fetching from cloud
		let url = URL(string: "https://build.spline.design/nDkzGcy787CUJYaEI-gy/scene.splineswift")!

		SplineView(sceneFileURL: url).ignoresSafeArea(.all)
	}
}
```

```swift
import SplineRuntime
import SwiftUI

struct ContentView: View {
	var body: some View {
		// fetching from local
		let url = Bundle.main.url(forResource: "scene", withExtension: "splineswift")!

		// fetching from cloud
		// let url = URL(string: "https://build.spline.design/nDkzGcy787CUJYaEI-gy/scene.splineswift")!

		SplineView(sceneFileURL: url).ignoresSafeArea(.all)
	}
}
```

--------------------------------

### Embed a Spline scene in SwiftUI

Source: https://docs.spline.design/exporting-your-scene/apple-platform/code-api-for-swift-ui

Initial setup to display a 3D scene using the SplineView component.

```swift
struct ContentView: View {
    var body: some View {
        let url = URL(string: "https://build.spline.design/4-2CGowqS9z7MGA62D-B/scene.splineswift")!

        SplineView(sceneFileURL: url)
    }
}
```

--------------------------------

### Initialize SplineController for SwiftUI

Source: https://docs.spline.design/exporting-your-scene/apple-platform/code-api-for-swift-ui

Create and pass a SplineController to the SplineView to enable programmatic interaction with the scene.

```swift
struct ContentView: View {
		private var controller = SplineController()
		
    var body: some View {
        let url = URL(string: "https://build.spline.design/4-2CGowqS9z7MGA62D-B/scene.splineswift")!

        SplineView(sceneFileURL: url, controller: controller)
    }
}
```

--------------------------------

### Import SplineView Class

Source: https://docs.spline.design/exporting-your-scene/android/native-3d-embeds-for-android

Add this import statement to the top of any file where the SplineView component is utilized.

```kotlin
import design.spline.runtime.SplineView
```

--------------------------------

### SplineView Loading Methods

Source: https://docs.spline.design/exporting-your-scene/android/code-api-for-kotlin

Methods to load 3D content into the SplineView. Use the callback to ensure the scene is ready before interacting with the API.

```APIDOC
### loadResource(resourceId: Int, onComplete: () -> Unit)
Loads a scene from a local Android resource ID. The onComplete callback is executed once the scene is fully loaded.

### loadUrl(url: String, onComplete: () -> Unit)
Loads a scene from a remote URL. The onComplete callback is executed once the scene is fully loaded.
```

--------------------------------

### Embed Spline Scene from Cloud

Source: https://docs.spline.design/exporting-your-scene/android/native-3d-embeds-for-android

Implementation for loading a Spline scene directly from a cloud URL using SplineView.

```kotlin
import design.spline.runtime.SplineView

@Composable
fun MyView() {
    AndroidView(
        factory = { ctx ->
            SplineView(context).apply {
				// fetching from cloud
                loadUrl("https://build.spline.design/nDkzGcy787CUJYaEI-gy/scene.splinecontent")

				// fetching from local
				// loadResource(R.raw.scene)
            }
        }
    )
}
```

--------------------------------

### Embed Spline Scene Locally

Source: https://docs.spline.design/exporting-your-scene/android/native-3d-embeds-for-android

Implementation for loading a local .splinecontent file stored in the res/raw directory.

```kotlin
import design.spline.runtime.SplineView

@Composable
fun MyView() {
    AndroidView(
        factory = { ctx ->
            SplineView(context).apply {
				// fetching from cloud
	      // loadUrl("https://build.spline.design/nDkzGcy787CUJYaEI-gy/scene.splinecontent")

				// fetching from local
				loadResource(R.raw.scene)
            }
        }
    )
}
```

--------------------------------

### SplineView API Methods

Source: https://docs.spline.design/exporting-your-scene/android/code-api-for-kotlin

Methods available on the SplineView instance to control scene behavior, variables, and playback.

```APIDOC
## SplineView Methods

### emitEvent(eventName: SplineEventName, payload: String)
Triggers a specific event within the Spline scene.

### loadResource(resourceId: Int, callback: () -> Unit)
Loads a Spline scene resource and executes a callback upon completion.

### hasVariable(name: String): Boolean
Checks if a variable exists in the loaded scene.

### setNumberVariable(name: String, value: Float)
Updates a numeric variable in the scene.

### setBooleanVariable(name: String, value: Boolean)
Updates a boolean variable in the scene.

### setStringVariable(name: String, value: String)
Updates a string variable in the scene.

### getNumberVariable(name: String): Float
Retrieves the current value of a numeric variable.

### getBooleanVariable(name: String): Boolean
Retrieves the current value of a boolean variable.

### getStringVariable(name: String): String
Retrieves the current value of a string variable.

### play()
Resumes scene rendering and animations.

### stop()
Pauses scene rendering and animations.

### setZoom(zoom: Float)
Sets the camera zoom level (1.0 is default).

### setBackgroundColor(color: Color)
Sets the background color of the scene using RGBA values.
```

--------------------------------

### Access API via Load Callback

Source: https://docs.spline.design/exporting-your-scene/android/code-api-for-kotlin

Use the loadResource callback to ensure the scene is fully loaded before interacting with the API.

```kotlin
@Composable
fun SplineScene() {
    AndroidView(
        factory = { ctx ->
            val view = SplineView(context = ctx)
            view.loadResource(R.raw.scene) {
                // Scene is loaded, you can now use the API
                val obj = view.findObjectByName("Cube")
                Log.d("Spline", "Found object: ${obj?.name}")
            }
            view
        },
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    )
}
```

--------------------------------

### Configure Android Manifest Permissions

Source: https://docs.spline.design/exporting-your-scene/android/native-3d-embeds-for-android

Grant internet and network state access in your AndroidManifest.xml to enable loading cloud-hosted 3D scenes.

```xml
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
```

--------------------------------

### SplineView Methods

Source: https://docs.spline.design/exporting-your-scene/android/code-api-for-kotlin

A collection of methods available on the SplineView instance to interact with and control the Spline scene.

```APIDOC
## SplineView Methods

### loadResource(id, onComplete)
Loads a Spline scene from a raw resource file. The callback is invoked when loading is complete.

### loadUrl(url, onComplete)
Loads a Spline scene from a URL. The callback is invoked when loading is complete.

### addEventListener(event, callback)
Adds an event listener for Spline events.

### removeEventListener(event, callback)
Removes a previously added event listener.

### emitEvent(event, nameOrUuid)
Triggers a Spline event associated to an object with the provided name or UUID. Starts from the first state to the last state.

### emitEventReverse(event, nameOrUuid)
Triggers a Spline event associated to an object with the provided name or UUID in reverse order. Starts from the last state to the first state.

### findObjectById(uuid)
Searches through the scene's children and returns the object with that UUID.

### findObjectByName(name)
Searches through the scene's children and returns the first object with that name.

### setZoom(zoom)
Sets the camera zoom, expects a number value > 0 where 1 is base zoom.

### setNumberVariable(name, value)
Updates value for passed number variable by name.

### getNumberVariable(name)
Gets current value for a specific number variable from its name.

### setBooleanVariable(name, value)
Updates value for passed boolean variable by name.

### getBooleanVariable(name)
Gets current value for a specific boolean variable from its name.

### setStringVariable(name, value)
Updates value for passed string variable by name.

### getStringVariable(name)
Gets current value for a specific string variable from its name.

### hasVariable(name)
Checks if a variable with the given name exists in the scene.

### stop()
Stops/Pauses all rendering, controls and events.

### play()
Plays/Resumes rendering, controls and events.

### setBackgroundColor(color)
Manually sets the scene/canvas background color with a Color value.
```

--------------------------------

### Control scene playback

Source: https://docs.spline.design/exporting-your-scene/android/code-api-for-kotlin

Use the stop and play methods to pause or resume scene rendering and animations.

```kotlin
view.loadResource(R.raw.scene) {
    // Pause after 5 seconds
    Handler(Looper.getMainLooper()).postDelayed({
        view.stop()
    }, 5000)
    
    // Resume after 10 seconds
    Handler(Looper.getMainLooper()).postDelayed({
        view.play()
    }, 10000)
}
```

--------------------------------

### Import Spline Runtime

Source: https://docs.spline.design/exporting-your-scene/apple-platform/native-3d-embeds-for-i-os

Include this import statement at the top of any file utilizing the Spline iOS Runtime.

```swift
import SplineRuntime
```
Tokens:
Raw