Module Import does not work with , iOS WKWebview

Questions
1

Hello everyone I am new with Three js

I am trying to integrate three js in Xcode Project (iOS App) , where I am going to load 3d model in web view and draw the Curve

But When I try to run it is not loading the models , when I debug using safari

Screenshot 2023-04-14 at 9.13.47 PM
Screenshot 2023-04-14 at 9.13.47 PM2892×1162 447 KB

If I am using normal script like this , all file are visible in debugger , But Orbit control is showing error because import ( see the screenshot)

 <script src="./node_modules/three/build/three.js"></script>
    <script src="./node_modules/three/examples/jsm/controls/OrbitControls.js"></script>
    <script src="./node_modules/three/examples/jsm/controls/TrackballControls.js"></script>
    
    <script src="./node_modules/three/examples/jsm/controls/TransformControls.js"></script>

    <script src="./node_modules/three/examples/jsm/loaders/OBJLoader.js"></script>
    <script src="./node_modules/three/examples/jsm/lines/Line2.js"></script>
    <script src="./node_modules/three/examples/jsm/lines/LineMaterial.js"></script>
    <script src="./node_modules/three/examples/jsm/lines/LineGeometry.js"></script>
    <script src="./node_modules/three/examples/jsm/utils/GeometryUtils.js"></script>
    <script src="./node_modules/three/examples/jsm/exporters/STLExporter.js"></script>

Screenshot 2023-04-14 at 9.20.17 PM
Screenshot 2023-04-14 at 9.20.17 PM1920×1062 143 KB

I don’t know how to deal with it ,

Note : - I am not using any server , everything is going to run on browser

if I use Normal Three.js , I can write THREE. and I can access the properties , But If I use three.module.js it is not working (don’t know if it is useful info to troubleshoot)

I don’t know If I could explain my issue to you ,
Thanks in advance

1 Like
2

I had asimilar problem when loading obj files via a loader

the reason is that you have to enable/allow loading of files from javascript in WKWebview. See this post on github:

This allows the loading using XMLHttpRequest (wich three.js is using in the background to load resources)

webConfiguration.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")
webConfiguration.setValue(true, forKey: "allowUniversalAccessFromFileURLs")
3

Thanks for answer , Unfortunately it doesn’t work !!

Thing is when we use import map ,file are not importing ( safari → Developer debug )

If I used GCDWebserver then file is loading

is there any workaround ?

If you have any example wkwebview import map in Mac / iPad pls provide me it will be very helpful