美文网首页
three.js浅谈@材质

three.js浅谈@材质

作者: 琙灵 | 来源:发表于2018-09-20 16:34 被阅读0次

材质种类

上一节介绍了光源,但是表现一个物体的表面仅仅需要光源是不够的,光源与材质进行影响,会表现出不同的表面
材质大致分为以下几种

  1. MeshBasicMaterial
  2. MeshDepthMaterial
  3. MeshLambertMaterial
  4. MeshNormalMaterial
  5. MeshPhongMaterial
  6. MeshStandardMaterial
  7. MeshPhysicalMaterial
  8. MeshToonMaterial

材质总类实在太多了,我们介绍几种常用的来管中窥豹

MeshBasicMaterial

这是一种基础材质,光照在上面处处都会表现出一样的颜色,此种材质是其他几种材质的基础

const mat = new THREE.MeshBasicMaterial({
  ...
});

以下是材质构造函数的部分参数

  • color — 一个十六进制的颜色值。默认为 0xffffff (白色)。
  • map — 设置纹理图。 默认情况下是空的 (null)。
  • aoMap — 设置 AO 贴图。默认情况下为空(null)。
  • aoMapIntensity — 设置AO贴图的强度。 默认情况下为 1.
  • specularMap — 设置镜面贴图。默认情况下为空(null)。
  • alphaMap — 设置 alpha 贴图(alpha 贴图是一种灰度纹理,可以控制表面的不透明性(黑色:完全透明;白色:完全不透明))。默认情况下为空(null)。
  • envMap — 设置环境映射。默认情况下为空(null)。
  • combine — 如何将表面颜色的结果与环境地图相结合。默认情况下使用的是 THREE.MultiplyOperation;而它还有其他两种结合形式:THREE.MixOperation 和 THREE.AddOperation。如果使用混合( mix )的方法进行结合,使用反射率混合两种颜色。
  • reflectivity — 设置反射率。默认为 1.
  • refractionRatio — 环境贴图的折射率默认使用 THREE.CubeRefractionMapping 。默认为 0.98。
  • fog — 确定材料的颜色是否受雾化的影响,这是一个布尔值。默认为 true。值得注意的是它被 *CanvasRender 所忽略,想要这个参数有效需要使用 WebGLRender 。
  • shading — 定义阴影类型。默认为 THREE.SmoothShading.
  • wireframe — 是否将几何体呈现为线框的形式,这是一个布尔值。默认为 false。
  • wireframeLinewidth — 设置的是线条的宽度。默认为 1。不过很遗憾的是,在 Windows 上这个值无论设置多少都只能显示为 1 。
  • wireframeLinecap — 设置的是线条端点的样式。 默认为 round 。这个值只在 CanvasRender 上有效,在 * WebGLRender 上并不会有任何改变。
  • wireframeLinejoin — 设置的是线条交点的样式。 默认为 round。这个值只在 CanvasRender 上有效,在 * WebGLRender 上并不会有任何改变。
  • vertexColors — 定义定点的颜色,其中有三个选项 THREE.NoColors, THREE.FaceColors 和 THREE.VertexColors。默认是 THREE.NoColors。
  • skinning — 确定材料是否使用 skinning,这是一个布尔值。默认为 false。
  • morphTargets — 确定材料是否使用了变形目标。默认为 false。

MeshLambertMaterial

这种材质是一种漫反射材质,表现类型和基础材质基本类似,但是相比基础材质处处的颜色相同,漫反射材质会和光源产生影响,不同光照强度会产生不同的反射强度
并且此种材料多了个重要参数

  • emissive:设置自发光颜色,值得注意的是材质其实并不会发光,而是在反光中会带有这种颜色


    不带自发光
    带红色自发光,强度为0.3

MeshPhongMaterial

这种材料是一种镜面反射的材料可以用于表现金属等具有镜面反射的性质
这种材质在MeshLambertMaterial多了种特有的参数

  • specular 镜面反色光颜色


    image.png

参考代码

const THREE= window.THREE=require('three')
const scene = new THREE.Scene();//创建一个场景
const camera = new THREE.PerspectiveCamera(50, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z=150//因为刚刚创建的对象都会位于原点,我们需要把相机拉远一点
//创建一个渲染器,并设置大小,然后把这个渲染器加入到dom中
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const light = new THREE.DirectionalLight('#fff',1)
light.position.set(-100,-69,20)//光方向

const mat = new THREE.MeshPhongMaterial({
    color: new THREE.Color("rgb(220,76,65)"),
    shininess:10,
    specular:new THREE.Color("rgb(220,76,65)"),
    emissive:new THREE.Color("rgb(6,53,53)"),
    shading: THREE.FlatShading 
});
// const mat = new THREE.MeshLambertMaterial({
//     color: new THREE.Color("rgb(106,153,153)"),
//     emissive: new THREE.Color("rgb(220,76,65)"),
//     emissiveIntensity: 0.3
// });
// const mat = new THREE.MeshBasicMaterial({
//     color: new THREE.Color("rgb(106,153,153)"),
// });
//创建一个多面体模型,并将模型和材质结合
const ballGeometry = new THREE.IcosahedronGeometry(50,2);
const ball = new THREE.Mesh( ballGeometry, mat );

scene.add(light)//场景中加入光源
scene.add( camera )//场景中加入相机
scene.add( ball )//场景中加入多面体

renderer.render(scene, camera);

参考

  1. https://hopepdm.github.io/blog/archivers/stuJs14
  2. https://zhuanlan.zhihu.com/p/25939826
  3. http://blog.bbadtimes.com/2017/10/29/401
  4. https://blog.csdn.net/csdn2193714269/article/details/77807798
  5. https://www.cnblogs.com/w-wanglei/p/6736615.html
  6. http://www.yanhuangxueyuan.com/Three.js_course/material.html

相关文章

  • three.js浅谈@材质

    材质种类 上一节介绍了光源,但是表现一个物体的表面仅仅需要光源是不够的,光源与材质进行影响,会表现出不同的表面材质...

  • Material 材质

    材质决定了物体是否透明颜色等 three.js 中涉及的主要几种材质 MeshBasicMaterialcolor...

  • three.js之材质

    材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性。通过设置材质可以改变物体的颜色、纹理贴图、...

  • HTREE.JS1.0 Hello three.js

    1、Hello Three.js程序 2、添加灯光效果 在场景里添加一个光源 将材质改成对光源有效果的材质 Mes...

  • spriteMaterial (rotate) 旋转问题

    spriteMaterial是Three.js中的点精灵材质。利用它我们可以在场景中加载图片,贴上纹理。并且效果很...

  • three.js(6)-点材质和线材质

    下面这张图囊括了目前所有的材质。今天我们说说点材质和线材质。 点材质 点材质,顾名思义,就是用点作为物体的材质。 线材质

  • three.js(35)-金属材质

    常用材质 点材质PointsMaterial线材质LineBasicMaterial:线基础材质LineDashe...

  • three.js浅谈@初识three.js

    three之前的准备 three.js是webGL的一个高级工具集,webGL则是从openGL ES 发展而来的...

  • three.js(4)-网格Lambert材质

    有关物体的材质,我们前面用了MeshBasicMaterial来体现。 MeshBasicMaterial就是基础...

  • Three.js学习规划

    学习目标 熟悉并掌握Three.js中的基本概念,主要包括场景,摄像机,灯光,渲染器,物体对象,几何体,材质,动画...

网友评论

      本文标题:three.js浅谈@材质

      本文链接:https://www.haomeiwen.com/subject/dskbnftx.html