Three.js API手册

动画
AnimationAction AnimationClip AnimationMixer AnimationObjectGroup AnimationUtils KeyframeTrack PropertyBinding PropertyMixer
动画 / 轨道
BooleanKeyframeTrack ColorKeyframeTrack NumberKeyframeTrack QuaternionKeyframeTrack StringKeyframeTrack VectorKeyframeTrack
音频
Audio AudioAnalyser AudioContext AudioListener PositionalAudio
摄像机
ArrayCamera Camera CubeCamera OrthographicCamera PerspectiveCamera StereoCamera
常量
Animation Core CustomBlendingEquation DrawModes Materials Renderer Textures
核心
BufferAttribute BufferGeometry Clock DirectGeometry EventDispatcher Face3 Geometry InstancedBufferAttribute InstancedBufferGeometry InstancedInterleavedBuffer InterleavedBuffer InterleavedBufferAttribute Layers Object3D Raycaster Uniform
核心 / BufferAttributes
BufferAttribute_Types
弃用列表
DeprecatedList
附件
Earcut ShapeUtils
附件 / 核心
Curve CurvePath Font Interpolations Path Shape ShapePath
附件 / 曲线
ArcCurve CatmullRomCurve3 CubicBezierCurve CubicBezierCurve3 EllipseCurve LineCurve LineCurve3 QuadraticBezierCurve QuadraticBezierCurve3 SplineCurve
附件 / 物体
ImmediateRenderObject
几何体
BoxBufferGeometry BoxGeometry CircleBufferGeometry CircleGeometry ConeBufferGeometry ConeGeometry CylinderBufferGeometry CylinderGeometry DodecahedronBufferGeometry DodecahedronGeometry EdgesGeometry ExtrudeBufferGeometry ExtrudeGeometry IcosahedronBufferGeometry IcosahedronGeometry LatheBufferGeometry LatheGeometry OctahedronBufferGeometry OctahedronGeometry ParametricBufferGeometry ParametricGeometry PlaneBufferGeometry PlaneGeometry PolyhedronBufferGeometry PolyhedronGeometry RingBufferGeometry RingGeometry ShapeBufferGeometry ShapeGeometry SphereBufferGeometry SphereGeometry TetrahedronBufferGeometry TetrahedronGeometry TextBufferGeometry TextGeometry TorusBufferGeometry TorusGeometry TorusKnotBufferGeometry TorusKnotGeometry TubeBufferGeometry TubeGeometry WireframeGeometry
辅助对象
ArrowHelper AxesHelper BoxHelper Box3Helper CameraHelper DirectionalLightHelper FaceNormalsHelper GridHelper PolarGridHelper PositionalAudioHelper HemisphereLightHelper PlaneHelper PointLightHelper RectAreaLightHelper SkeletonHelper SpotLightHelper VertexNormalsHelper
灯光
AmbientLight DirectionalLight HemisphereLight Light PointLight RectAreaLight SpotLight
灯光 / 阴影
DirectionalLightShadow LightShadow SpotLightShadow
加载器
AnimationLoader AudioLoader BufferGeometryLoader Cache CompressedTextureLoader CubeTextureLoader DataTextureLoader FileLoader FontLoader ImageBitmapLoader ImageLoader Loader LoaderUtils MaterialLoader ObjectLoader TextureLoader
加载器 / 管理器
DefaultLoadingManager LoadingManager
材质
LineBasicMaterial LineDashedMaterial Material MeshBasicMaterial MeshDepthMaterial MeshDistanceMaterial MeshLambertMaterial MeshMatcapMaterial MeshNormalMaterial MeshPhongMaterial MeshPhysicalMaterial MeshStandardMaterial MeshToonMaterial PointsMaterial RawShaderMaterial ShaderMaterial ShadowMaterial SpriteMaterial
数学库
Box2 Box3 Color Cylindrical Euler Frustum Interpolant Line3 Math Matrix3 Matrix4 Plane Quaternion Ray Sphere Spherical Triangle Vector2 Vector3 Vector4
数学库 / 插值
CubicInterpolant DiscreteInterpolant LinearInterpolant QuaternionLinearInterpolant
物体
Bone Group Line LineLoop LineSegments LOD Mesh Points Skeleton SkinnedMesh Sprite
渲染器
WebGLMultisampleRenderTarget WebGLRenderer WebGLRenderTarget WebGLRenderTargetCube
渲染器 / 着色器
ShaderChunk ShaderLib UniformsLib UniformsUtils
场景
Fog FogExp2 Scene
纹理贴图
CanvasTexture CompressedTexture CubeTexture DataTexture DataTexture3D DepthTexture Texture VideoTexture
在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

