importing SVGLoader from three.js giving Gateaway on Vite - three.js

I am on vite / vue 3 typescript and tried to import SVG via three.js but following error pops up as soon as I import the SVGLoader
http://localhost:3000/node_modules/.vite/deps/three_examples_jsm_loaders_SVGLoader.js?v=96b3206a net::ERR_ABORTED 504 (Gateway Timeout)
import { SVGLoader } from "three/examples/jsm/loaders/SVGLoader";
Any idea whats causing the gateaway error?

It seems like a Vite bug with module(package) import, according to this github discusstion; and I know for sure because I've come across similar kind of problem when using any kind of unpolished module packages in Vite.
Fortunately, SVGLoader itself is not dependent to any other packages except three.js, so I advise you to copy the SVGLoader code and make it as your own .ts file to include in your project.

Related

Issues trying to generate quasar client with API platform

So I have created a quasar application and generated the front end using create-client —generator quasar and the options mentioned in the api-platform quasar client docs.
The problem appears when I try to import the route files generated from the create-client command. The js files are imported correctly, but any vue fails to load until I go into the generated files and add .vue to each import statement. Am I missing a step here?
Tried : importing generated Vue components
Expected : routes to work
Result: unable to load imports without .vue extension

PhpStorm it can not resolve root methods, for vue.js

I am using PhpStorm from some days, for laravel projects.
I have attached a my Index.vue file as screenshot.
I have define a mf method in my app.js
I want to go where $root.mf method is
defined, but there are issue with PhpStorm it can not resolve that
function.
It is possible for PhpStorm can auto detect $root (app.js)
functions inside in any child component??
How to resolve
the issue is tracked at WEB-52054, please follow it for updates

Three js Postprocessing

i'm having a problem to replicate an example inside vue js.(https://threejs.org/examples/#webgl_postprocessing)
when adding DotScreenShader or RGBShiftShader, uniforms is null.
https://codesandbox.io/s/infallible-mcnulty-5rk7j?file=/src/App.vue:220-248
What am I doing wrong?
I try import libraries from npm (three-full, three-effectcomposer, importing like this https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing), but nothing is working.
Solved.
Found several issues, but in this example it's quite clear.
https://codesandbox.io/s/infallible-mcnulty-5rk7j?file=/src/App.vue

Three.js:Help for generating a FlowMap

I’m trying to generate a flowmap with Three.js: https://threejs.org/examples/#webgl_water_flowmap
I’ve used parts of the code source indicated here: https://github.com/mrdoob/three.js/blob/master/examples/webgl_water_flowmap.html but nothing appears on my page: https://flowmaptest-site.superhi.com/
I would be super grateful if someone could help me :slight_smile:
The browser console reveals some error messages:
THREE.Water: Required component THREE.Reflector not found.
THREE.Reflector is a dependency of THREE.Water. Without including it, the component won't work.
Besides, it seems certain textures can not be loaded from your host.
GET https://flowmaptest-site.superhi.com/textures/water/Water_1_M_Normal.jpg 404 (Not Found)
GET https://flowmaptest-site.superhi.com/textures/water/Water_2_M_Normal.jpg 404 (Not Found)

fetch throwing "only absolute urls are supported" in react redux server-side render

fetch started throwing "only absolute urls are supported" whenever my redux app was rendered on the server, but worked perfectly fine client-side. It also used to work for relative URLs so I don't know what went wrong.
Help?
It turns out I was no longer importing fetch from domain-task - somehow I had lost the following line:
import { fetch } from 'domain-task';
Since fetch is also native, the compiler didn't complain, and it worked client-side. This line fixed it for the server-side render.

Resources