使用globe.gl与Vue.js时出现THREE.ImageUtils.getDataURL报错的原因排查

首先要明确：这个不是报错，是Three.js的性能优化提示——但每秒弹出确实很烦人。下面来拆解原因和解决办法：

为什么会出现这个提示？ #

globe.gl底层基于Three.js，THREE.ImageUtils.getDataURL这个方法会在处理图片纹理时，如果判断图片会影响性能（比如尺寸过大、带透明通道的PNG），就会自动将其转换为JPG格式，并输出这个提示。

你换成JPG后还出现，主要有两个核心原因：

• 背景图尺寸过大：你的图片是4096×2048，属于超高清纹理，即使是JPG，Three.js在重复处理它时还是会触发性能优化提示；
• globe.gl初始化/配置重复执行：如果你的globe初始化代码（创建world的那段）被重复调用了（比如在Vue的updated钩子、或者响应式数据变化时重新执行），会导致背景图被反复加载处理，进而每秒都弹出提示。

具体解决办法 #

1. 确保globe只初始化一次 #

在Vue组件中，一定要把globe的初始化代码放在mounted钩子中，并且只执行一次，避免在其他钩子（比如updated）中重复创建实例：

// 在Vue组件的mounted钩子中
mounted() {
  // 只初始化一次globe实例
  const earthbg = require("../textures/sky.jpg");
  const world = Globe()(this.$refs.globeViz) // 用ref获取DOM更符合Vue组件化思想
    .globeImageUrl(earthmap)
    .backgroundImageUrl(earthbg);
  // 其他配置逻辑...
},

2. 压缩背景图尺寸 #

把4096×2048的图片压缩到2048×1024（甚至1024×512，背景图不需要超高清精度），降低Three.js处理纹理的性能压力，大概率不会再触发这个提示。

3. 关闭Three.js的相关警告 #

如果上面的方法没用，可以直接关闭Three.js的警告日志输出。在Vue项目入口文件（比如main.js）中添加：

import * as THREE from 'three';
// 将日志级别设置为只显示错误，屏蔽警告类信息
THREE.Logger.setLevel(THREE.Logger.ERROR);

4. 升级globe.gl到最新版本 #

旧版本的globe.gl可能存在背景图重复渲染的bug，升级到最新版本可以解决这类问题：

npm update globe.gl

内容的提问来源于stack exchange，提问作者Emre Özer