webgl设置金属材质

1、选择合适的纹理图像：例如环境贴图、法线贴图、遮罩贴图等，来模拟物体表面的金属纹理和反射效果。

2、编写着色器程序：编写顶点着色器(VS)和片元着色器(FS)来描述金属物体材质的表现，例如反光度，光泽度等。

3、设置Uniform变量：设置一些Uniform变量来控制金属材质的表现效果，例如环境光反射度、镜面反射度等等。

4、绑定纹理：将纹理图像绑定到WebGL渲染的材质上。

5、调用Draw函数：调用gl.drawArrays()函数或gl.drawElements()函数，将渲染的结果显示在WebGL画布上。

如何在网页里插入3D模型并进行互动展示？

其实官方已经给出了插入网页的方法但是没有具体步骤，而且软件自动生成的代码有问题，不能自适应屏幕大小。所以很多没有接触过网页设计的朋友一头雾水不会修改。

首先需要安装一个Dreamweaver软件用于修改网页代码

在模版之家下载了如下图所示的一个网站，我们的目标是把3D模型插入到红框的位置。

打开渲染完成后的文件把红框中的两个文件复制到网站根目录

用Dreamweaver打开文件中的index.html（就是网站的首页）并点击红框位置的实时视图菜单（好找到要修改的位置以及实时看到效果）

在实时视图中点击下目标框体即可自动定位至要修改的目标代码

这时候我们用下列代码来替换目标位置的代码，代码中红色的部分需要根据自己的命名修改



不知道为什么直接贴代码无法显示只能用图片代替了，需要代码可以去下面的示例下载

修改完成后按下F12保存并预览，出现红框中的图案就表明成功了。

在图片范围内拖动鼠标即可进行互动展示了。

同样的方法修改掉另外两个位置后得到如下页面。

还可以通过手机查看也可以分享到微信朋友圈，只要支持HTML5的浏览器都能查看。。。

---