Is there a mobile-compatible alternative to Jsfiddle that can run the latest three.js?

Jsfiddle and others have been left to Jurassic era, at the very least they don’t scale for mobile, or have a trouble to run ES6 modules, or WebXR - for some reason the button to enter VR is displayed on desktop but not on mobile (go figure)… Codepen included, I even stumbled on one that didn’t even provide an HTTPS connection…

Has anyone had any success to run modern code on mobile with an online editor?

I’m asking in order to be able to post code examples when there is an issue…
Where do you post?

1 Like

Have you already tried codesandbox? As an alternative glich might be a good option, too.

BTW: You can easily use ES6 module with jsfiddle: https://jsfiddle.net/n9rwdxkL/ . WebXR should also work if you add the show prefix to the URL: JSFiddle

1 Like

Thanks Mugen87 for the info, “show” solved the mobile-scaling issue by using whole screen for output in Jsfiddle (BTW where did you find about this? :slight_smile: ), but it didn’t solve the invisible button issue, it’s still …invisible on mobile.
See this official three.js VR example that I adapted for testing purposes: JSFiddle

The same code pasted on codesandbox doesn’t run at all ( DependencyNotFoundError ) except if it needs some special tweaking based on …inside info! )

Glitch is even less user-friendly, it uses some weird terminology like “remix-project”, “remix on Glitch”, “format this file”, and I couldn’t make it work, it might be the best, but like most of us, I don’t have the time to read tutorials in order to decipher their mystic terms… we need simple, fast, user-friendly solutions.

I’ve seen the show prefix used by another developer :innocent: .

1 Like

Just came back here to copy the three.js CDN links I used for a three.js demo on JSFiddle, and I found out that it doesn’t work at all, just 9 days later! If the CDN links expire, then that makes CDN completely useless.

Are there stable, official CDN (or other) links for online three.js projects/examples?
BTW, just three.js is not enough, all modules are necessary, eg the VRButton.

Fortunately I’m only interested to post demos /issues /examples…

have you tried :

import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';
2 Likes

Thanks, but that’s the same link except the version number. After three.js was updated from 128 to 129, the ‘128’ link stopped working -you can see that even in the suggested example by Mugen87 above -it doesn’t work anymore!
So, each CDN link will last until the next update… that will render all posted examples on the net unusable every time an update is released. Even more for those that depend on the previous version …they won’t work even if you change the link.

The Skypack CDN links do not expire. This jsfiddle that Mugen posted still works for me and changing the three.js version numbers to older versions works, as well.

https://jsfiddle.net/n9rwdxkL/

3 Likes

@ gkjohnson
Thanks for pointing that out, I realized that this is a bug of Pale Moon browser (which I’m using because it is safer and more efficient at times than FF, Chrome, etc), all official three.js examples work on Pale Moon except JSFiddle ones that use CDN links that point to modules.
palemoon_error

Every other major browser doesn’t have a problem, so I stand corrected, fortunately I was wrong, thanks again! :slight_smile:

Hi, An alternative is StackBlitz, its has mobile view

you can add the dependencies with a specific version

Captura de Pantalla 2021-06-17 a la(s) 12.24.27

Ej:

https://stackblitz.com/edit/three-js-starter-sbl8zu?file=index.js

For mobiles it has an editor view

And Preview tab

1 Like

Thanks EstebanFuentealba,
unfortunately it’s not compatible with Firefox -I only get a blank screen.

On Chrome, when I pasted the three.js rollercoaster VR example (the first one I posted here on Jsfiddle), modified the links to use modules as per your example and loaded dependencies (three), then I got an error:
Error: Unexpected token 'export'

EDIT: After re-starting Chrome it worked. Next test: mobile VR.

EDIT #2: Nope, no VR button on PC and it just ignored the module.
When I pasted the CDN link instead of the local module path, I got the same error.

Hi, this example use npm packages
Change

import { VRButton } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/webxr/VRButton.js';

by

import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';

If you want use module imports you need use like this (in index.html)

<script type="module"> // <-- important if you try use module
      import * as THREE from 'https://cdn.skypack.dev/three@0.128.0/build/three.module.js';
      import {
        RollerCoasterGeometry,
        RollerCoasterShadowGeometry,
        RollerCoasterLiftersGeometry,
        TreesGeometry,
        SkyGeometry
      } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/misc/RollerCoaster.js';
      import { VRButton } from 'https://cdn.skypack.dev/three@0.128.0/examples/jsm/webxr/VRButton.js';
      // TODO ...

I downloaded Firefox mobile and test example

1 Like

Your suggestion does work without errors on Chrome PC, thanks, but on FF PC I still get a blank page.
FF mobile cannot play VR anyway (hence the “WEBXR NOT AVAILABLE”), only Chrome mobile can, but on Chrome mobile the screen is stuck on “connected to dev server”: