- threejs67
- Javascript23
- 设计模式18
- React14
- Vue12
- 软考11
- 面试10
- Typescript10
- Mysql9
- Linux8
- CSS4
- 项目3
- HTML3
- react3
- 浏览器3
- git2
- uniapp2
- Nginx2
- 网络2
- 其他1
- eslint1
- html1
WebGLRenderer
构造器
WebGLRenderer( parameters : Object )
parameters - (可选) 该对象的属性定义了渲染器的行为。也可以完全不传参数。在所有情况下,当缺少参数时,它将采用合理的默认值。 以下是合法参数:
- canvas - 一个供渲染器绘制其输出的canvas 它和下面的domElement属性对应。 如果没有传这个参数,会创建一个新canvas
- context - 可用于将渲染器附加到已有的渲染环境(RenderingContext)中。默认值是null
- precision - 着色器精度. 可以是 "highp", "mediump" 或者 "lowp". 如果设备支持,默认为"highp"
- alpha - 控制默认的清除alpha值。当设置为true时,值为0。否则就是1。默认为false
- premultipliedAlpha - renderer是否假设颜色有 premultiplied alpha. 默认为true
- antialias - 是否执行抗锯齿。默认为false.
- stencil - 绘图缓存是否有一个至少8位的模板缓存(stencil buffer)。默认为true
- preserveDrawingBuffer -是否保留缓直到手动清除或被覆盖。 默认false.
- powerPreference - 提示用户代理怎样的配置更适用于当前WebGL环境。 可能是"high-performance", "low-power" 或 "default"。默认是"default". 详见WebGL spec
- failIfMajorPerformanceCaveat - 检测渲染器是否会因性能过差而创建失败。默认为false。详见 WebGL spec for details.
- depth - 绘图缓存是否有一个至少6位的深度缓存(depth buffer )。 默认是true.
- logarithmicDepthBuffer - 是否使用对数深度缓存。如果要在单个场景中处理巨大的比例差异,就有必要使用。
BufferGeometry
是面片、线或点几何体的有效表述。包括顶点位置,面片索引、法相量、颜色值、UV 坐标和自定义缓存属性值。使用 BufferGeometry 可以有效减少向 GPU 传输上述数据所需的开销。
代码示例
const geometry = new THREE.BufferGeometry(); // 创建一个简单的矩形. 在这里我们左上和右下顶点被复制了两次。 // 因为在两个三角面片里,这两个顶点都需要被用到。
const vertices = new Float32Array( [ -1.0, -1.0, 1.0, 1.0, -1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0, -1.0, 1.0 ] ); // itemSize = 3 因为每个顶点都是一个三元组。
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
const material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const mesh = new THREE.Mesh( geometry, material );
Curve
用于创建包含插值方法的Curve对象的抽象基类。 有关Curve的数组,请参见CurePath。
构造函数
Curve()
创建一个 Curve.
属性
.arcLengthDivisions : Integer
确定.GetLength计算曲线的累积分段长度时的分段量。 为确保.getSpacedPoints等方法时的精度,如果曲线非常大,建议增加.arcLengthDivisions。默认值为200
CurePath
一个扩展了Curve的抽象基类。CurvePath仅仅是一个已连接的曲线的数组,但保留了曲线的API。
构造函数
CurvePath()
构造函数中不传入参数。
属性
共有属性请参见其基类Cure。
.curves : Array
Curves数组。
.autoClose : Boolean
DefaultLoadingManager
LoadingManager是一个全局实例, 当其他加载器没有指定加载管理器时,它将被其他大多数的加载器设为默认的加载管理器。
LoadingManager对于大多数加载器来说已经足够了,但有时您可能需要单独设置加载管理器,例如纹理、模型加载器。
代码示例
你可以选择性的为你的管理器设置 onStart, onLoad, onProgress, onError 这些方法。 当你的加载器使用默认加载管理器时,这些方法都将被应用到加载器上。
请注意,个人的加载器的不应具有类似上面类似的命名函数,以避免混淆。因为这些函数时用于显示有关加载总体状态的信息,而不是处理已加载的数据。
LoadingManager
其功能是处理并跟踪已加载和待处理的数据。如果未手动设置加强管理器,则会为加载器创建和使用默认全局实例加载器管理器 - 请参阅DefaultLoadingManager.
一般来说,默认的加载管理器已足够使用了,但有时候也需要设置单独的加载器 - 例如,如果你想为对象和纹理显示单独的加载条。
代码示例
const manager = new THREE.LoadingManager()
manager.onStart = function (url, itemsLoaded, itemsTotal) {
console.log(
'Started loading file: ' +
url +
'.\nLoaded ' +
itemsLoaded +
' of ' +
itemsTotal +
' files.'
)
}
manager.onLoad = function () {
console.log('Loading complete!')
}
manager.onProgress = function (url, itemsLoaded, itemsTotal) {
console.log(
'Loading file: ' +
url +
'.\nLoaded ' +
itemsLoaded +
' of ' +
itemsTotal +
' files.'
)
}
manager.onError = function (url) {
console.log('There was an error loading ' + url)
}
const loader = new THREE.OBJLoader(manager)
loader.load('file.obj', function (object) {
//
})
AnimationAction
AnimationActions 用来调度存储在AnimationClips中的动画。
说明: AnimationAction的大多数方法都可以链式调用
AnimationClip
动画剪辑(AnimationClip)是一个可重用的关键帧轨道集,它代表动画。