mesh threejs 属性_ThreeJs 基础入门

本文来自网易云社区

作者：唐钊

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它在 web 中创建各种三维场景，包括了摄影机、光影、材质等各种对象。使用它可以让我们更加直观的了解 webgl 的世界。

3D 场景前置知识1.场景(Scene)：是物体、光源等元素的容器，可以配合 chrome 插件使用，抛出 window.scene即可实时调整 obj 的信息和材质信息。2.相机(Camera)：场景中的相机，代替人眼去观察，场景中只能添加一个，一般常用的是透视相机(PerspectiveCamera)3.物体对象(Mesh)：包括二维物体(点、线、面)、三维物体，模型等等4.光源(Light)：场景中的光照，如果不添加光照场景将会是一片漆黑，包括全局光、平行光、点光源等5.渲染器(Renderer):场景的渲染方式，如webGL\canvas2D\Css3D。6.控制器(Control): 可通过键盘、鼠标控制相机的移动

下面我们依次详细学习以上的细分知识点。

相机

Three.js中我们常用的有两种类型的相机：正交(orthographic)相机、透视(perspective)相机。一般情况下为了模拟人眼我们都是使用透视相机； 正交镜头的特点是，物品的渲染尺寸与它距离镜头的远近无关。也就是说在场景中移动一个物体，其大小不会变化。正交镜头适合2D游戏。 透视镜头则是模拟人眼的视觉特点，距离远的物体显得更小。透视镜头通常更适合3D渲染。

THREE.PerspectiveCamera(fov,aspect,near,far)参数

描述

fov

视野角度，从镜头可以看到的场景的部分。通常3D游戏的FOV取值在60-90度之间较好的默认值为60

aspect

渲染区域的纵横比。较好的默认值为window.innerWidth/window.innerHeight

near

最近离镜头的距离

far

远离镜头的距离

透视相机示意图：

创建摄像机以后还要对其进行移动、然后对准物体积聚的场景中心位置，分别是设置其 position和调用 lookAt 方法，参数均是一个 xyz向量(new THREE.Vector3(x,y,z))camera.position：控制相机在整个3D环境中的位置(取值为3维坐标对象-THREE.Vector3(x,y,z))

camera.lookAt：控制相机的焦点位置，决定相机的朝向(取值为3维坐标对象-THREE.Vector3(x,y,z))

灯光

在Three.js中光源是必须的，如果一个场景你不设置灯光那么世界将会是一片漆黑。Three.js内置了多种光源以满足特定场景的需要。大家可以根据自己的项目需要来选择何种灯光

光源分类光源

说明

AmbientLight

环境光，其颜色均匀的应用到场景及其所有对象上,这种光源为场景添加全局的环境光。

这种光没有特定的方向，不会产生阴影。通常不会把AmbientLight作为唯一的光源，

而是和SpotLight、DirectionalLight等光源结合使用，从而达到柔化阴影、添加全局色调的效果。

指定颜色时要相对保守，例如#0c0c0c。设置太亮的颜色会导致整个画面过度饱和，什么都看不清：

PointLight

3D空间中的一个点光源，向所有方向发出光线

SpotLight

产生圆锥形光柱的聚光灯，台灯、天花板射灯通常都属于这类光源,这种光源的使用场景最多

，特别是在你需要阴影效果的时候。

DirectionalLight

也就无限光，光线是平行的。典型的例子是日光,用于模拟遥远的，类似太阳那样的光源。

该光源与SpotLight的主要区别是，它不会随着距离而变暗，所有被照耀的地方获得相同的光照强度。

HemisphereLight

特殊光源，用于创建户外自然的光线效果，

此光源模拟物体表面反光效果、微弱发光的天空,模拟穹顶(半球)的微弱发光效果，

让户外场景更加逼真。使用DirectionalLight + AmbientLight可以在某种程度上来模拟户外光线，

但是不够真实，因为无法体现大气层的散射效果、地面或物体的反射效果

AreaLight

面光源