WebGL利用Three.js库写凹凸纹理

最新推荐文章于 2024-06-04 18:00:00 发布

一个追逐自我的程序员

最新推荐文章于 2024-06-04 18:00:00 发布

阅读量1.1k

点赞数

分类专栏： WebGl 文章标签： shader webgl

本文链接：https://blog.csdn.net/qq_34739497/article/details/70308364

版权

WebGl 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

又是很久没更新，我不敢说是因为其它事，但是自己变懒了这个不可否认，做技术的如果做不出成果，一直潜心研究的人恐怕很少吧，好了废话不多说。

Three.js库作为webgl封装好的一个库，极大便利了webgl的开发，否则我们画一个立方体都要由12个三角形组成，当然我们也必须得懂webgl底层的东西，这些是我们进一步学习的基础，最近几天刚接触three库，被它所能实现的功能震撼到了，个人感觉它带入了面向对象的色彩，比如摄像机、几何体、材质、场景、灯光等等都被几个代码封装好了。今天我们要说的便是凹凸纹理，凹凸纹理的作用是增加了纹理的高度，使得画面更加真实。这里推荐一个中文网站webgl中文网，里面有很多的教程。国外也有一个网站shadertoy也有丰富的学习资料。

凹凸纹理实现效果：

下面粘贴上代码：

var scene=new THREE.Scene();
var camera=new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);
var WebGLRenderer=new THREE.WebGLRenderer();
WebGLRenderer.setClearColor(new THREE.Color(0x000000,1.0));
WebGLRenderer.setSize(window.innerWidth,window.innerHeight);
WebGLRenderer.shadowMapEnabled=true;

代码其实很好理解，就是创建一个场景、相机、和一个渲染器，然后打开阴影开关。

 var sphere1 = createMesh(new THREE.BoxGeometry(15, 15, 15), "q.jpg");
    sphere1.rotation.y = -0.5;
    sphere1.position.x = 5;
    scene.add(sphere1);

  var floorTex = THREE.ImageUtils.loadTexture("f.png");
    var plane = new THREE.Mesh(new THREE.BoxGeometry(200, 100, 0.1, 30), new THREE.MeshPhongMaterial({
        map: floorTex
    }));
  plane.position.y = -7.5;
    plane.rotation.x = -0.5 * Math.PI;
    scene.add(plane);

    camera.position.x = 0;
    camera.position.y = 15;
    camera.position.z = 30;
  camera.lookAt(new THREE.Vector3(0, 0, 0));
    var ambiLight = new THREE.AmbientLight(0x242424);
    scene.add(ambiLight);
    var light = new THREE.SpotLight();
    light.position.set(0, 30, 30);
  light.intensity = 1.5;
    scene.add(light);

    document.body.appendChild(WebGLRenderer.domElement);

    var step = 0;

    render();
function createMesh(geom,imageFile)
{
	var texture=THREE.ImageUtils.loadTexture("./"+imageFile);
	geom.computeVertexNormals();
	var mat=new THREE.MeshPhongMaterial();
	mat.map=texture;
	var mesh=new THREE.Mesh(geom,mat);
	return mesh;
}
function render()
{
	requestAnimationFrame(render);
	WebGLRenderer.render(scene,camera);
	
}

这里就是创建一个box几何体，然后用图片作为纹理贴图，以及位置、大小设置，我这里就不一一细细说明，中文网上教程都有。

链接：http://pan.baidu.com/s/1o8NSEIA 密码：doqj这是纹理资源，包括后面几篇资源。