spherical-env-map not working from A-Frame 1.1.0+
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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