项目实训(六):如何优雅地(用纹理贴图)在网页上展示一张图片？

想要在网页上展示一张图片，可用的方法有很多，最经典常用的应该就是html里的<img>标签。但是经过试验，<img>标签的交互设计也要使用html的功能，使用js写会非常的麻烦，所以就考虑是否能有方法只用js代码来展示图片。

因为刚好最近在用three.js，于是便产生了一种思路，设计一个立方体（或者一个平面），然后把要展示的图片以贴图的方式贴上去，以达到展示的目的。刚好这样就可以使用three.js中的orbitcontrols来和图片进行交互，不需要自己再写交互逻辑了。光照,相机,渲染场景等模块继续使用之前的.

下面的代码是three.js中给物体贴图的代码：

textureLoader.load('13157chya.jpg', function(texture) {
            var material = new THREE.MeshLambertMaterial({
                // color: 0x0000ff,
                // 设置颜色纹理贴图：Texture对象作为材质map属性的属性值
                map:texture,//设置颜色贴图属性值
            }); //材质对象Material
var mesh = new THREE.Mesh(geometry, material);

在完成上述的操作后，我发现图片并不会在打开页面时立刻出现，在网上搜寻一番后，我发现原来因为html需要现场加载图片到网页，所以有可能代码已经跑完了，但是图片还没加载好，所以导致了图片不会立刻出现。解决这个问题，需要使用onload函数：

    var image = new Image();
    image.src = 'name.jpg';//加载图片
    image.onload = function(){
    //code here
}

这个函数的意义是，框中的代码只会在image加载完毕之后才会运行，这样，图片就会在打开时立刻出现在网页上了。

接下来要解决的就是比例问题了,我们知道,我们创造立方体或平面时,它的参数就已经确定下来了,但是我们每张需要展示的图片,它们的分辨率都是不同的.最终的解决方法是:在onload()函数的代码区域中,获取载入图片的宽和高,然后利用这个刚刚新鲜获得参数去定义立方体(平面)的长宽.

 var img_width = image.width;
 var img_height = image.height;
 var geometry = new THREE.BoxGeometry(img_width, img_height, 100); //创建一个立方体几何对象Geometry

如此一来,我们就可以完美的展示出想要的图片啦~