在使用three.js加载纹理时，遇到纹理显示为黑色的困扰。问题可能涉及图片路径、TextureLoader的异步加载及光源设置。解决办法包括配置Chrome允许本地文件访问，确保相机对象在异步加载纹理的函数内，并正确设置光源。
什么是纹理？
简单理解就是贴在几何体或平面的纹路，就比如一个杯子上的图案。
菜鸟（包括我）根据three.js教程上代码敲上去之后，纹理没有效果；查阅了半天，总结有以下几个原因：
1、图片路径：谷歌浏览器需要在属性中按照如图配置 --allow-file-access-from-files(注意前面有一个空格)：
Chrome浏览器默认是不能访问本地文件的，这是浏览器的安全限制；这样设置即可访问本地文件。
2、new THREE.TextureLoader().load()方法是异步，即所有代码执行完成后再执行里面的代码，并且教程的代码是不完整的，你的相机对象呢？所以相机对象也要添加到这个异步方法里面。
3、光源的设置：找了好久的问题，为什么是黑色？是不是没有光照啊，然后把光源添加到异步函数中，ok，搞定！
以下为完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>创建纹理贴图</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
body {
margin: 0; }
canvas {
width: 100%; height: 100% }
</style>
最低0.47元/天 解锁文章
6920
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
