Positioning not accurate and cause glb items are disappearing

[jaswinprakash]

import React, { useState } from "react";
import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
import {
  Animator,
  Camera,
  DefaultLight,
  FilamentScene,
  FilamentView,
  Model,
} from "react-native-filament";
import MyModel from "../../assets/avatar-2.glb";

const STEP = 0.01; // Step size for position/scale/rotation

const MyScene = () => {
  // Default values as per original code
  const [x, setX] = useState(0);
  const [y, setY] = useState(-1.2);
  const [z, setZ] = useState(0);
  const [scale, setScale] = useState(2);
  // ADD: Rotation on y-axis. Default: 10 deg ≈ 0.2 rad.
  const [rotationY, setRotationY] = useState(0.2);

  return (
    <View style={{ flex: 1 }}>
      <FilamentScene>
        <FilamentView style={{ flex: 1 }}>
          <DefaultLight />
          <Model
            translate={[x, y, z]}
            rotate={[0, rotationY, 0]} // Updated: uses rotationY state
            scale={[scale, scale, scale]}
            source={MyModel}
          >
            <Animator
              animationIndex={0}
              onAnimationsLoaded={(animations) => {
                // The animations have been loaded
              }}
            />
          </Model>
          <Camera />
        </FilamentView>
      </FilamentScene>
      {/* Controls */}
      <View style={styles.controlsContainer}>
        {/* X controls */}
        <ParamControl label="X" value={x} onIncrease={() => setX((p) => +(p + STEP).toFixed(2))} onDecrease={() => setX((p) => +(p - STEP).toFixed(2))} />
        {/* Y controls */}
        <ParamControl label="Y" value={y} onIncrease={() => setY((p) => +(p + STEP).toFixed(2))} onDecrease={() => setY((p) => +(p - STEP).toFixed(2))} />
        {/* Z controls */}
        <ParamControl label="Z" value={z} onIncrease={() => setZ((p) => +(p + STEP).toFixed(2))} onDecrease={() => setZ((p) => +(p - STEP).toFixed(2))} />
        {/* SCALE controls */}
        <ParamControl label="Scale" value={scale} onIncrease={() => setScale((p) => +(p + STEP).toFixed(2))} onDecrease={() => setScale((p) => +(p - STEP).toFixed(2))} />
        {/* ROTATION Y controls */}
        <ParamControl
          label="Rotation"
          value={rotationY}
          onIncrease={() => setRotationY((p) => +(p + STEP).toFixed(2))}
          onDecrease={() => setRotationY((p) => +(p - STEP).toFixed(2))}
        />
      </View>
    </View>
  );
};

const ParamControl = ({ label, value, onIncrease, onDecrease }) => (
  <View style={styles.paramRow}>
    <Text style={styles.paramLabel}>{label}</Text>
    <TouchableOpacity style={styles.paramButton} onPress={onDecrease}>
      <Text style={styles.paramButtonText}>-</Text>
    </TouchableOpacity>
    <Text style={styles.paramValue}>{value.toFixed(2)}</Text>
    <TouchableOpacity style={styles.paramButton} onPress={onIncrease}>
      <Text style={styles.paramButtonText}>+</Text>
    </TouchableOpacity>
  </View>
);

const styles = StyleSheet.create({
  controlsContainer: {
    position: "absolute",
    bottom: 30,
    width: "100%",
    backgroundColor: "rgba(255,255,255,0.82)",
    paddingVertical: 12,
    alignItems: "center",
  },
  paramRow: {
    flexDirection: "row",
    alignItems: "center",
    marginVertical: 2,
  },
  paramLabel: {
    width: 54,
    fontSize: 15,
    fontWeight: "bold",
    textAlign: "right",
  },
  paramButton: {
    width: 30,
    height: 30,
    marginHorizontal: 10,
    backgroundColor: "#444",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 15,
  },
  paramButtonText: {
    color: "#fff",
    fontSize: 18,
    fontWeight: "bold",
  },
  paramValue: {
    width: 54,
    textAlign: "center",
    fontSize: 15,
    backgroundColor: "#eee",
    borderRadius: 8,
    paddingVertical: 4,
    marginHorizontal: 2,
  },
});

export default function Index() {
  return <MyScene />;
}

when i try to chnage position or scale or rotate kind of values are applying weirdly as shown in the video ,

dependencies:
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@react-navigation/bottom-tabs": "^7.3.10",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"expo": "~53.0.20",
"expo-blur": "~14.1.5",
"expo-constants": "~17.1.7",
"expo-font": "~13.3.2",
"expo-haptics": "~14.1.4",
"expo-image": "~2.4.0",
"expo-linking": "~7.1.7",
"expo-router": "~5.1.4",
"expo-splash-screen": "~0.30.10",
"expo-status-bar": "~2.2.3",
"expo-symbols": "~0.4.5",
"expo-system-ui": "~5.0.10",
"expo-web-browser": "~14.2.0",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.5",
"react-native-filament": "^1.8.0",
"react-native-gesture-handler": "~2.24.0",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.11.1",
"react-native-web": "~0.20.0",
"react-native-webview": "13.13.5",
"react-native-worklets-core": "^1.6.2"
},

Sequence.01.mp4

[gerzonc]

Can you create a sample project to reproduce this issue?

[jaswinprakash]

Can you create a sample project to reproduce this issue?

I already have this project in hand , you mean to attach it here?

[gerzonc]

Yeah

[jaswinprakash]

Yeah

https://github.com/jaswinprakash/example-react-native-filament

[gerzonc]

If you want to do an every frame update on these transforms, then useState is not your friend here. Look here. One more thing is that transform multiplication comes activated by default, which means that every time you update transforms on a model, next update will multiply against that updated version and not with the base (which means non-linear increase in value); maybe isn't what you want at all. You can disable this by passing multiplyWithCurrentTransform={false} to your model

<Model
  translate={[x, y, z]}
  rotate={[0, rotationY, 0]}
  scale={[scale, scale, scale]}
  source={MyModel}
  multiplyWithCurrentTransform={false} // here
>
  <Animator
    animationIndex={0}
    onAnimationsLoaded={(animations) => {
      // The animations have been loaded
    }}
  />
</Model>;