@damienmortini/three 0.1.193 → 0.1.195

package/object/THREEMotionVectorObject.js

@@ -1,7 +1,8 @@
-import { Object3D, BufferGeometry, BufferAttribute, AnimationMixer, DataTexture, RGBAFormat, FloatType, RGBFormat, Points, Color, Matrix4 } from '../../../three/src/Three.js'
-import { quaternionFromMatrix } from '@damienmortini/core/shader/TransformShader.js'
-import THREEGPGPUSystem from '../../three/gpgpu/THREEGPGPUSystem.js'
-import THREEShaderMaterial from '../../three/material/THREEShaderMaterial.js'
+import { quaternionFromMatrix } from '@damienmortini/core/shader/TransformShader.js';
+
+import { AnimationMixer, BufferAttribute, BufferGeometry, Color, DataTexture, FloatType, Matrix4, Object3D, Points, RGBAFormat, RGBFormat } from '../../../three/src/Three.js';
+import THREEGPGPUSystem from '../../three/gpgpu/THREEGPGPUSystem.js';
+import THREEShaderMaterial from '../../three/material/THREEShaderMaterial.js';
 
 export default class THREEMotionVectorObject extends Object3D {
   constructor({
@@ -22,53 +23,54 @@ export default class THREEMotionVectorObject extends Object3D {
     }),
     pointCount = undefined,
   }) {
-    super()
+    super();
 
-    this.loop = false
+    this.loop = false;
 
-    this._pointCount = pointCount
+    this._pointCount = pointCount;
 
-    this._initialized = false
+    this._initialized = false;
 
-    const object = gltfData.scene
-    this._mesh = object
+    const object = gltfData.scene;
+    this._mesh = object;
     object.traverse((object) => {
       if (object.skeleton) {
-        this._mesh = object
-        this._mesh.frustumCulled = false
+        this._mesh = object;
+        this._mesh.frustumCulled = false;
       }
-    })
+    });
     // this._mesh.visible = false;
-    this._mesh.scale.set(0, 0, 0)
+    this._mesh.scale.set(0, 0, 0);
     if (!pointsAttributes) {
-      pointsAttributes = new Map()
+      pointsAttributes = new Map();
       for (const [name, value] of Object.entries(this._mesh.geometry.attributes)) {
         pointsAttributes.set(name, {
           data: value.array,
           size: value.itemSize,
-        })
+        });
       }
     }
-    this.add(object)
+    this.add(object);
 
     if (this._pointCount) {
       for (const attributeData of pointsAttributes.values()) {
-        const newArray = new attributeData.data.constructor(this._pointCount * attributeData.size)
-        const stride = attributeData.size
-        const difference = Math.floor(attributeData.data.length / newArray.length)
+        const newArray = new attributeData.data.constructor(this._pointCount * attributeData.size);
+        const stride = attributeData.size;
+        const difference = Math.floor(attributeData.data.length / newArray.length);
         for (let index = 0; index < this._pointCount; index++) {
           for (let componentIndex = 0; componentIndex < stride; componentIndex++) {
-            newArray[index * stride + componentIndex] = attributeData.data[index * stride * difference + componentIndex]
+            newArray[index * stride + componentIndex] = attributeData.data[index * stride * difference + componentIndex];
           }
         }
-        attributeData.data = newArray
+        attributeData.data = newArray;
       }
-    } else {
-      const firstAttribute = pointsAttributes.values().next().value
-      this._pointCount = firstAttribute.data.length / firstAttribute.size
+    }
+    else {
+      const firstAttribute = pointsAttributes.values().next().value;
+      this._pointCount = firstAttribute.data.length / firstAttribute.size;
     }
 
-    this._skeleton = this._mesh.skeleton
+    this._skeleton = this._mesh.skeleton;
 
     // Create bonesTexture manually
     // https://github.com/mrdoob/three.js/blob/cd41804aa436bb2cfd79797c04985f75c4c63e63/src/renderers/WebGLRenderer.js#L1632
