入门学习之——three.js开发指南②

这一篇主要内容就是第二章知识点概要,

第二章知识点概要

场景

scene.children

用于获取场景中所有的对象:光源,物体,摄像机...

scene.add

这个比较熟悉了,上一篇学习的内容里,每次添加物体,光源的时候都会用到这个api

scene.add(sphere)
scene.add(spotLight)

这一章还提到一个知识点,就是sphere.name 给物体对象设定名字,实际上不光是物体对象,光源、摄像机也可以取名字

scene.getObjectByName

这个api就会和上面的.name 有关系了

scene.remove

顾名思义,这个api就是删除对象用的

let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial)
sphere.name = 'this_is_ball'
scene.add(sphere)
let thisBall = scene.getObjectByName('this_is_ball')
scene.remove(thisBall)
scene.fog

给场景加雾化效果,就是远方看起来会蒙上一层半透明到完全不透明遮罩的感觉

// (颜色, 近处属性值, 远处属性值) 线性增长
scene.fog = new THREE.Fog(0xFFFFFF, 0.01, 100)
// (颜色, 浓度变化速度)
scene.fog = new THREE.FogExp2(0xFFFFFF, 0.001)

摄像机

这一章就提到了两个摄像机:正交摄像机、透视摄像机
正交摄像机看物体远近一样大
透视摄像机看物体近大远小
具体的后面有专门的章节讲解

camera.lookAt()

这个api是指定摄像机指向的位置,即在可拖动的场景中,不管怎么转动,都会聚焦的位置

几何体

几何体就是指除了api提供的几个几何图形之外,three.js还支持自定义多边形,这一章里只需要做个了解就好,后面还会有更加详细和实战性的章节

let vertices = [
    new THREE.Vector3(1,3,1),
    ...
]
let faces = [
    new THREE.Faces3(0, 2, 1),
    ...
]
let geom = new THREE.Geometry();
geom.vertices = vertices;
geom.faces = faces
geom.computeFaceNormals()

第三章光源

第三章主要讲光源,也是属于api的运用

光源种类

  • THREE.AmbientLight
    环境光,均匀照亮所有物体,没有方向,所以不能用来投影,光源的颜色将会叠加到场景现有物体上
  • THREE.PointLight
    点光源,类似灯泡的光,可以产生投影
  • THREE.SpotLight
    聚光灯,从一个点沿着一个方向以圆锥体的形状发射,可以产生投影
  • THREE.DirectionalLight
    平行光,沿着特定方向发射的光,类似太阳光,可以产生投影
  • THREE.HemisphereLight
    半球光,可渐变光线的光源,不能投影
  • THREE.RectAreaLight
    平面光,可以模拟明亮的窗户或者条状灯光光源,不支持投影
  • THREE.Lensflare
    创建一个模拟追踪着灯光的镜头光晕

都是一些api的运用,我打算在具体项目中慢慢熟悉,入门的时候就先略作了解吧~

你可能感兴趣的:(javascript,前端,three.js,3d,学习笔记)