Face3

在 Geometry 中被使用到的三角面片。这些三角面片会为所有标准几何体自动创建。 然而,如果你正在构建一个自定义几何体,你需要手动创建这些三角面片。

示例

svg / sandbox

exporter / obj

WebGL / shaders / vector

var material = new THREE.MeshStandardMaterial( { color : 0x00cc00 } ); 
//创建仅有一个三角面片的几何体 
var geometry = new THREE.Geometry(); 
geometry.vertices.push( new THREE.Vector3( -50, -50, 0 ) ); 
geometry.vertices.push( new THREE.Vector3( 50, -50, 0 ) ); 
geometry.vertices.push( new THREE.Vector3( 50, 50, 0 ) ); 
//利用顶点 0, 1, 2 创建一个面 
var normal = new THREE.Vector3( 0, 1, 0 ); //optional 
var color = new THREE.Color( 0xffaa00 ); //optional 
var materialIndex = 0; //optional 
var face = new THREE.Face3( 0, 1, 2, normal, color, materialIndex ); 
//将创建的面添加到几何体的面的队列 
geometry.faces.push( face ); 
//如果没有特别指明,面和顶点的法向量可以通过如下代码自动计算 
geometry.computeFaceNormals(); 
geometry.computeVertexNormals(); 
scene.add( new THREE.Mesh( geometry, material ) );

构造函数

Face3( a : Integer, b : Integer, c : Integer, normal : Vector3, color : Color, materialIndex : Integer )

a — 顶点 A 的索引。
b — 顶点 B 的索引。
c — 顶点 C 的索引。

normal — (可选) 面的法向量 (Vector3) 或顶点法向量队列。 如果参数传入单一矢量,则用该量设置面的法向量 .normal,如果传入的是包含三个矢量的队列, 则用该量设置 .vertexNormals

color — (可选) 面的颜色值 color 或顶点颜色值的队列。 如果参数传入单一矢量,则用该量设置 .color,如果传入的是包含三个矢量的队列, 则用该量设置 .vertexColors

materialIndex — (可选) 材质队列中与该面对应的材质的索引。

属性

# .a : Integer

顶点 A 的索引。

# .b : Integer

顶点 B 的索引。

# .c : Integer

顶点 C 的索引。

# .normal : Vector3

面的法向量 - 矢量展示 Face3 的方向。如果该量是通过调用 Geometry.computeFaceNormals 自动计算的, 该值等于归一化的两条边的差积。默认值是 (0, 0, 0)

# .color : Color

面的颜色值 - 在被用于指定材质的 vertexColors 属性时,该值必须被设置为 THREE.FaceColors。

# .vertexNormals : Array

包含三个 vertex normals 的队列。

# .vertexColors : Array

包含 3 个顶点颜色值的队列 - 在被用于指定材质的 vertexColors 属性时,该值必须被设置为 THREE.VertexColors。

# .materialIndex : Integer

材质队列中与该面相关的材质的索引。默认值为 0

方法

# .clone () : Face3

克隆该 Face3 对象。

# .copy ( face3 : Face3 ) : Face3

将参数指定的 Face3 对象的数据拷贝到当前对象。

源代码

src/core/Face3.js