01 glTF（gl传输格式）

如果有可能的话，我们推荐使用glTF（gl传输格式）。.GLB和.GLTF是这种格式的这两种不同版本，都可以被很好地支持。由于glTF这种格式是专注于在程序运行时呈现三维物体的，所以它的传输效率非常高，且加载速度非常快。功能方面则包括了网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和摄像机。

代码

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load( 'path/to/model.glb', function ( gltf ) {
    scene.add( gltf.scene );
}, undefined, function ( error ) {
    console.error( error );
} );

实例属性

animations: [] // 动画属性
castShadow: false 
children: [Object3D] // 子集
frustumCulled: true
layers: Layers {mask: 1}
matrix: Matrix4 {elements: Array(16)}
matrixAutoUpdate: true
matrixWorld: Matrix4 {elements: Array(16)}
matrixWorldNeedsUpdate: false
name: "OSG_Scene"
parent: Scene {uuid: "0FE5FF04-91EA-4A20-B92C-D11842A89A19", name: "", type: "Scene", parent: null, children: Array(2), …}
position: Vector3 {x: -12.94427190999916, y: -8.533076741628822, z: -14.547591760888809}
quaternion: Quaternion {_x: 0.2116299842512363, _y: -0.30126929315466977, _z: -0.06876275019668644, _w: 0.9272115437985525, _onChangeCallback: ƒ}
receiveShadow: false
renderOrder: 0
rotation: Euler {_x: 0.44879895051282753, _y: -0.6283185307179585, _z: -0, _order: "XYZ", _onChangeCallback: ƒ}
scale: Vector3 {x: 1.4, y: 1.4, z: 1.4}
type: "Group"
up: Vector3 {x: 0, y: 1, z: 0}
userData: {}
uuid: "74CBCCF7-2898-463A-B707-B916E0CC775C"
visible: true
eulerOrder: (...)
id: 5
modelViewMatrix: Matrix4 {elements: Array(16)}
normalMatrix: Matrix3 {elements: Array(9)}
useQuaternion: (...)
__proto__: Object3D

threejs原型

add: ƒ ( object )
applyMatrix: ƒ ( matrix )
applyMatrix4: ƒ ( matrix )
applyQuaternion: ƒ ( q )
attach: ƒ ( object )
clear: ƒ ()
clone: ƒ ( recursive )
constructor: ƒ Object3D()
copy: ƒ ( source, recursive = true )
getChildByName: ƒ ( name )
getObjectById: ƒ ( id )
getObjectByName: ƒ ( name )
getObjectByProperty: ƒ ( name, value )
getWorldDirection: ƒ ( target )
getWorldPosition: ƒ ( target )
getWorldQuaternion: ƒ ( target )
getWorldRotation: ƒ ()
getWorldScale: ƒ ( target )
isObject3D: true
localToWorld: ƒ ( vector )
lookAt: ƒ ( x, y, z )
onAfterRender: ƒ ()
onBeforeRender: ƒ ()
raycast: ƒ ()
remove: ƒ ( object )
renderDepth: ƒ ()
rotateOnAxis: ƒ ( axis, angle ) // 改变物体的旋转角度 
rotateOnWorldAxis: ƒ ( axis, angle ) // 改变物体的旋转角度 X
rotateX: ƒ ( angle ) // 改变物体的旋转角度 X
rotateY: ƒ ( angle ) // 改变物体的旋转角度 Y
rotateZ: ƒ ( angle ) // 改变物体的旋转角度 Z
setRotationFromAxisAngle: ƒ ( axis, angle )
setRotationFromEuler: ƒ ( euler )
setRotationFromMatrix: ƒ ( m )
setRotationFromQuaternion: ƒ ( q )
toJSON: ƒ ( meta )
translate: ƒ ( distance, axis ) // 改变位置外加是哪个方向
translateOnAxis: ƒ ( axis, distance ) // 改变哪个方向的位置
translateX: ƒ ( distance ) // 只改变x轴的位置
translateY: ƒ ( distance ) // 只改变y轴的位置
translateZ: ƒ ( distance ) // 只改变z轴的位置
traverse: ƒ ( callback )
traverseAncestors: ƒ ( callback )
traverseVisible: ƒ ( callback )
updateMatrix: ƒ ()
updateMatrixWorld: ƒ ( force )
updateWorldMatrix: ƒ ( updateParents, updateChildren )
worldToLocal: ƒ ( vector )

