时间戳

首页 > 技术文章 > threejs深入纹理，立体场景cubeResolution（四）

threejs深入纹理，立体场景cubeResolution（四）

hsprout 2017-12-05 20:01 原文

 

在这个课程里主要完成讲解两个demo：

一个是电视墙：用视频做纹理

一，用视频做纹理

首先我们用video标签把视频源引入：

<video id="video" autoplay loop style="display:none">
    <source src="http://10.1.26.29:84/assets/video/sintel_trailer-480p.ogv" type="video/ogg">
    <source src="http://10.1.26.29:84/assets/video/sintel_trailer-480p.mp4" type="video/mp4">
    <source src="http://10.1.26.29:84/assets/video/sintel_trailer-480p.webm" type="video/webm">
</video>　　

  设置视频纹理

在这里引入一个概念mipmap：一个mipmap是一组纹理图片，每个图片的尺寸都是前一张图片的一半。这些图片实在加载纹理时创建的，可以生成较平滑的过滤效果。

注意：
1.由于我们的视频不是正方形，所以要保证材质不会生成mipmap。
2.由于材质变化得很频繁，所以我们需要设置简单高效的过滤器。LinearFilter 线性过滤

var video = document.getElementById('video');   //获取页面dom元素

videoTexture = new THREE.Texture(video);

//minFilter属性：指定纹理如何缩小。默认值：THREE.LinearMipMapLinearFilter
videoTexture.minFilter = THREE.LinearFilter;
//magFilter属性：指定纹理如何放大。默认值：THREE.LinearFilter
videoTexture.magFilter = THREE.LinearFilter;

videoTexture.format = THREE.RGBFormat;
videoTexture.generateMipmaps = false;

THREE.Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )

Image：这是一个图片类型，基本上它有ImageUtils来加载，如下代码
var image = THREE.ImageUtils.loadTexture(url); // url 是一个http://xxxx/aaa.jpg 的类似地址，javascript没有从本地加载数据的能力，所以没有办法从您电脑的C盘加载数据。

Mapping：是一个THREE.UVMapping()类型，它表示的是纹理坐标。下一节，我们将说说纹理坐标。

wrapS：表示x轴的纹理的回环方式，就是当纹理的宽度小于需要贴图的平面的宽度的时候，平面剩下的部分应该p以何种方式贴图的问题。

wrapT：表示y轴的纹理回环方式。

magFilter和minFilter表示过滤的方式，这是OpenGL的基本概念。当您不设置的时候，它会取默认值。

format：表示加载的图片的格式，这个参数可以取值THREE.RGBAFormat，RGBFormat等。THREE.RGBAFormat表示每个像素点要使用四个分量表示，分别是红、绿、蓝、透明来表示。RGBFormat则不使用透明，也就是说纹理不会有透明的效果。

type：表示存储纹理的内存的每一个字节的格式，是有符号，还是没有符号，是整形，还是浮点型。不过这里默认是无符号型（THREE.UnsignedByteType）。暂时就解释到这里，有需要时，我们在仔细分析，或者给作者留言询问。

anisotropy：各向异性过滤。使用各向异性过滤能够使纹理的效果更好，但是会消耗更多的内存、CPU、GPU时间。

 

　添加一个长方体作为电视墙，设置纹理时，我们采用两种纹理，有四面是纯色的，有两面是视频纹理，我们这里用数组materials存放六个面的纹理，然后通过THREE.MeshFaceMaterial（）设置每个面的纹理，你也可以自己设置，六个面都是视频纹理

var cubeGeometry = new THREE.BoxGeometry(1, 10, 20);
var cubeMaterial = new THREE.MeshBasicMaterial({map: videoTexture});

var materials = [];
materials.push(cubeMaterial);
materials.push(cubeMaterial);
for (var i = 1; i < 5; i++) {
    materials.push(new THREE.MeshLambertMaterial({color: 0xff0000}));
}
//MeshFaceMaterial这是一种容器，可以在该容器中为物体的各个表面上设置不同的颜色
var cube = new THREE.Mesh(cubeGeometry, new THREE.MeshFaceMaterial(materials));
cube.position.set(-10.05,0,0);
cube.rotation.x = -0.3;
cube.rotation.y = 23.5;
cube.name = 'cube';
scene.add(cube);

MeshFaceMaterial方法根据参数materials创建mesh(网格)的复合材质类型,参数material是一个Material类型的数组对象,网格中的三角面属性materialindex定义了该三角面使用的参数material中材质对象的索引号.　

添加控制器：

　　我们之前已经使用过一个可以缩放的控制器，这里我们使用一个可以旋转的控制器

　　用script标签引入一个库文件 OrbitControls.js

　　创建一个实例对象，就可以使用了。

orbit = new THREE.OrbitControls(camera);

   完整代码下载：github(threejs-five)  如果你觉得我写的对你有帮助的话，请给个star,谢谢

 

二，玻璃质感反射一个空间环境

