bryik / aframe-cubemap-component Goto Github PK
View Code? Open in Web Editor NEWA component for creating a skybox with a cubemap in A-Frame.
Home Page: https://aframe-cubemap-component.netlify.app/
License: MIT License
A component for creating a skybox with a cubemap in A-Frame.
Home Page: https://aframe-cubemap-component.netlify.app/
License: MIT License
No longer works with more recent version of threejs. Same as this issue here:
https://stackoverflow.com/questions/59454931/three-js-r111-three-shaderlib-cube-uniforms-tcube-to-envmap-issue
A-Frame has rudimentary support for threejs scene background:
The core A-Frame background
scene component could be improved, or this custom component could be updated to support newer versions of threejs:
A-Frame Version: 0.7.0 (Date 22-09-2017, Commit #570c623e)
index.js:87 three Version: ^0.87.0
index.js:88 WebVR Polyfill Version: ^0.9.36
three.js:20919 THREE.WebGLRenderer 87
2browser.js:111 core:schema:warn Unknown property transparent
for component/system cubemap
.
three.js:18007 THREE.WebGLProgram: gl.getProgramInfoLog()
The removal of Browserify requires a new solution for the live demo. I had hoped it would "just work" but seems like the paths are screwed up in GitHub Pages when I set it to use the master branch.
Rapidly changing the folder
property causes unpredictable behaviour.
<a-scene>
<a-entity id="skybox" cubemap="folder: /assets/Yokohama3/"></a-entity>
</a-scene>
<script type="text/javascript">
setTimeout(changeBackground, 2000);
function changeBackground() {
let skybox = document.querySelector("#skybox");
skybox.setAttribute("cubemap", "folder: /assets/GoldenGateBridge2/");
skybox.setAttribute("cubemap", "folder: /assets/Yokohama3/");
// Which cubemap will be displayed?
}
</script>
The cubemap that ultimately gets displayed depends on the order texture load callbacks are executed which is random. It is quite easy to end up in situations where component data is inconsistent with the displayed texture:
In the above, /assets/GoldenGateBridge2/"
is displayed, but data.folder
is "/assets/Yokohama3/"
.
The texture load callback is closed over the original folder path it was called to load (srcPath) and can be given access to the current component data by binding this
. By comparing past and current folder paths, the texture load callback can figure out what to do.
// Within the texture load callback
if (srcPath !== this.data.folder) {
// The texture that just finished loading no longer matches the folder
// set on this component.
texture.dispose();
return;
}
// The folder property has not changed, so go ahead with the texture update.
Can I request this component be available on npm please?
Hi, Ben!
You really did a good job! The cubemap component helps me a lot. But when I put 2 cubemap in a scene like below, it seems that the sky4
's images will be overwritten by the sky5
's images.
<a-entity id="sky4" cubemap="folder: ./assets/sky4/" visible="true"></a-entity>
<a-entity id="sky5" cubemap="folder: ./assets/sky5/" visible="false"></a-entity>
So, I think maybe this component doesn`t support multi-cubemap in a scene. But I believe it would be feasible to realize this feature. Unfortunately I'm a rookie of js, and I don't know how to do it, so I create this issue to ask you for help. It will be highly appreciated if you could help me to realize this feature.
For some reason npm run dist
fails at this line. Seems like the minifier can't handle let
.
It's been ages since this project was setup--could use some re-tooling.
Name | Description |
---|---|
cubeTextureLoaded | Emitted when a texture has finished loading |
cubeTextureLoaded seems to be cubemapLoaded?
Sky component (using equirectangular):
Cubemap component (same equirectangular from above converted to cube map using this tool):
Appears to be same as this issue:
https://discourse.threejs.org/t/r99-cubemap-brighter/5496
Discussion points:
texture.encoding = THREE.sRGBEncoding;
Related discussion:
Hi,
I'm looking for a solution to have a fadeout / fadein effect after a new cubemap has loaded.
Here is a code snippet which shows the fade effect:
https://github.com/aframevr/360-image-gallery-boilerplate/blob/master/components/set-image.js
And here is the project site where you can see the fade effect when pressing the link buttons:
https://aframe.io/360-image-gallery-boilerplate/
The same should be done also for cubemap components:
Component that listens to an event, fades out an entity, swaps the texture, and fades it back in.
Regards.
The Code for the yokohama example didn't work. To fix it use:
<html>
<head>
<title>A-Frame Cubemap Component - Yokohama</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aframe-cubemap-component.min.js"></script>
</head>
<body>
<a-scene>
<a-entity cubemap="folder: ../assets/Yokohama3/"></a-entity>
</a-scene>
</body>
</html>
This also works in a local environment.
Questions:
Expectation: It should be fading back and forth between two different panoramas.
Reality: It is alternating between black and white with no visible panoramas.
I am using some textures I've been using in unity that seem to work fine in there, but in the aframe cubemap component it shows slight white edges. Changing the edge length doesn't seem to change the size of the box, so I'm not sure how to combat this. You can see the edges in the image - is this something wrong with the images themselves or is there something I can do to fine tune it with the component?
The PNG extension example should also demonstrate transparency, but the milky way is hidden by the "transparent" PNG cubemap.
Not sure when/how this broke. Setting the opacity of the cubemap's shaderMaterial does reveal the milky way, so transparency still works to some degree.
var skyBoxShader = new THREE.ShaderMaterial({
fragmentShader: shader.fragmentShader,
vertexShader: shader.vertexShader,
uniforms: shader.uniforms,
depthWrite: false,
side: THREE.BackSide,
transparent: data.transparent,
opacity: 0.5,
});
Hi, I noticed that the component was no longer working in the latest A-Frame releases (1.4.0 and up). It seems in the latest versions of Three.js BoxBufferGeometry has been deprecated and the cube shader in ShaderLib has different uniforms now. I found some simple workarounds and made a PR. Hopefully, we can get it working again, so the community can keep using this awesome component!
Noticed in #48
The "a-assets" example is currently broken, not sure why. Seems like imgur no longer makes it easy to direct link to an image, but the example remained broken even after using only local images. Probably something changed in A-Frame's asset management system or in Three.js' loaders.
In my project I have previously used the A-Frame a-assets
asset loader to load the equirectangular sky image. That same asset is also used as a sphericalEnvMap
on materials for reflections.
For example:
<a-ocean-plane height="100" width="100" position="0 -1 0" material="sphericalEnvMap: #sky;"></a-ocean-plane>
I am attempting to convert this to cubemap. It turns out a cubemap can be referenced from a-asset loader as well, example pasted here for convenience:
<a-assets>
<a-cubemap id="sky">
<img src="right.png">
<img src="left.png">
<img src="top.png">
<img src="bottom.png">
<img src="front.png">
<img src="back.png">
</a-cubemap>
</a-assets>
It would be nice to support this syntax to allow passing a selector such as #sky instead of the path for files for the cubemap component, this way the files can be loaded once and referenced from multiple components.
More info from A-Frame source code:
https://github.com/aframevr/aframe/search?q=a-cubemap
Does it support stereo cubemap as https://github.com/wallabyway/aframe-stereocube ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.