02 基本用法

一 position [ Vector3 ] (x,y,z) 设置位置

表示导入模型的位置信息；有一组x，y，z，的坐标信息表示三维中的数据的位置，可以通过对象的属性去改变，也可以通过.set(x,y,z)或者.setX,.setY,setZ,同样也可以three上面的方法 translate, translateX，translateY，translateZ，translateOnAxis去改变；当然还有一种方法就是直接改变对应的相机的视角也可以做到

还有一些不常用

applyProjection: ƒ ( m )
distanceToManhattan: ƒ ( v )
fromAttribute: ƒ ( attribute, index, offset )
getColumnFromMatrix: ƒ ( index, matrix )
getPositionFromMatrix: ƒ ( m )
getScaleFromMatrix: ƒ ( m )
isVector3: true
lengthManhattan: ƒ ()
setEulerFromQuaternion: ƒ ()
setEulerFromRotationMatrix: ƒ ()
add: ƒ add( v, w )
addScalar: ƒ addScalar( s )
addScaledVector: ƒ addScaledVector( v, s )
addVectors: ƒ addVectors( a, b )
angleTo: ƒ angleTo( v )
applyAxisAngle: ƒ applyAxisAngle( axis, angle )
applyEuler: ƒ applyEuler( euler )
applyMatrix3: ƒ applyMatrix3( m )
applyMatrix4: ƒ applyMatrix4( m )
applyNormalMatrix: ƒ applyNormalMatrix( m )
applyQuaternion: ƒ applyQuaternion( q )
ceil: ƒ ceil()
clamp: ƒ clamp( min, max )
clampLength: ƒ clampLength( min, max )
clampScalar: ƒ clampScalar( minVal, maxVal )
clone: ƒ clone()
constructor: class Vector3
copy: ƒ copy( v )
cross: ƒ cross( v, w )
crossVectors: ƒ crossVectors( a, b )
distanceTo: ƒ distanceTo( v )
distanceToSquared: ƒ distanceToSquared( v )
divide: ƒ divide( v )
divideScalar: ƒ divideScalar( scalar )
dot: ƒ dot( v )
equals: ƒ equals( v )
floor: ƒ floor()
fromArray: ƒ fromArray( array, offset = 0 )
fromBufferAttribute: ƒ fromBufferAttribute( attribute, index, offset )
getComponent: ƒ getComponent( index )
length: ƒ length()
lengthSq: ƒ lengthSq()
lerp: ƒ lerp( v, alpha )
lerpVectors: ƒ lerpVectors( v1, v2, alpha )
manhattanDistanceTo: ƒ manhattanDistanceTo( v )
manhattanLength: ƒ manhattanLength()
max: ƒ max( v )
min: ƒ min( v )
multiply: ƒ multiply( v, w )
multiplyScalar: ƒ multiplyScalar( scalar )
multiplyVectors: ƒ multiplyVectors( a, b )
negate: ƒ negate()
normalize: ƒ normalize()
project: ƒ project( camera )
projectOnPlane: ƒ projectOnPlane( planeNormal )
projectOnVector: ƒ projectOnVector( v )
random: ƒ random()
reflect: ƒ reflect( normal )
round: ƒ round()
roundToZero: ƒ roundToZero()
set: ƒ set( x, y, z ) // 设置三维中的x，y，z的位置
setComponent: ƒ setComponent( index, value )
setFromCylindrical: ƒ setFromCylindrical( c )
setFromCylindricalCoords: ƒ setFromCylindricalCoords( radius, theta, y )
setFromMatrix3Column: ƒ setFromMatrix3Column( m, index )
setFromMatrixColumn: ƒ setFromMatrixColumn( m, index )
setFromMatrixPosition: ƒ setFromMatrixPosition( m )
setFromMatrixScale: ƒ setFromMatrixScale( m )
setFromSpherical: ƒ setFromSpherical( s )
setFromSphericalCoords: ƒ setFromSphericalCoords( radius, phi, theta )
setLength: ƒ setLength( length )
setScalar: ƒ setScalar( scalar )
setX: ƒ setX( x ) // 设置x轴的位置
setY: ƒ setY( y ) // 设置y轴的位置
setZ: ƒ setZ( z ) // 设置z轴的位置
sub: ƒ sub( v, w ) // 
subScalar: ƒ subScalar( s )
subVectors: ƒ subVectors( a, b )
toArray: ƒ toArray( array = [], offset = 0 )
transformDirection: ƒ transformDirection( m )
unproject: ƒ unproject( camera )

