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

Pandaaa 发布于2019-08-23 17:06 / 1940人阅读

摘要：纹理贴图的应用以及实现一个太阳系的自转公转点击查看演示地址中的纹理纹理贴图是通过将图像应用到对象的一个或多个面，来为对象添加细节的一种方法。

纹理贴图的应用以及实现一个太阳系的自转公转 点击查看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...

完整太阳系代码：




    
    Three.js

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

服务器托管私有云 three.js three.js极客 three.js教程 three.js cdn

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103811.html

【Three.js】Three.js学习记录

摘要：上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。接下来预先恭喜你，你可以成为这网页世界的一个小上帝。使用可以向场景中发射光线。在下述案例中，从摄像机的位置向场景中鼠标的点击位置发射光线。先得摆出几个关键词：场景、灯光、模型、材质、贴图与纹理、相机、渲染器。然后我开始装模作样地解释：上帝说，要有场景！于是就有了场景，场景去纳这万事万物。上帝说，要有光！于是就有了光...

chanthuang 2019-08-23 14:46 评论0 收藏0
【Three.js】Three.js学习记录

摘要：上帝觉得缺少了些生气，便用泥巴捏了一个小人儿，不叫亚当，她叫小芳。接下来预先恭喜你，你可以成为这网页世界的一个小上帝。使用可以向场景中发射光线。在下述案例中，从摄像机的位置向场景中鼠标的点击位置发射光线。先得摆出几个关键词：场景、灯光、模型、材质、贴图与纹理、相机、渲染器。然后我开始装模作样地解释：上帝说，要有场景！于是就有了场景，场景去纳这万事万物。上帝说，要有光！于是就有了光...

李涛 2019-08-02 14:06 评论0 收藏0
【带着canvas去流浪（11）】Three.js入门学习笔记

摘要：动画的更新动画的更新实际上和二维动画是一样的，也是通过和逐帧动画来实现的。相当于三维建模软件中的根据样条曲线生成回转体，构造函数的参数中没有回转轴，此处官方文档中有说明车削是绕着轴来进行旋转的。 showImg(https://segmentfault.com/img/bVbtnTv); 示例代码托管在：http://www.github.com/dashnowords/blogs博客...

AlanKeene 2019-08-05 17:40 评论0 收藏0
现在做 Web 全景合适吗？

摘要：全景在以前带宽有限的条件下常常用来作为街景和全景图片的查看。后面，我们来了解一下，如何在端实现全景视频。现在对支持度也不是特别友好，但是，对于全景视频来说，在机器换代更新的前提下，全景在性能方面的瓶颈慢慢消失了。 Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验，通过简单的操作，自由的查看周围的物体。...

stonezhu 2019-08-05 12:43 评论0 收藏0
现在做 Web 全景合适吗？

摘要：全景在以前带宽有限的条件下常常用来作为街景和全景图片的查看。后面，我们来了解一下，如何在端实现全景视频。现在对支持度也不是特别友好，但是，对于全景视频来说，在机器换代更新的前提下，全景在性能方面的瓶颈慢慢消失了。 Web 全景在以前带宽有限的条件下常常用来作为街景和 360° 全景图片的查看。它可以给用户一种 self-immersive 的体验，通过简单的操作，自由的查看周围的物体。...

psychola 2019-08-21 18:36 评论0 收藏0