French developer @ Uptale.
Machine learning, data,VR and 3D rendering. Sometimes front end when it's needed
{
aframe;
return html`<a-scene id="scene" embedded style="width: 100%; height:400px">
<a-assets id="assets">
<img id="image-0" crossorigin="anonymous" src="https://cors-anywhere.herokuapp.com/https://wallpaperaccess.com/full/38191.jpg">
</img>
</a-assets>
<a-sky id="sky-0" src="#image-0" rotation="0 180 0"></a-sky>
<a-sky id="sky-1" src="#image-0" rotation="0 180 0" visible="false"></a-sky>
</a-scene>`;
}
creationRoutine = {
let videoIndex = 1;
setTimeout(
() =>
setInterval(() => {
THREE.Cache.clear();
const videoSphereIndexActive = (videoIndex + 1) % 2;
const videoSphereIndexInactive = videoIndex % 2;
$(`#image-${videoIndex - 1}`).remove();
const videoSphere = $(`#sky-${videoSphereIndexInactive}`);
videoSphere.attr("visible", true);
$(`#video-sphere-${videoSphereIndexActive}`).attr("visible", false);
const randomNumber = videoIndex % wallpaper_images.length;
const oldImage = $(`#sky-${videoSphereIndexActive}`);
oldImage.attr("src", "");
const video = $(`<img id='image-${videoIndex}' />`);
video.attr("crossorigin", "anonymous");
video.attr(
"src",
`https://cors-anywhere.herokuapp.com/${wallpaper_images[randomNumber]}`
);
console.log(video[0]);
$("#assets").append(video);
videoSphere.attr("src", `#image-${videoIndex}`);
videoIndex++;
$("#assets").append(video);
}, 2000),
3000
);
}
$ = require("jquery")
wallpaper_images = [
"https://wallpaperaccess.com/full/33960.jpg",
"https://wallpaperaccess.com/full/54041.jpg",
"https://wallpaperaccess.com/full/38191.jpg",
// "https://wallpaperaccess.com/full/205585.jpg", // This makes everything crash on iPhone
"https://wallpaperaccess.com/full/15858.jpg",
"https://wallpaperaccess.com/full/54049.jpg",
"https://wallpaperaccess.com/full/2576094.jpg",
"https://wallpaperaccess.com/full/2576101.png",
"https://wallpaperaccess.com/full/2576119.jpg",
"https://wallpaperaccess.com/full/2576134.jpg",
"https://wallpaperaccess.com/full/2576161.jpg",
"https://wallpaperaccess.com/full/2576184.jpg",
"https://wallpaperaccess.com/full/82317.jpg",
"https://wallpaperaccess.com/full/147554.jpg",
"https://wallpaperaccess.com/full/82334.jpg",
"https://wallpaperaccess.com/full/33960.jpg"
]
THREE = aframe.THREE
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
