Three.js 解决纹理渲染后模型为黑色

白瑕

已于 2024-09-08 02:43:39 修改

阅读量7.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： three.js 文章标签： javascript 前端开发语言

于 2022-07-05 10:07:55 首次发布

本文链接：https://blog.csdn.net/qq_52697994/article/details/125613338

three.js 专栏收录该内容

6 篇文章

订阅专栏

本文详细列举了在使用Three.js进行3D渲染时，遇到模型显示为黑色的七种可能原因，包括图片路径错误、TextureLoader的异步操作、渲染时机不当、缺少requestAnimationFrame、尝试使用require引入纹理、浏览器本地文件读取限制以及光照设置。通过逐个排查这些问题，可以帮助开发者解决Three.js中纹理渲染不正确的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、图片路径错误
二、TextureLoader()是异步操作, 但是没有回调渲染
三、渲染时机不正确
四、渲染函数里没有requestAnimationFrame()
五、尝试使用require引入纹理
六、浏览器不能读取本地文件
七、光照
附-颜色color加载不出
总结

前言

有很多种情况, 我一一列举一下, 因为我全都试过了…

一、图片路径错误

要加载的图片应该从当前js文件(即load()所在的文件)开始引导路径.
但是这种情况下并不会报错, 而且网络请求会显示能够请求到图片, 可辨识的是网络请求列表里的图片并不会有图像而是默认图片.

二、TextureLoader()是异步操作, 但是没有回调渲染

TextureLoader()会在画布渲染完毕后把纹理弄上去, 如果你不在TextureLoader()的load()方法里回调渲染函数, 那么…
load是可以接受函数类型参数的:

在这里插入图片描述

const texture = new THREE.TextureLoader().load('../assets/haokangde.png', function () {
    renderer.render(scene, camera);
});

三、渲染时机不正确

检查一下你的颜色color能不能生效, 如果模型是白色, 那你应该调整一下mesh()的时机, 或许该晚一点;
至少等到颜色可以正常显示再去调整纹理的问题.

四、渲染函数里没有requestAnimationFrame()

五、尝试使用require引入纹理

它解决了我的问题：

var haokangde = require('../assets/haokangde.png');   //直接在load()里写路径不行
const texture = new THREE.TextureLoader().load(haokangde, function () {
    renderer.render(scene, camera);
});

六、浏览器不能读取本地文件

很少会出现这种情况吧…
桌面右键edge/chrome, 打到快捷方式上, 直接在目标后面粘贴:

//开头我已经加了空格, 不要再加
 -enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files

七、光照

看你的材质用的是什么, MeshBasicMaterial不需要光照
在这里插入图片描述

但是其他材质不加光源就是黑色的.

附-颜色color加载不出

color的值不要加引号, 跟着教程加了引号翻车.
去看了文档发现不该加引号:

const material = new THREE.MeshBasicMaterial({
    color: 0x049EF4,  //color值不能加引号, 不然会渲染默认白色
});