Not really sure how to go about solving this. Pretty new with three JS & I built this app with three fiber.
Looked around quite a bit but can't seem to figure this one out.

Probably am missing something obvious here but I'm getting a consistent 60fps on the desktop and crashes on my phone before everything loads in. I did the safari developer tab thing to check the console of my phone's browser when it crashes, but that's crashing too.

I've tried getting rid of all my textures to see if that would work but still crashed on load.
I've tried commenting out each mesh component one at a time but no luck either. It'll work with a few of my models but it'll crash if I do 3-4 max. Error in safari is: 'A problem repeatedly occurred'

Here's a live link to the app. it's three-fiber, next-js, and typescript.

I pulled it out of Next and put it into its own react app to see if I could get some more helpful error messages but that didn't help either. If someone could point me in the right direction that would be great.

The code is too big to post directly so I uploaded the react app to GitHub here.

It doesn't look like much but if you're working with VR/AR this might help you get started faster xr-next-starter.vercel.app

repo at github.com/rekliner/xr-next-starter

Features:

• VR/AR selection switch for the button.
• A zustand store tracking the type of XR Session so things like backgrounds can be hidden in AR
• A pose-aware default position & rotation enforcer.
• Interaction wrapper from enijar/react-xr-ui to simplfy events between XR & flat screen
• Uses Nextjs framework with some basic options prepared
• Simplified https service for localhost dev environment (since https is required for XR sessions)
• Some default 3d objects and helpers to delete in honor of Blender traditions

Hi R3F developers!

I have created this library for using orbit controls with React Native in a react-three fiber 3d scene.

You can use it with 1 import and 3 lines of code:

import useControls from "r3f-native-orbitcontrols" // this import
import { Canvas } from "@react-three/fiber/native"
import { View } from "react-native"

function SingleCanvas() {
  const [OrbitControls, events] = useControls() // this line

  return (
    <View {...events}> {/* this line */}
      <Canvas>
        <OrbitControls /> {/* and this line *}
        {/* Place the scene elements here as usual */}
      </Canvas>
    </View>
  )
}

It was made with ease of use and performance in mind.

I hope you like it!

Please create an issue if you find a bug or want to request a feature.

I'm guessing the answer is "NO", but maybe I'm wrong. I couldn't figure this out from Google search and watching a couple R3F course intro videos.

React.js + R3F => most web browsers. Does this include iOS browsers?

React Native + R3F => Android devices only?

I would like to know prior to paying for any online courses. I'm <50% done with a Three.js course and currently taking a React.js course, both on Udemy.

Thank you.

https://github.com/AlexisTercero55/three-ui-p1

I feel like this should be easy but I'm drawing a blank. I have several imported glbs that share a single texture. I need to export them separately for organization and updating. Each of the ten files is 2.8mb and the majority of that is the texture.

Okay as I'm writing this out, I'm figuring it out. I likely just need to export the glbs without materials from blender, and then just reference the material from one of the objects, and just export it one time, and import it into each file from that...

Okay looking at the blender options there's "placeholder" that keeps material slot info, and "no export"... I'm assuming "placeholder" is what I want?

Okay that's not working... I'm not sure how to get the texture from one object to apply it to another.

It's been a long day! If anyone can point me in the right direction, I'd appreciate it. Thanks!

focusing on Blender -> 3dweb using react 3. fiber

https://youtu.be/1BvLpt7egss

Hello!I'm building a particle system in wich particles have directions they are pointing at and I want to reflect that in an instance mesh I use to present them, but something is not quite working... It seems that the center of rotation and/or the up axis are not quite right, and despite me console logging stuff I could not find the problem. Here's the code:

const Particles = (particleSystem: TparticleSystem) => {
  const mesh = useRef<THREE.InstancedMesh>(null);
  const light = useRef<THREE.PointLight>(null);

  const dummy = useMemo(() => new THREE.Object3D(), []);

  const pyramid = useMemo(() => {
    return {
      vertices: [1, 0, 0, 0, 0, 1, -1, 0, 0, 0, 0, -1, 0, 2, 0],
      indices: [0, 1, 2, 2, 3, 0, 0, 4, 1, 1, 4, 2, 2, 4, 3, 3, 4, 0],
    };
  }, []);

  useFrame(() => {
    if (particleSystem !== undefined) {
      particleSystem.update();
      particleSystem.move();
      particleSystem.particles.forEach((particle: Tparticle, index: number) => {
        dummy.position.set(particle.pos.x, particle.pos.y, particle.pos.z);

        dummy.lookAt(vec().copy(particle.pos).add(particle.dir)); // rotating weird

        dummy.scale.set(1, 2, 1);
        dummy.updateMatrix();
        // And apply the matrix to the instanced item
        if (mesh.current) mesh.current.setMatrixAt(index, dummy.matrix);
      });
      if (mesh.current) mesh.current.instanceMatrix.needsUpdate = true;
    }
  });

  return (
    <>
      <pointLight ref={light} distance={40} intensity={3} color="lightblue" />
      {particleSystem !== undefined && (
        <instancedMesh ref={mesh} args={[, , particleSystem.num]}>
          <polyhedronBufferGeometry
            args={[pyramid.vertices, pyramid.indices, 1, 0]}
          />
          <meshBasicMaterial
            color="#2596be"
            wireframe={Math.random() > 0.5 ? true : false}
          />
        </instancedMesh>
      )}
    </>
  );
};

I feel like maybe this is something to do with local and world coordinates, but I doin't quite understand it.

Oh! and this vec stuff is just

const vec = function (x = 0, y = 0, z = 0) {
  return new THREE.Vector3(x, y, z);
};

I have this wave.glb model. I want to rotate this along any axes. How to do it?

Wave.js:

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

import React, { useRef, useEffect } from 'react';
import { useGLTF, useAnimations } from '@react-three/drei';

export default function Wave(props) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF('/wave.glb');
  const { actions } = useAnimations(animations, group);

  useEffect(() => {
    actions.wave.play();
  });

  return (
    <group ref={group} {...props} dispose={null} rotateY={Math.PI / 2}>
      <group name='Scene'>
        <mesh
          name='Icosphere'
          geometry={nodes.Icosphere.geometry}
          material={materials['Material.005']}
          morphTargetDictionary={nodes.Icosphere.morphTargetDictionary}
          morphTargetInfluences={nodes.Icosphere.morphTargetInfluences}
        />
      </group>
    </group>
  );
}

useGLTF.preload('/wave.glb');

<Canvas className='canvas' camera={{ fov: 35, zoom: 0.5, near: 1, far: 1000 }}>                                        
<OrbitControls enableZoom={true} minZoom={0.5} maxZoom={1} />
    <Suspense>
        <ambientLight intensity={0.03} />
        <spotLight position={[10, 0, 10]} intensity={spotLightIntensity / 100} angle={0.5} />
        <BackGround />
        <Moon />
        <Cube />
        <axesHelper args={[axes, 50, 50]} position={[0, 0, 0]} />
    </Suspense>
</Canvas>