《Three.js开发指南第2版》读书笔记2

内容来源于书籍【美】乔斯.德克森著，杨芬、赵汝达 译的《Three.js开发指南第2版》 以下为读书笔记，仅供学习

随书源码地址：https://github.com/josdirksen/learning-threejs

[TOC]

第 3 章 学习使用 Three.js 中的光源

不同种类的光源

THREE. AmbientLight

颜色将应用到全局，将场景中所有物体渲染为相同颜色

THREE. SpotLight 光源来产生阴影

THREE. Color

THREE. PointLight

THREE. PointLight 从特定的一点向所有方向发射光线，点光源

var pointColor = '#ccffcc';
var pointLight = new THREE.PointLight(pointColor);
pointLight.position.set(10, 10, 10);
pointLight.intensity = 2.4;
pointLight.distance = 100;
scene.add(pointLight);

THREE. SpotLight

从特定一点发射锥形光线，聚光灯光源
其他属性同 THREE. PointLight

var pointColor = '#ffffff';
var spotLight = new THREE.spotLight(pointColor);
spotLight.position.set(-40, 60, -10);
spotLight.castShadow = true;
spotLight.target = plane;
var target = new THREE.Object3D();
target.position = new THREE.Vector3(5, 0, 0);
spotLight.target = target;

scene.add(spotLight);

阴影使用可能遇到的问题

• 阴影模糊，增加 shadowMapWidth 和 shadowMapHeight，或保证用于计算阴影区域紧密包围在对象周围（shadowCameraNear, shadowCameraFar, shadowCameraFov）
• 产生阴影与接收阴影设置，光源生成阴影，几何体是否接收或投射阴影 castShadow 和 receiveShadow
• 薄对象渲染阴影时可能出现奇怪的渲染失真，可通过 shadowBias 轻微偏移阴影来修复
• 调整 shadowDarkness 来改变阴影的暗度
• 阴影更柔和，可在 THREE. WebGLRenderer 设置不同 shadowMapType。默认 THREE. PCFShadowMap, 柔和：PCFSoftShadowMap

THREE. DirectionalLisht

从而为平面发射光线，光线彼此平行，平行光源，光强是一样的
其他属性同 SpotLight

//阴影区域
directionalLight.shadowCameraNear = 2;
directionalLight.shadowCameraFar = 200;
directionalLight.shadowCameraLeft = -50;
directionalLight.shadowCameraRight = 50;
directionalLight.shadowCameraTop = 50;
directionalLight.shadowCameraBottom = -50;

//创建更好的阴影效果
directionalLight.shadowCascade = true;
//将阴影生成分裂，靠近摄像机十点会产生更具细节的阴影，远离摄像机十点阴影的细节更少
directionalLight.shadowCascadeCount;

shadowCascadeBias;
shadowCascadeWidth;
shadowCascadeHeight;
shadowCascadeNearZ;
shadowCascadeFarZ;

THREE. HemisphereLight

户外光照效果

var hemiLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 0.6);
hemiLight.position.set(0, 500, 0);
scene.add(hemiLight);

THREE. AreaLight

长方体的发光区域
使用 WebGLDeferredRenderer

<script type="text/javascript" src="../libs/WebGLDeferredRenderer.js"></script>
<script type="text/javascript" src="../libs/ShaderDeferred.js"></script>
<script type="text/javascript" src="../libs/RenderPass.js"></script>
<script type="text/javascript" src="../libs/EffectComposer.js"></script>
<script type="text/javascript" src="../libs/CopyShader.js"></script>
<script type="text/javascript" src="../libs/ShaderPass.js"></script>
<script type="text/javascript" src="../libs/FXAAShader.js"></script>
<script type="text/javascript" src="../libs/MaskPass.js"></script>

var renderer = new THREE.WebGLDeferredRenderer({
   
  width: window.innerWidth,
  height: window.innerHeight,
  scale: 1,
  antialias: true,
  tonemapping: THREE.FilmicOperator,
  brightness: 2.5,
});

