入门学习之threejs开发指南②

34次阅读

共计 976 个字符,预计需要花费 3 分钟才能阅读完成。

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

第二章知识点概要

场景

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()

正文完
 0