2

Using STLLoader from Three.js Loaders. The stl file / object is loaded successfully but when added to the scene through mesh, it does not show on the screen. Have tried all sorts of mesh materials to create mesh but nothing is appearing.

Here is the code:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { PixelRatio } from 'react-native';
import ExpoTHREE, { Renderer, THREE } from 'expo-three';
import { GLView } from 'expo-gl';
import { ExpoWebGLRenderingContext } from 'expo-gl';
import { PerspectiveCamera, AmbientLight, SpotLight, Scene, MeshPhongMaterial, MeshBasicMaterial, MeshLambertMaterial, Mesh, CubeTextureLoader, MeshPhysicalMaterial } from 'three';
import { TextureLoader } from 'expo-three';
import { Asset } from 'expo-asset';
import { STLLoader } from 'three/examples/jsm/loaders/STLLoader';

  const scene = new Scene();
  const camera = new PerspectiveCamera(75, drawingBufferWidth / drawingBufferHeight, 0.1, 1000);
  camera.position.set(0, 2, 10);

  const ambientLight = new AmbientLight(0x101010);
  scene.add(ambientLight);
    
  const assets = Asset.fromModule(require('./assets/trophy.stl'));
  await assets.downloadAsync();

  const stlLoader = new STLLoader();
    
      stlLoader.load(assets.uri, (buffgeometry)=>{
        console.log(`the buffer geometry : ${buffgeometry} with position count: ${buffgeometry.attributes.position.count}`)
        const materialLambert = new MeshLambertMaterial({color:0xf3a2c1, })
        const meshX = new Mesh(buffgeometry, materialLambert)
        scene.add(meshX)
    
        renderer.render(scene, camera)
        gl.endFrameEXP()
    
      }, (xhr)=> {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded');
      },(error)=>{console.log(`the error of stl load: ${error}`)})

The stl 3D object should appear on the mobile screen but nothing appears. Have gone through almost all examples available online but all of them are for React.js instead react-native.

0 Answers0