在R中使用globejs如何添加图片作为Canvas背景

我刚好之前也碰到过这个情况，globejs作为基于Three.js的R htmlwidget，确实没法直接通过R的bg参数设置Canvas背景，而且默认情况下Three.js渲染器会强制用黑色填充Canvas，导致你设置的body背景透不出来。下面给你两个实用的解决思路：

方案1：让Canvas透明，透出HTML Body背景 #

这个思路是先把Canvas的黑色背景去掉，让它完全透明，然后给页面Body设置背景图。关键要修改两个地方：Canvas的样式，以及Three.js渲染器的clearColor（默认是黑色且不透明）。

library(threejs)
library(htmlwidgets)
library(htmltools)

# 构建基础地球模型
my_globe <- globejs()

# 使用onRender注入JS代码修改Canvas和渲染器
my_globe <- onRender(my_globe, "function(el, x) {
  // 找到globe对应的Canvas元素
  const canvas = el.querySelector('canvas');
  // 设置Canvas样式为透明背景
  canvas.style.background = 'transparent';
  // 获取Three.js渲染实例，修改清除颜色为透明（alpha通道设为0）
  this.renderer.setClearColor(0x000000, 0);
}")

# 给页面Body添加背景图样式
my_globe <- prependContent(my_globe, tags$style(HTML("
  body {
    background: url('你的图片路径') no-repeat center center fixed;
    background-size: cover;
    margin: 0; /* 去掉默认边距让背景铺满 */
  }
")))

# 渲染地球
my_globe

注意事项： #

• 如果是本地图片，确保路径正确：如果是Shiny应用，把图片放在www文件夹下，直接写文件名即可；如果是普通Rmd或html输出，用绝对路径或者相对路径（相对于生成的HTML文件位置）。
• 更稳妥的方式是把图片转成Base64编码，避免路径问题：

  library(base64enc)
  # 把本地图片转成Base64字符串
  img_base64 <- dataURI(file = "your-image.jpg", mime = "image/jpeg")
  # 然后在style里替换url部分：url('${img_base64}')
  

方案2：直接给Canvas设置背景图 #

如果你不想修改Body背景，也可以直接给Canvas元素设置背景图，同样需要配合渲染器透明设置：

my_globe <- onRender(my_globe, "function(el, x) {
  const canvas = el.querySelector('canvas');
  // 直接给Canvas设置背景图
  canvas.style.background = 'url(你的图片路径) no-repeat center center';
  canvas.style.backgroundSize = 'cover';
  // 同样要把渲染器清除颜色设为透明
  this.renderer.setClearColor(0x000000, 0);
}")

为什么之前的尝试无效？ #

globejs的底层Three.js渲染器，默认会在每一帧渲染前用clearColor（默认黑色，alpha=1）清除画布，所以即使你把Canvas样式设为透明，渲染器还是会主动填充黑色，必须通过setClearColor把alpha通道设为0，才能让背景透出来。

内容的提问来源于stack exchange，提问作者Primož Dolžan