@@ -93,34 +95,34 @@ export default class THREEMotionVectorObject extends Object3D {
 
     //
 
-    const geometry = new BufferGeometry()
+    const geometry = new BufferGeometry();
 
     for (const [name, attributeData] of pointsAttributes) {
-      geometry.setAttribute(name, new BufferAttribute(attributeData.data, attributeData.size))
+      geometry.setAttribute(name, new BufferAttribute(attributeData.data, attributeData.size));
     }
 
-    this._points = new Points(geometry, material)
-    this._points.isSkinnedMesh = true
-    this._points.skeleton = this._skeleton
-    this._points.bindMatrix = new Matrix4()
-    this._points.bindMatrixInverse = new Matrix4()
-    this._points.visible = false
-    this._points.frustumCulled = false
-    this.add(this._points)
-
-    const animation = gltfData.animations[0]
-    this._animationMixer = new AnimationMixer(object)
-    this._animationClip = animation
-    this._animationAction = this._animationMixer.clipAction(this._animationClip)
-    this._animationAction.play()
-
-    const pointTextures = new Map()
-    const pointTextureSize = Math.ceil(Math.sqrt(this._pointCount))
+    this._points = new Points(geometry, material);
+    this._points.isSkinnedMesh = true;
+    this._points.skeleton = this._skeleton;
+    this._points.bindMatrix = new Matrix4();
+    this._points.bindMatrixInverse = new Matrix4();
+    this._points.visible = false;
+    this._points.frustumCulled = false;
+    this.add(this._points);
+
+    const animation = gltfData.animations[0];
+    this._animationMixer = new AnimationMixer(object);
+    this._animationClip = animation;
+    this._animationAction = this._animationMixer.clipAction(this._animationClip);
+    this._animationAction.play();
+
+    const pointTextures = new Map();
+    const pointTextureSize = Math.ceil(Math.sqrt(this._pointCount));
     for (const [name, attributeData] of pointsAttributes) {
-      const textureData = new Float32Array(pointTextureSize * pointTextureSize * attributeData.size)
-      textureData.set(attributeData.data)
-      const texture = new DataTexture(textureData, pointTextureSize, pointTextureSize, attributeData.size === 3 ? RGBFormat : RGBAFormat, FloatType)
-      pointTextures.set(name, texture)
+      const textureData = new Float32Array(pointTextureSize * pointTextureSize * attributeData.size);
+      textureData.set(attributeData.data);
+      const texture = new DataTexture(textureData, pointTextureSize, pointTextureSize, attributeData.size === 3 ? RGBFormat : RGBAFormat, FloatType);
+      pointTextures.set(name, texture);
     }
 
     this._gpgpuSystem = new THREEGPGPUSystem({
@@ -216,69 +218,70 @@ export default class THREEMotionVectorObject extends Object3D {
           gl_FragColor = data;
         `],
       ],
-    })
+    });
     this._gpgpuSystem.onBeforeRender = () => {
-      this._gpgpuSystem.material.boneTexture = this._skeleton.boneTexture
-      this._gpgpuSystem.material.boneTextureSize = this._skeleton.boneTextureSize
-    }
+      this._gpgpuSystem.material.boneTexture = this._skeleton.boneTexture;
+      this._gpgpuSystem.material.boneTextureSize = this._skeleton.boneTextureSize;
+    };
   }
 
   get pointCount() {
-    return this._pointCount
+    return this._pointCount;
   }
 
   get dataTexture() {
-    return this._gpgpuSystem.dataTexture
+    return this._gpgpuSystem.dataTexture;
   }
 
   get dataTextureStride() {
-    return this._gpgpuSystem.stride
+    return this._gpgpuSystem.stride;
   }
 
   get dataTextureSize() {
-    return this._gpgpuSystem.dataTextureSize
+    return this._gpgpuSystem.dataTextureSize;
   }
 
   get meshVisible() {
-    return this._mesh.visible
+    return this._mesh.visible;
   }
 
   set meshVisible(value) {
-    this._mesh.visible = value
+    this._mesh.visible = value;
   }
 
   get pointsVisible() {
-    return this._points.visible
+    return this._points.visible;
   }
 
   set pointsVisible(value) {
-    this._points.visible = value
+    this._points.visible = value;
   }
 
   get currentTime() {
-    return this._animationMixer.time
+    return this._animationMixer.time;
   }
 
   set currentTime(value) {
     if (value >= this._animationClip.duration) {
       if (this.loop) {
-        value = 0
-      } else {
-        value = this._animationClip.duration
+        value = 0;
+      }
+      else {
+        value = this._animationClip.duration;
       }
     }
-    this._animationMixer.setTime(Math.min(value, this._animationClip.duration - .01))
-    this._update()
+    this._animationMixer.setTime(Math.min(value, this._animationClip.duration - 0.01));
+    this._update();
   }
 
   _update() {
     if (!this._points.visible && !this._mesh.visible) {
-      this._skeleton.update()
+      this._skeleton.update();
     }
     if (!this._initialized) {
-      this._gpgpuSystem.update()
-      this._initialized = true
+      this._gpgpuSystem.update();
+      this._initialized = true;
     }
-    this._gpgpuSystem.update()
+    this._gpgpuSystem.update();
   }
 }

package/object/THREERibbon.js

@@ -1,10 +1,9 @@
+import FrenetSerretFrame from '@damienmortini/math/FrenetSerretFrame.js';
+
 import {
   Vector3,
-} from '../../../three/src/Three.js'
-
-import THREELine from './THREELine.js'
-
-import FrenetSerretFrame from '@damienmortini/math/FrenetSerretFrame.js'
+} from '../../../three/src/Three.js';
+import THREELine from './THREELine.js';
 
 export default class THREERibbon extends THREELine {
   constructor({
@@ -20,30 +19,30 @@ export default class THREERibbon extends THREELine {
       detail,
       geometry,
       material,
-    })
+    });
 
-    this.head = points[this.points.length - 1].clone()
+    this.head = points[this.points.length - 1].clone();
   }
 
   update() {
     if (!this._initialized) {
-      super.update()
-      this._initialized = true
-      return
+      super.update();
+      this._initialized = true;
+      return;
     }
 
-    this.userData._linePositions.copyWithin(0, 3)
-    this.userData._lineNormals.copyWithin(0, 3)
+    this.userData._linePositions.copyWithin(0, 3);
+    this.userData._lineNormals.copyWithin(0, 3);
 
-    const headId = this.points.length - 1
-    this.userData._linePositions[headId * 3] = this.head.x
-    this.userData._linePositions[headId * 3 + 1] = this.head.y
-    this.userData._linePositions[headId * 3 + 2] = this.head.z
+    const headId = this.points.length - 1;
+    this.userData._linePositions[headId * 3] = this.head.x;
+    this.userData._linePositions[headId * 3 + 1] = this.head.y;
+    this.userData._linePositions[headId * 3 + 2] = this.head.z;
 
     FrenetSerretFrame.compute({
       positions: this.userData._linePositions,
       normals: this.userData._lineNormals,
       range: [headId - 3, headId],
-    })
+    });
   }
 }

package/object/THREESky.js

@@ -1,12 +1,13 @@
+import GradientNoiseShader from '@damienmortini/core/shader/noise/GradientNoiseShader.js';
+import SkyShader from '@damienmortini/core/shader/SkyShader.js';
+
 import {
   BackSide,
+  IcosahedronBufferGeometry,
   Mesh,
   Vector3,
-  IcosahedronBufferGeometry,
-} from '../../../three/src/Three.js'
-import THREEShaderMaterial from '../material/THREEShaderMaterial.js'
-import SkyShader from '@damienmortini/core/shader/SkyShader.js'
-import GradientNoiseShader from '@damienmortini/core/shader/noise/GradientNoiseShader.js'
+} from '../../../three/src/Three.js';
+import THREEShaderMaterial from '../material/THREEShaderMaterial.js';
 
 const skyShader = {
   uniforms: {
@@ -97,7 +98,7 @@ const skyShader = {
       gl_FragColor = vec4(skyColor, 1.);
     `],
   ],
-}
+};
 
 export default class Sky extends Mesh {
   constructor({
@@ -108,174 +109,174 @@ export default class Sky extends Mesh {
       type: 'basic',
       side: BackSide,
       shaders,
-    }, skyShader)))
+    }, skyShader)));
 