二 rotation (x,y,z) 改变物体所对应的旋转角度

可能通过对于一个属性上去理解旋转角度不好理解但是你也可以理解为物体的朝向的三维坐标的对应，也可以通过.set(x,y,z, order )同样也可以three上面的方法 rotateOnWorldAxis, rotateX，rotateY，rotateZ，rotateOnAxis去改变；当然还有一种方法就是直接改变对应的相机的视角也可以做到

isEuler: true
clone: ƒ clone()
constructor: class Euler
copy: ƒ copy( euler )
equals: ƒ equals( euler )
fromArray: ƒ fromArray( array )
order: (...)
reorder: ƒ reorder( newOrder )
set: ƒ set( x, y, z, order )
setFromQuaternion: ƒ setFromQuaternion( q, order, update )
setFromRotationMatrix: ƒ setFromRotationMatrix( m, order, update )
setFromVector3: ƒ setFromVector3( v, order )
toArray: ƒ toArray( array = [], offset = 0 )
toVector3: ƒ toVector3( optionalResult )
x: (...)
y: (...)
z: (...)
_onChange: ƒ _onChange( callback )
_onChangeCallback: ƒ _onChangeCallback()
get order: ƒ order()
set order: ƒ order( value )
get x: ƒ x()
set x: ƒ x( value )
get y: ƒ y()
set y: ƒ y( value )
get z: ƒ z()
set z: ƒ z( value )

三 scale [ Vector3 ] (x,y,z) 改变物体缩放比例

属性上面表示的是物体的缩放比例，可以通过.set(x,y,z)或者.setX,.setY,setZ,three上面的没有对应方法去改变，当然还有一种方法就是直接改变对应的相机的视角也可以做到

