Using R with Globe.js to incorporate an image as the canvas background

Question

Using R with Globe.js to incorporate an image as the canvas background

After using globejs in R to create a globe, I am now exploring ways to set an image as the canvas background. It seems that setting the image directly in R with bg is not possible. I attempted to set the image as the body background and make the canvas transparent, but it keeps defaulting to a black canvas. If anyone knows how to set an image as the canvas background or how to make the canvas transparent so that the HTML body image is visible, please advise. I found some possible solutions online but I'm unsure where to implement the function or set the transparency. Here is the link to the globe: and the associated files:

On a separate note, how difficult is it to implement animated rotation of the globe? And where should I insert the code within the provided file structure?

Thank you.

javascript r three.js

Answer 1

Answer №1

When working with THREE JS, you can achieve an animated canvas without a background by following these steps:

var renderer = new THREE.WebGLRenderer( { alpha: true } );
    renderer.setClearColor( 0x000000, 0 ); // this is the default setting

To add rotation to your object, a simple method is to update the rotation within the render/animate function like so:

function render() {

                if ( mesh ) {
                    mesh.rotation.x += 0.01; // you can also use mesh.rotateX(0.01)

                }

                renderer.render( scene, camera );
            }

Answer 2

When working with THREE JS, you can achieve an animated canvas without a background by following these steps:

var renderer = new THREE.WebGLRenderer( { alpha: true } );
    renderer.setClearColor( 0x000000, 0 ); // this is the default setting

To add rotation to your object, a simple method is to update the rotation within the render/animate function like so:

function render() {

                if ( mesh ) {
                    mesh.rotation.x += 0.01; // you can also use mesh.rotateX(0.01)

                }

                renderer.render( scene, camera );
            }

Using R with Globe.js to incorporate an image as the canvas background

Answer №1

Similar questions

Creating a dynamic directive in AngularJS: Learn how to add or remove it from the DOM based on specific conditions

merging various columns from read.csv file in R

Uncovering the websocket URL with NestJS and conducting postman tests: A step-by-step guide

The AngularJS 2 TypeScript application has been permanently relocated

Transfer the moon's orbit from centering around the sun to revolving around

What is the best way to show the probability of users' bets in percentage form based on their wagered amounts?

Issue with loading Bootstrap modal in KnockoutJS

I am encountering an issue with my req.params.id being undefined. What steps should I take to troubleshoot and correct my

Should you consider using the Singleton pattern in Node.js applications?

Top strategies for managing fixed datasets

Oops! We encountered an internal issue: MongooseError: The operation `posts.insertOne()` has exceeded the buffering time limit of 100

A error was encountered stating that the formValidation function is not defined when the HTML form element is submitted

The plumber was unable to locate the requested body

Acquiring data from a separate Redux slice and utilizing it as the default state in a distinct slice

Utilize Autodesk Forge to adjust the DataVisualisation sprite offset and customize various THREE js sprite parameters

Using backslashes to escape JSON values within a value in Angular

Unleashing the Power: Crafting Impeccable For Loops

What is the process for searching a sentence and making replacements under certain conditions?

The dialog encountered an error due to an invalid function

Came across some code where I was reading the source and stumbled upon `const {foo} = foo;