-    this._radius = radius
+    this._radius = radius;
 
-    this.sunInclination = Math.PI * .5
-    this.sunAzimuth = 0
+    this.sunInclination = Math.PI * 0.5;
+    this.sunAzimuth = 0;
 
-    this.moonInclination = Math.PI * .5
-    this.moonAzimuth = Math.PI
+    this.moonInclination = Math.PI * 0.5;
+    this.moonAzimuth = Math.PI;
   }
 
   get radius() {
-    return this._radius
+    return this._radius;
   }
 
   _updatePositionFromInclinationAzimuth(position, inclination, azimuth) {
-    const theta = inclination
-    const phi = azimuth + Math.PI * .5
-    position.x = this._radius * Math.cos(phi) * Math.cos(theta)
-    position.y = this._radius * Math.sin(theta)
-    position.z = this._radius * Math.sin(phi) * Math.cos(theta)
+    const theta = inclination;
+    const phi = azimuth + Math.PI * 0.5;
+    position.x = this._radius * Math.cos(phi) * Math.cos(theta);
+    position.y = this._radius * Math.sin(theta);
+    position.z = this._radius * Math.sin(phi) * Math.cos(theta);
   }
 
   get displaySun() {
-    return this.material.displaySun === 1
+    return this.material.displaySun === 1;
   }
 
   set displaySun(value) {
-    this.material.displaySun = value ? 1 : 0
+    this.material.displaySun = value ? 1 : 0;
   }
 
   get displayMoon() {
-    return this.material.displayMoon === 1
+    return this.material.displayMoon === 1;
   }
 
   set displayMoon(value) {
-    this.material.displayMoon = value ? 1 : 0
+    this.material.displayMoon = value ? 1 : 0;
   }
 
   get sunInclination() {
-    return this._sunInclination
+    return this._sunInclination;
   }
 
   set sunInclination(value) {
-    this._sunInclination = value
-    this._updatePositionFromInclinationAzimuth(this.sunPosition, this.sunInclination, this.sunAzimuth)
+    this._sunInclination = value;
+    this._updatePositionFromInclinationAzimuth(this.sunPosition, this.sunInclination, this.sunAzimuth);
   }
 
   get sunAzimuth() {
-    return this._sunAzimuth
+    return this._sunAzimuth;
   }
 
   set sunAzimuth(value) {
-    this._sunAzimuth = value
-    this._updatePositionFromInclinationAzimuth(this.sunPosition, this.sunInclination, this.sunAzimuth)
+    this._sunAzimuth = value;
+    this._updatePositionFromInclinationAzimuth(this.sunPosition, this.sunInclination, this.sunAzimuth);
   }
 
   get sunPosition() {
-    return this.material.sunPosition
+    return this.material.sunPosition;
   }
 
   set sunPosition(value) {
-    this.material.sunPosition = value
+    this.material.sunPosition = value;
   }
 
   get sunRayleigh() {
-    return this.material.sunRayleigh
+    return this.material.sunRayleigh;
   }
 
   set sunRayleigh(value) {
-    this.material.sunRayleigh = value
+    this.material.sunRayleigh = value;
   }
 
   get sunTurbidity() {
-    return this.material.sunTurbidity
+    return this.material.sunTurbidity;
   }
 
   set sunTurbidity(value) {
-    this.material.sunTurbidity = value
+    this.material.sunTurbidity = value;
   }
 
   get sunLuminance() {
-    return this.material.sunLuminance
+    return this.material.sunLuminance;
   }
 
   set sunLuminance(value) {
-    this.material.sunLuminance = value
+    this.material.sunLuminance = value;
   }
 
   get sunMieCoefficient() {
-    return this.material.sunMieCoefficient
+    return this.material.sunMieCoefficient;
   }
 
   set sunMieCoefficient(value) {
-    this.material.sunMieCoefficient = value
+    this.material.sunMieCoefficient = value;
   }
 
   get sunMieDirectionalG() {
-    return this.material.sunMieDirectionalG
+    return this.material.sunMieDirectionalG;
   }
 
   set sunMieDirectionalG(value) {
-    this.material.sunMieDirectionalG = value
+    this.material.sunMieDirectionalG = value;
   }
 
   get moonInclination() {
-    return this._moonInclination
+    return this._moonInclination;
   }
 
   set moonInclination(value) {
-    this._moonInclination = value
-    this._updatePositionFromInclinationAzimuth(this.moonPosition, this.moonInclination, this.moonAzimuth)
+    this._moonInclination = value;
+    this._updatePositionFromInclinationAzimuth(this.moonPosition, this.moonInclination, this.moonAzimuth);
   }
 
   get moonAzimuth() {
-    return this._moonAzimuth
+    return this._moonAzimuth;
   }
 
   set moonAzimuth(value) {
-    this._moonAzimuth = value
-    this._updatePositionFromInclinationAzimuth(this.moonPosition, this.moonInclination, this.moonAzimuth)
+    this._moonAzimuth = value;
+    this._updatePositionFromInclinationAzimuth(this.moonPosition, this.moonInclination, this.moonAzimuth);
   }
 
   get moonPosition() {
-    return this.material.moonPosition
+    return this.material.moonPosition;
   }
 
   set moonPosition(value) {
-    this.material.moonPosition = value
+    this.material.moonPosition = value;
   }
 
   get moonRayleigh() {
-    return this.material.moonRayleigh
+    return this.material.moonRayleigh;
   }
 
   set moonRayleigh(value) {
-    this.material.moonRayleigh = value
+    this.material.moonRayleigh = value;
   }
 
   get moonTurbidity() {
-    return this.material.moonTurbidity
+    return this.material.moonTurbidity;
   }
 
   set moonTurbidity(value) {
-    this.material.moonTurbidity = value
+    this.material.moonTurbidity = value;
   }
 
   get moonLuminance() {
-    return this.material.moonLuminance
+    return this.material.moonLuminance;
   }
 
   set moonLuminance(value) {
-    this.material.moonLuminance = value
+    this.material.moonLuminance = value;
   }
 
   get moonMieCoefficient() {
-    return this.material.moonMieCoefficient
+    return this.material.moonMieCoefficient;
   }
 
   set moonMieCoefficient(value) {
-    this.material.moonMieCoefficient = value
+    this.material.moonMieCoefficient = value;
   }
 
   get moonMieDirectionalG() {
-    return this.material.moonMieDirectionalG
+    return this.material.moonMieDirectionalG;
   }
 
   set moonMieDirectionalG(value) {
-    this.material.moonMieDirectionalG = value
+    this.material.moonMieDirectionalG = value;
   }
 }