【WebGL入门4】纹理与canvas

最新推荐文章于 2024-08-22 00:30:00 发布

weixin_30617737

最新推荐文章于 2024-08-22 00:30:00 发布

阅读量130

点赞数

原文链接：http://www.cnblogs.com/yanky/p/8857553.html

版权

关于webgl的纹理映射和opengl类似，通过将object的坐标和纹理坐标一一对应实现。其中核心代码：

var geometry = new THREE.CubeGeometry(150, 150, 150);            //创建一个物体
texture = new THREE.Texture( canvas);                                           //将物体画到canvas上面，再load到texture上
var material = new THREE.MeshBasicMaterial({map:texture});       //将对应好的坐标一一map过去
texture.needsUpdate = true;                                                             //实时渲染必须要加上这一句，需要随时update。
mesh = new THREE.Mesh( geometry,material );                             //添加mesh
scene.add( mesh );

流水线：在canvas上面画图，将canvas传递给THREE.Texture纹理，将纹理传递给THREE.MeshBasicMaterial材质，最后构造THREE.Mesh。

注意：默认情况下，纹理被均匀分配到四边形的各个顶点上。所以完整的：THREE.Texture = function ( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )，不赋值就是默认情况。

转载于:https://www.cnblogs.com/yanky/p/8857553.html