WebGL three.js学习笔记 纹理贴图模拟太阳系运转

纹理贴图的应用以及实现一个太阳系的自转公转

点击查看demo演示

demo地址：https://nsytsqdtn.github.io/d...

three.js中的纹理

纹理贴图是通过将图像应用到对象的一个或多个面，来为3D对象添加细节的一种方法。
可以使用TextureLoader类的load方法来加载纹理

function loadImgTexture(){
    var loader = new THREE.TextureLoader();
    loader.load("metal-rust.jpg",function(texture){
        var geometry = new THREE.BoxGeometry(10,10,10);
        var material = new THREE.MeshBasicMaterial({color:0x739783,map:texture});
        mesh = new THREE.Mesh(geometry,material);
        scene.add(mesh);
    })
}

实现效果如下：

八大行星的贴图资源网上到处都可以找到，这里给一个还不错的地址：
https://tieba.baidu.com/p/487...

完整太阳系代码：

注意从本地读取图片或者其他文件时，浏览器一般是不允许的，所以会出现加载不了纹理或者背景图片的情况，只能在Chrome浏览器的属性--目标的最后，加上 --allow-file-access-from-files（前面有一个空格），就可以从这个打开的快捷方式中去读取到本地文件，如果是Edge浏览器似乎就直接可以。也可以使用npm或者tomcat搭建一个本地服务器，然后把图片放进去就可以直接读取了。