浙江久天建设有限公司网站,网站域名的选择,平台搭建大概多少钱,湘潭网站建设 尖端磐石网络一、贴图
贴图#xff08;Texture Mapping#xff09;#xff0c;也翻译为纹理映射#xff0c;“贴图”这个翻译更直观。
贴图#xff0c;就是把图片贴在 3D 物体材质的表面#xff0c;让它具有一定的纹理#xff0c;来为 3D 物体添加细节的一种方法。这使我们能够添加…一、贴图
贴图Texture Mapping也翻译为纹理映射“贴图”这个翻译更直观。
贴图就是把图片贴在 3D 物体材质的表面让它具有一定的纹理来为 3D 物体添加细节的一种方法。这使我们能够添加表面细节而无需将这些细节建模到我们的3D对象中从而大大精简3D模型的多边形边数提高模型渲染性能。
二、准备基础代码
在场景里创建一个立方体。
为了方便观察效果还添加了网格辅助和轨道控制器。
HTML
script typeimportmap{imports:{three:./js/three.module.min.js,addons/:./js/jsm/}}
/script
script typemodule srcjs/myjs.js/script
JS
import * as THREE from three;
import { OrbitControls } from addons/controls/OrbitControls.js;let winH window.innerHeight;
let winW window.innerWidth;
// 场景
const scene new THREE.Scene();
scene.background new THREE.Color(#cccccc);// 物体
const geometry new THREE.BoxGeometry(1,1,1);
const material new THREE.MeshBasicMaterial({color:#ff3300
});
const box new THREE.Mesh( geometry, material );
box.position.set(0,0,0);
scene.add( box );// grid
const gridHelper new THREE.GridHelper(10,10);
scene.add( gridHelper);// 相机
const camera new THREE.PerspectiveCamera(50, winW/winH, 1, 1000);
camera.position.set(0,5,5);
camera.lookAt(scene.position);// 渲染器
const renderer new THREE.WebGLRenderer();
renderer.setSize( winW, winH );
document.body.appendChild( renderer.domElement );
renderer.render( scene, camera );// 轨道控制器
const controls new OrbitControls( camera, renderer.domElement );
controls.update();// 动画
function animateFun(){controls.update(); // 现在动画里更新控制器// 渲染renderer.render( scene, camera);requestAnimationFrame(animateFun);
}
animateFun(); 三、纹理贴图示例
纹理贴图用到的是基础材质 THREE.MeshBasicMaterial 和 THREE.TextureLoader。 THREE.MeshBasicMaterial 基础材质是不受光照影响可以直接给物体设置颜色也可以将图片贴到物体表面。 THREE.TextureLoader纹理加载器。纹理贴图加载器TextureLoader的load() 方法加载一张图片可以返回一个纹理对象Texture纹理对象Texture可以作为模型材质贴图 .map 属性的值。
修订代码为立方体的材质meterial添加纹理贴图。
const texture new THREE.TextureLoader().load(../images/woods2.jpg);
const material new THREE.MeshBasicMaterial({map:texture
});
这里用的纹理图是 效果 四、透明贴图示例
如果贴图要透明可以设置材质的透明属性 transparent:true;。
同时要准备好 alpha 图片做 alpha贴图的纹理。 alpha 图片其实就是一个黑白图跟 PS 蒙版是一个道理黑色不可见白色可见灰色代表半透明。 这里使用两张素材如下 修改 meterial 代码如下两张纹理图都要加载进去。
const texture new THREE.TextureLoader().load(../images/head1.jpg);
const textureAlpha new THREE.TextureLoader().load(../images/head2.jpg);
const material new THREE.MeshBasicMaterial({map:texture, // 纹理贴图alphaMap:textureAlpha, // alpha 贴图transparent:true // 开启透明属性
}); 为什么立方体只有一半
这是因为纹理渲染面属性值 side 有四个值 THREE.FrontSide默认。只渲染前面。 THREE.BackSide只渲染后面 THREE.DoubleSide前后面都渲染。 THREE.TwoPassDoubleSide将按前后顺序分两次渲染双面透明材料以减轻透明伪影。
默认 meterial 的“平面”是只渲染前面因此立方体转向后背面的图是看不到的。把 side 属性改为 THREE.DoubleSide 即可。
const material new THREE.MeshBasicMaterial({map:texture,transparent:true,alphaMap:textureAlpha,side: THREE.DoubleSide // 前后面都渲染。
}); 五、环境贴图示例
环境贴图environment mapping顾名思义就是给材质贴上环境的画面。
这个主要让材质反映出周围的画面。比如在一个草地上让一个立方体映出草地周围的画面。
1. 给场景添加立方纹理
修改前面的基础结构代码给场景添加立方纹理把场景设置为一个公园。
// 场景
const scene new THREE.Scene();
// 给场景添加立方纹理
const cubeTexture new THREE.CubeTextureLoader().setPath(../texture3/).load([posx.jpg,negx.jpg,posy.jpg,negy.jpg,posz.jpg,negz.jpg
]);
scene.background cubeTexture; 这里公园用的素材是官方案例 \examples\textures\cube\Park2 里面的素材。 2. 给材质添加环境贴图
const material new THREE.MeshBasicMaterial({envMap: cubeTexture // 给材质应用环境贴图此时的环境的贴图就是立方纹理所以就使用立方纹理。
}); 也可以同时使用纹理贴图和环境贴图。
const material new THREE.MeshBasicMaterial({map:texture,envMap: cubeTexture
});