var areaLight1 = new THREE.AreaLight(0xff0000, 3);
areaLight1.position.set(-10, 10, -35);
areaLight1.rotation.set(-Math.PI / 2, 0, 0);
areaLight1.width = 4;
areaLight1.height = 9.9;
scene.add(areaLight1);

var planeGeometry1 = new THREE.BoxGeometry(4, 10, 0);
var planeGeometry1Mat = new THREE.MeshBasicMaterial({
   
  color: 0xff0000
});
var plane1 = new THREE.Mesh(planeGeometry1, planeGeometry1Mat);
//在areaLight相同位置 防止对象来模拟光线照射的区域
plane1.position.copy(areaLight1.position);

scene.add(plane1);

THREE. LensFlare

镜头光晕

flare = new THREE.LensFlare(texture, size, distance, blending, color, opacity);

var textureFlare0 = THREE.ImageUtils.loadTexture('../assets/textures/lensflare/lensflare0.png');
var textureFlare3 = THREE.ImageUtils.loadTexture('../assets/textures/lensflare/lensflare3.png');

var flareColor = new THREE.Color(0xffaacc);
var lensFlare = new THREE.LensFlare(textureFlare0, 350, 0.0, THREE.AdditiveBlending, flareColor);

lensFlare.add(textureFlare3, 60, 0.6, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70, 0.7, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 120, 0.9, THREE.AdditiveBlending);
lensFlare.add(textureFlare3, 70, 1.0, THREE.AdditiveBlending);

lensFlare.position.copy(spotLight.position);
scene.add(lensFlare);

第 4 章 使用 Three.js 的材质

分类

• 基础属性：最常用，可控制物体的不透明度，是否可见以及被应用
• 融合属性：每个物体都有一系列的融合属性，决定物体与背景的融合
• 高级属性：可控制底层 WebGL 上下午对象渲染物体的方式

基础属性 THREE. Material

混合属性

高级属性

MeshBaseMaterial

var meshMaterial = new THREE.MeshBasicMaterial({
   
  color: 0x7777ff
});

var meshMaterial = new MeshBasicMaterial();
material.color = new THREE.Color(0xff0000);

THREE. MeshDepthMaterial

联合材质

var cubeMaterial = new THREE.MeshDepthMaterial();
var colorMaterial = new THREE.MeshBasicMaterial({
   
  color: controls.color,
  transparent: true, //
  blending: THREE.MultiplyBlending, //混合模式，与背景相互作用
});
var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry, [
  colorMaterial,
  cubeMaterial,
]);
cube.children[1].scale.set(0.99, 0.99, 0.99); //避免画面闪烁

THREE. MeshNormalMaterial

使用 THREE. ArrowHelper 添加法向量

for (var f = 0, fl = sphere.geometry.faces.length; f < fl; f++) {
   
  var face = sphere.geometry.faces[f];
  var centroid = new THREE.Vector3(0, 0, 0);
  centroid.add(sphere.geometry.vertices[face.a]);
  centroid.add(sphere.geometry.vertices[face.b]);
  centroid.add(sphere.geometry.vertices[face.c]);
  centroid.divideScalar(3);

  var arrow = new THREE.ArrowHelper(face.normal, centroid, 2, 0x3333ff, 0.5, 0.5);
  sphere.add(arrow);
}

THREE. MeshFaceMaterial

材质容器，允许集合体的每个面指定不同的材质

var mats = [];
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0x009e60
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0x009e60
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0x0051ba
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0x0051ba
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0xffd500
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0xffd500
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0xff5800
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0xff5800
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0xc41e3a
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0xc41e3a
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0xffffff
}));
mats.push(new THREE.MeshBasicMaterial({
   
  color: 0xffffff
}));

var faceMaterial = new THREE.MeshFaceMaterial(mats);

//魔方
for (var x = 0; x < 3; x++) {
   
  for (var y = 0; y < 3; y++) {
   
    for (var z = 0; z < 3; z++) {
   
      var cubeGeom = new THREE.BoxGeometry(2.9, 2.9, 2.9);
      var cube = new THREE.Mesh(cubeGeom, faceMaterial);
      cube.position.set(x * 3 - 3, y * 3, z * 3 - 3);

      group.add(cube);
    }
  }
}

