zoukankan      html  css  js  c++  java
  • Three.js 纹理贴图1--旋转的地球

    纹理贴图是Threejs一个很重要的内容,游戏、产品720展示、物联网3D可视化等项目程序员加载模型的同时同时需要处理纹理贴图。

    纹理UV坐标和顶点位置坐标是一一对应关系,这也就是为什么一张图片可以映射到一个模型的表面,只要把图片的每个纹理坐标和模型的顶点位置建立一对一的关系,就可以实现图像到模型的映射。

    什么是UV坐标

    简而言之就是贴图按照某种特定的算法影射到模型表面的依据。U和V分别是图片在显示器水平、垂直方向上的坐标,取值一般都是0~1。

    下面的例子会加深大家的理解,当我设置uv坐标为图片右上角时,几何体为一个矩形平面,贴图就将图片的右上角附在几何体上,而不是完整的图片。

     /**纹理坐标*/
     var uvs = new Float32Array([
      0.5,0.5, //图片左下角
       1,0.5, //图片右下角
       1,1, //图片右上角
       0.5,1, //图片左上角
     ]);

    一般Threejs的球体、圆柱等几何体创建的时候,都会通过特定算法自动生成几何体的UV坐标。 

    完整的效果图

    在线演示地址

    主要代码:

                var geometry = new THREE.SphereGeometry(200, 60, 60);
                // TextureLoader创建一个纹理加载器对象,可以加载图片作为几何体纹理
                var textureLoader = new THREE.TextureLoader();
                // 执行load方法,加载纹理贴图成功后,返回一个纹理对象Texture
                textureLoader.load('./img/earth.jpg', function(texture) {
                  var material = new THREE.MeshLambertMaterial({
                    // 设置颜色纹理贴图:Texture对象作为材质map属性的属性值
                    map: texture,//设置颜色贴图属性值
                  }); //材质对象Material
                  var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
                  scene.add(mesh); //网格模型添加到场景中
                  //添加帧渲染
                  function render() {
                      renderer.render(scene, camera); //执行渲染操作
                      mesh.rotateY(0.01);
                      requestAnimationFrame(render); //请求再次执行渲染函数render
                  }
                  render();
                })
  • 相关阅读:
    Java Output流写入包装问题
    SpringBoot项目单元测试不经过过滤器问题
    SpringSecurity集成启动报 In the composition of all global method configuration, no annotation support was actually activated 异常
    JWT jti和kid属性的说明
    Maven 排除依赖
    第五章 基因概念的发现
    第三章 孟德尔遗传的拓展
    第二章 孟德尔遗传
    第一章 引言
    GWAS全基因组关联分析
  • 原文地址:https://www.cnblogs.com/liangtao999/p/13503924.html
Copyright © 2011-2022 走看看