aframevr / aframevr/aframe

spherical-env-map not working from A-Frame 1.1.0+

Open
#4,977 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
17.6k
Forks
4.4k
PR merge metrics
No merged PRs in 30d

Description

Description:

  • A-Frame Version: 1.1.0 and 1.2.0
  • Platform / Device: All
  • Reproducible Code Snippet or URL: see below...

Working:
https://diarmidmackenzie.github.io/christmas-scene/research/baubles/baubles-1.0.4.html

Not Working:
https://diarmidmackenzie.github.io/christmas-scene/research/baubles/baubles-1.1.0.html
https://diarmidmackenzie.github.io/christmas-scene/research/baubles/baubles-1.2.0.html
https://diarmidmackenzie.github.io/christmas-scene/research/baubles/baubles-master.html

I'm building a christmas scene, and would like to put some shiny christmas baubles on my christmas tree using spherical-env-map as described here:
https://aframe.io/docs/1.2.0/primitives/a-sphere.html#attributes_spherical_env_map

However it only works in versions up to 1.0.4. In 1.1.0 and 1.20, it doesn't work.

I thought it might be this problem: https://github.com/aframevr/aframe/issues/4818

I suspect it has the same root cause (i.e. SphericalReflectionMapping is no longer supported in THREE.js), but the fix made for this issue doesn't seem to be sufficient, as this still isn't working with the A-Frame master build.

See: https://diarmidmackenzie.github.io/christmas-scene/research/baubles/baubles-master.html

I found this THREE.js discussion, which appears to be indicating that this function is gone for good from THREE.js, and needs to be re-implemented using "MeshMatcapMaterial" instead.

I don't yet understand what that means.

Given the situation with THREE.js, is it possible to get this function implemented in A-Frame, or will it need to be deprecated?

If the latter, it would be good to understand possible alternative solutions. I have had a go at implementing the same effect using the environment setting on the THREE.js scene, but not managed to make that work yet...
http://127.0.0.1:8000/research/baubles/baubles-environment.html

Maybe using the "env-map" attribute instead would be a better option? - I'd just need to convert my image into a cube map.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by comparing the working baubles-1.0.4.html with baubles-1.1.0.html, baubles-1.2.0.html, and baubles-master.html. Read issue #4818 and the linked Three.js discussion to determine how spherical-env-map changed, then verify whether the feature can be restored or must be deprecated. Done means a documented, tested resolution with a working alternative if deprecation is required.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, three.js
Domain
computer-graphics, frontend, web-dev
Issue type
Bug
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.