首先我们从原理上进行分析，这种可以表现立体空间环境的实现，实际上是构造了一个大的正方体，(skybox)正方体的六个面的背景是符合实际场景的六张图片，在这个demo里，就是汽车内部的前后左右上下，然后我们在正方体的内部进行观看，从而达到立体环绕的效果；

 使用ShaderMaterial（共享材质）实现漫光反射，根据参数parameters创建为自定义着色器创建材质类型,这样的材质对象让用户扩充材质类型,有了无限的可能. 

参数的格式：
parameters = { 
   defines: { "label" : "value" }, 
   uniforms: { "parameter1": { type: "f", value: 1.0 }, "parameter2": { type: "i" value2: 2 } }, 
  
   fragmentShader: <string>, 
   vertexShader: <string>, 
  
   shading: THREE.SmoothShading, 
   blending: THREE.NormalBlending, 
   depthTest: <bool>, 
   depthWrite: <bool>, 
  
   wireframe: <boolean>, 
   wireframeLinewidth: <float>, 
  
   lights: <bool>, 
  
   vertexColors: THREE.NoColors / THREE.VertexColors / THREE.FaceColors, 
  
   skinning: <bool>, 
   morphTargets: <bool>, 
   morphNormals: <bool>, 
  
   fog: <bool> 
  }

　接下来我们从代码进行分析：

首先我们先引入正方体六个面的图片，依然是异步引入

var urls = [
            'http://10.1.26.29:84/assets/cubemap/car/right.png',
            'http://10.1.26.29:84/assets/cubemap/car/left.png',
            'http://10.1.26.29:84/assets/cubemap/car/top.png',
            'http://10.1.26.29:84/assets/cubemap/car/bottom.png',
            'http://10.1.26.29:84/assets/cubemap/car/front.png',
            'http://10.1.26.29:84/assets/cubemap/car/back.png'
        ];

　用THREE.ImageUtils.loadTextureCube（）方法载入纹理

   定义一个着色器，基于THREE.ShaderLib来创建自定义的ShaderMaterial材质

var cubemap = THREE.ImageUtils.loadTextureCube(urls);
     cubemap.format = THREE.RGBFormat;
     //一个特别的着色器（Three.ShaderLib[“cube”]）,结合THREE.ShaderMaterial类，我们可以基于CubeMap对象创建一个环境
     var shader = THREE.ShaderLib["cube"];
     shader.uniforms["tCube"].value = cubemap;

　　//ShaderMaterial创建自己的着色器，要使用ShaderMaterial，必须传入两个着色器：fragmentShader，vertexShader
     var material = new THREE.ShaderMaterial({
        fragmentShader: shader.fragmentShader,     //定义每个传入的像素的颜色
        vertexShader: shader.vertexShader,         //允许你修改每一个传入的顶点的位置
        uniforms: shader.uniforms,                 //该属性可以向你的着色器发送消息，将同样的消息发送到每个顶点和片段
        depthWrite: false,
        side: THREE.DoubleSide　　　　　　　　       //实现一个立体双面的效果
});　　

接下来，我们就可以创建天空盒子

var skybox = new THREE.Mesh(new THREE.BoxGeometry(10000, 10000, 10000), material);
scene.add(skybox);

　

CubeCamera方法根据 near, far ,cubeResolution 生成立方体相机.CubeCamera对象的功能函数采用 定义构造的函数原型对象来实现. CubeCamera经常用来创建天空盒子.由六张图片拼接成一个场景. 

near 指明相对于深度剪切面的近的距离，必须为正数,可选参数,如果未指定,初始化为0.1

far 指明相对于深度剪切面的远的距离，必须为正数,可选参数,如果未指定,初始化为2000

cubeResolution 设置立方体的宽度

Matrix4 返回PerspectiveCamera,透视投影相机

cubeCamera = new THREE.CubeCamera(0.1, 20000, 256);
cubeCamera.renderTarget.minFilter = THREE.LinearMipMapLinearFilter;
scene.add(cubeCamera);

　　接下来，我们可以创建镜面反射的立体图形

 先以球体为例，

我们用立体相机的渲染目标，cubeCamera.renderTarget，也就是整个环境

var sphereGeometry = new THREE.SphereGeometry(4, 15, 15);
////envMap 设置环境贴图,默认是null
var dynamicEnvMaterial = new THREE.MeshBasicMaterial({envMap: cubeCamera.renderTarget, side: THREE.DoubleSide});
sphere = new THREE.Mesh(sphereGeometry, dynamicEnvMaterial);
sphere.name = 'sphere';
scene.add(sphere);

　 再添加一个旋转立方体，可以显示变化的环境

 用 cubemap作为纹理贴图，就是上面加载的六张图片

var cubeGeometry = new THREE.BoxGeometry(5, 5, 5);
var envMaterial = new THREE.MeshBasicMaterial({envMap: cubemap, side: THREE.DoubleSide});
var cube = new THREE.Mesh(cubeGeometry, envMaterial);
cube.name = 'cube';
scene.add(cube);
cube.position.set(-10, 0, 0);

　最后，同样使用上面提到的控制器：OrbitControls

orbit = new THREE.OrbitControls(camera);

　　

完整代码下载： github(threejs-six)  如果你觉得我写的对你有帮助的话，请给我个star,

　

　

推荐阅读