什么是纹理?
简单理解就是贴在几何体或平面的纹路,就比如一个杯子上的图案。
菜鸟(包括我)根据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>