THREE. MeshPhongMaterial

创建光亮材质，属性与暗淡材质 THREE. MeshLambertMaterial 基本属性一样

THREE. ShaderMaterial 创建自己的着色器

着色器可讲Three.js中的JavaScript网格转换为屏幕上的像素，可指定对象如何渲染，如何覆盖或修改Three.js库中的默认值

• vertexShader：它会在几何体的每个顶点上执行，可用这个着色器改变顶点的位置来对集合体进行变换

• fragmentShader: 它会在集合体的每一个片段上执行，在VertexShader里，会返回这个特定片段应该显示的颜色

<script id="vertex-shader" type="x-shader/x-vertex">
  uniform float time;
    varying vec2 vUv;

    void main()
    {
    
    vec3 posChanged = position;
    posChanged.x = posChanged.x*(abs(sin(time*1.0)));
    posChanged.y = posChanged.y*(abs(cos(time*1.0)));
    posChanged.z = posChanged.z*(abs(sin(time*1.0)));
    //gl_Position = projectionMatrix * modelViewMatrix * vec4(position*(abs(sin(time)/2.0)+0.5),1.0);
    gl_Position = projectionMatrix * modelViewMatrix * vec4(posChanged,1.0);
    }

</script>

function createMaterial(vertexShader, fragmentShader) {
   
  var vertShader = document.getElementById(vertexShader).innerHTML;
  var fragShader = document.getElementById(fragmentShader).innerHTML;

  var attributes = {
   };
  var uniforms = {
   
    time: {
   
      type: 'f',
      value: 0.2
    },
    scale: {
   
      type: 'f',
      value: 0.2
    },
    alpha: {
   
      type: 'f',
      value: 0.6
    },
    resolution: {
   
      type: "v2",
      value: new THREE.Vector2()
    }
  };

  uniforms.resolution.value.x = window.innerWidth;
  uniforms.resolution.value.y = window.innerHeight;

  var meshMaterial = new THREE.ShaderMaterial({
   
    uniforms: uniforms,
    attributes: attributes,
    vertexShader: vertShader,
    fragmentShader: fragShader,
    transparent: true

  });

  return meshMaterial;
}

var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);

var meshMaterial1 = createMaterial("vertex-shader", "fragment-shader-1");
var meshMaterial2 = createMaterial("vertex-shader", "fragment-shader-2");
var meshMaterial3 = createMaterial("vertex-shader", "fragment-shader-3");
var meshMaterial4 = createMaterial("vertex-shader", "fragment-shader-4");
var meshMaterial5 = createMaterial("vertex-shader", "fragment-shader-5");
var meshMaterial6 = createMaterial("vertex-shader", "fragment-shader-6");

var material = new THREE.MeshFaceMaterial(
  [meshMaterial1,
    meshMaterial2,
    meshMaterial3,
    meshMaterial4,
    meshMaterial5,
    meshMaterial6
  ]);

var cube = new THREE.Mesh(cubeGeometry, material);

THREE. LineBaseMaterial

用于线段的基础材质

var points = gosper(4, 60); //gosper曲线

var lines = new THREE.Geometry();
var colors = [];
var i = 0;
points.forEach(function(e) {
  lines.vertices.push(new THREE.Vector3(e.x, e.z, e.y));
  colors[i] = new THREE.Color(0xffffff);
  colors[i].setHSL(e.x / 100 + 0.5, (e.y * 20) / 300, 0.8);
  i++;
});

lines.colors = colors;
var material = new THREE.LineBasicMaterial({
  opacity: 1.0,
  linewidth: 1,
  vertexColors: THREE.VertexColors
});

var line = new THREE.Line(lines, material);

THREE. LineDashMaterial

属性与THREE. LineBaseMaterial一样，可指定虚线与空白间隙的长度来创建出虚线效果

 lines.computeLineDistances();
 var material = new THREE.LineDashedMaterial({
   vertexColors: true,
   color: 0xffffff,
   dashSize: 2,
   gapSize: 2,
   scale: 0.1
 });