Threes.js入门篇之8 - 材质与纹理

最新推荐文章于 2024-06-02 16:31:37 发布

linolzhang

最新推荐文章于 2024-06-02 16:31:37 发布

阅读量991

点赞数 1

分类专栏： WebGL 文章标签： Three.js入门 Three.js基础 Three.js 材质纹理

本文链接：https://blog.youkuaiyun.com/linolzhang/article/details/61218857

版权

本文介绍了Three.js中材质和纹理的概念，强调它们在创建3D对象视觉效果中的关键作用。通过实例`canvas_material.html`，展示了如何应用材质和纹理来改变3D对象的颜色和外观。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

材质是指几何对应的颜色信息，想让一个对象最终呈现出你所希望的样子，其中最重要的一个因素就是材质。

来看一下例子 “canvas_material.html”

	// Spheres
	var geometry = new THREE.SphereGeometry( 100, 14, 7 );
	var textureLoader = new THREE.TextureLoader();

	var earthTexture = textureLoader.load( 'textures/land_ocean_ice_cloud_2048.jpg' );  // 地球纹理加载

	var envMap = textureLoader.load( 'textures/envmap.png' );                           // 环境贴图加载
	envMap.mapping = THREE.SphericalReflectionMapping;

	var materials = [

		new THREE.MeshBasicMaterial( { color: 0x00ffff, wireframe: true, side: THREE.DoubleSide } ),  // 颜色材质
		new THREE.MeshBasicMaterial( { color: 0xff0000, blending: THREE.AdditiveBlending } ),
		new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ),
		new THREE.MeshLambertMaterial( { color: 0xffffff, overdraw: 0.5 } ),
		new THREE.MeshNormalMaterial( { overdraw: 0.5 } ),
		new THREE.MeshBasicMater