applyProjection: ƒ ( m )
distanceToManhattan: ƒ ( v )
fromAttribute: ƒ ( attribute, index, offset )
getColumnFromMatrix: ƒ ( index, matrix )
getPositionFromMatrix: ƒ ( m )
getScaleFromMatrix: ƒ ( m )
isVector3: true
lengthManhattan: ƒ ()
setEulerFromQuaternion: ƒ ()
setEulerFromRotationMatrix: ƒ ()
add: ƒ add( v, w )
addScalar: ƒ addScalar( s )
addScaledVector: ƒ addScaledVector( v, s )
addVectors: ƒ addVectors( a, b )
angleTo: ƒ angleTo( v )
applyAxisAngle: ƒ applyAxisAngle( axis, angle )
applyEuler: ƒ applyEuler( euler )
applyMatrix3: ƒ applyMatrix3( m )
applyMatrix4: ƒ applyMatrix4( m )
applyNormalMatrix: ƒ applyNormalMatrix( m )
applyQuaternion: ƒ applyQuaternion( q )
ceil: ƒ ceil()
clamp: ƒ clamp( min, max )
clampLength: ƒ clampLength( min, max )
clampScalar: ƒ clampScalar( minVal, maxVal )
clone: ƒ clone()
constructor: class Vector3
copy: ƒ copy( v )
cross: ƒ cross( v, w )
crossVectors: ƒ crossVectors( a, b )
distanceTo: ƒ distanceTo( v )
distanceToSquared: ƒ distanceToSquared( v )
divide: ƒ divide( v )
divideScalar: ƒ divideScalar( scalar )
dot: ƒ dot( v )
equals: ƒ equals( v )
floor: ƒ floor()
fromArray: ƒ fromArray( array, offset = 0 )
fromBufferAttribute: ƒ fromBufferAttribute( attribute, index, offset )
getComponent: ƒ getComponent( index )
length: ƒ length()
lengthSq: ƒ lengthSq()
lerp: ƒ lerp( v, alpha )
lerpVectors: ƒ lerpVectors( v1, v2, alpha )
manhattanDistanceTo: ƒ manhattanDistanceTo( v )
manhattanLength: ƒ manhattanLength()
max: ƒ max( v )
min: ƒ min( v )
multiply: ƒ multiply( v, w )
multiplyScalar: ƒ multiplyScalar( scalar )
multiplyVectors: ƒ multiplyVectors( a, b )
negate: ƒ negate()
normalize: ƒ normalize()
project: ƒ project( camera )
projectOnPlane: ƒ projectOnPlane( planeNormal )
projectOnVector: ƒ projectOnVector( v )
random: ƒ random()
reflect: ƒ reflect( normal )
round: ƒ round()
roundToZero: ƒ roundToZero()
set: ƒ set( x, y, z ) // 改变缩放的比例自不过对应的三个数值
setComponent: ƒ setComponent( index, value )
setFromCylindrical: ƒ setFromCylindrical( c )
setFromCylindricalCoords: ƒ setFromCylindricalCoords( radius, theta, y )
setFromMatrix3Column: ƒ setFromMatrix3Column( m, index )
setFromMatrixColumn: ƒ setFromMatrixColumn( m, index )
setFromMatrixPosition: ƒ setFromMatrixPosition( m )
setFromMatrixScale: ƒ setFromMatrixScale( m )
setFromSpherical: ƒ setFromSpherical( s )
setFromSphericalCoords: ƒ setFromSphericalCoords( radius, phi, theta )
setLength: ƒ setLength( length )
setScalar: ƒ setScalar( scalar )
setX: ƒ setX( x ) // 改变x轴的缩放比例
setY: ƒ setY( y ) // 改变y轴的缩放比例
setZ: ƒ setZ( z ) // 改变z轴的缩放比例
sub: ƒ sub( v, w )
subScalar: ƒ subScalar( s )
subVectors: ƒ subVectors( a, b )
toArray: ƒ toArray( array = [], offset = 0 )
transformDirection: ƒ transformDirection( m )
unproject: ƒ unproject( camera )

目前来看导入到threejs中的模型，如果需要在gpu中渲染的话，第一使用的是内置的threejs中的shader的话，那么首先应该是一个BufferGeometry原型，究竟其根本来说也就是所有的数据都存在于
geometry.setAttribute( ‘position’, new THREE.BufferAttribute( vertices, 3 ) );
一般的自定义是属性都可以通过这种方式来添加点的位置，贴图材质，颜色的等信息去改变模型的基本信息，然后shader里面可以获取到Attribute的从缓存中拿到的属性，用于渲染。

所以导入进来的模型；我们有两种方式去用于粒子的渲染，第一找到模型的BufferGeometry，然后利用这个模型去渲染就可以，还有一种就是实例一个BufferGeometry然后获取其中的position重新赋值也可以；

代码知识结构

Import 3D Model

01 glTF（gl传输格式）

代码

02 基本用法

一 position [ Vector3 ] (x,y,z) 设置位置

二 rotation (x,y,z) 改变物体所对应的旋转角度

三 scale [ Vector3 ] (x,y,z) 改变物体缩放比例