@damienmortini/three 0.1.131

package/object/THREESky.js

@@ -0,0 +1,279 @@
+import { BackSide } from '../../../three/src/constants.js'
+import { Mesh } from '../../../three/src/objects/Mesh.js'
+import { Vector3 } from '../../../three/src/math/Vector3.js'
+import { IcosahedronBufferGeometry } from '../../../three/src/geometries/IcosahedronGeometry.js'
+import THREEShaderMaterial from '../material/THREEShaderMaterial.js'
+import SkyShader from '../../core/shader/SkyShader.js'
+import GradientNoiseShader from '../../core/shader/noise/GradientNoiseShader.js'
+
+const skyShader = {
+  uniforms: {
+    sunPosition: new Vector3(0, 1, 0),
+    sunRayleigh: 1.5,
+    sunTurbidity: 6,
+    sunLuminance: 1,
+    sunMieCoefficient: 0.005,
+    sunMieDirectionalG: 0.8,
+    moonPosition: new Vector3(0, 1, 0),
+    moonRayleigh: 0,
+    moonTurbidity: 1.5,
+    moonLuminance: 1.1,
+    moonMieCoefficient: 0.005,
+    moonMieDirectionalG: 0.8,
+    displaySun: 1,
+    displayMoon: 1,
+  },
+  vertexShaderChunks: [
+    ['start', `
+      varying vec3 vWorldPosition;
+    `],
+    ['end', `
+      vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
+      vWorldPosition = worldPosition.xyz;
+
+      gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
+    `],
+  ],
+  fragmentShaderChunks: [
+    ['start', `
+      uniform vec3 sunPosition;
+      uniform float sunRayleigh;
+      uniform float sunTurbidity;
+      uniform float sunLuminance;
+      uniform float sunMieCoefficient;
+      uniform float sunMieDirectionalG;
+      uniform float displaySun;
+      uniform float displayMoon;
+
+      uniform vec3 moonPosition;
+      uniform float moonRayleigh;
+      uniform float moonTurbidity;
+      uniform float moonLuminance;
+      uniform float moonMieCoefficient;
+      uniform float moonMieDirectionalG;
+
+      varying vec3 vWorldPosition;
+
+      ${SkyShader.computeSkyColor()}
+
+      ${GradientNoiseShader.gradientNoise3D()}
+
+      float blendScreen(float base, float blend) {
+        return 1.0-((1.0-base)*(1.0-blend));
+      }
+      
+      vec3 blendScreen(vec3 base, vec3 blend) {
+        return vec3(blendScreen(base.r,blend.r),blendScreen(base.g,blend.g),blendScreen(base.b,blend.b));
+      }
+    `],
+    ['end', `
+      vec3 normalizedSunPosition = normalize(sunPosition);
+      vec3 normalizedMoonPosition = normalize(moonPosition);
+      
+      vec4 skySunColor = computeSkyColor(vWorldPosition, normalizedSunPosition, ${SkyShader.SUN_ANGULAR_DIAMETER} * displaySun, sunRayleigh, sunTurbidity, sunLuminance, sunMieCoefficient, sunMieDirectionalG);
+      vec4 skyMoonColor = computeSkyColor(vWorldPosition, normalizedMoonPosition, ${SkyShader.MOON_ANGULAR_DIAMETER} * displayMoon, moonRayleigh, moonTurbidity, moonLuminance, moonMieCoefficient, moonMieDirectionalG);
+
+      float nightIntensity = 1. - smoothstep(-.05, 0., normalizedSunPosition.y);
+
+      float moonIntensity = max(0., -dot(normalize(sunPosition.xz), normalize(moonPosition.xz)));
+      // skyMoonColor *= moonIntensity;
+      skyMoonColor *= nightIntensity;
+
+      // Stars
+      vec3 rayDirection = normalize(vWorldPosition);
+      float starsIntensity = gradientNoise3D(rayDirection * 400.) * .5 + .5;
+      starsIntensity = pow(starsIntensity, 15.);
+      starsIntensity *= max(0., rayDirection.y);
+      starsIntensity *= 10.;
+      starsIntensity *= nightIntensity;
+
+      skyMoonColor.rgb = blendScreen(skyMoonColor.rgb, vec3(starsIntensity));
+
+      vec3 skyColor = blendScreen(skySunColor.rgb, skyMoonColor.rgb);
+
+      // gl_FragColor = vec4(skyColor, (skySunColor.a + skyMoonColor.a) / 2.);
+      gl_FragColor = vec4(skyColor, 1.);
+    `],
+  ],
+}
+
+export default class Sky extends Mesh {
+  constructor({
+    radius = 1,
+    shaders = [],
+  } = {}) {
+    super(new IcosahedronBufferGeometry(radius, 3), new THREEShaderMaterial(Object.assign({
+      type: 'basic',
+      side: BackSide,
+      shaders,
+    }, skyShader)))
+
+    this._radius = radius
+
+    this.sunInclination = Math.PI * .5
+    this.sunAzimuth = 0
+
+    this.moonInclination = Math.PI * .5
+    this.moonAzimuth = Math.PI
+  }
+
+  get 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)
+  }
+
+  get displaySun() {
+    return this.material.displaySun === 1
+  }
+
+  set displaySun(value) {
+    this.material.displaySun = value ? 1 : 0
+  }
+
+  get displayMoon() {
+    return this.material.displayMoon === 1
+  }
+
+  set displayMoon(value) {
+    this.material.displayMoon = value ? 1 : 0
+  }
+
+  get sunInclination() {
+    return this._sunInclination
+  }
+
+  set sunInclination(value) {
+    this._sunInclination = value
+    this._updatePositionFromInclinationAzimuth(this.sunPosition, this.sunInclination, this.sunAzimuth)
+  }
+
+  get sunAzimuth() {
+    return this._sunAzimuth
+  }
+
+  set sunAzimuth(value) {
+    this._sunAzimuth = value
+    this._updatePositionFromInclinationAzimuth(this.sunPosition, this.sunInclination, this.sunAzimuth)
+  }
+
+  get sunPosition() {
+    return this.material.sunPosition
+  }
+
+  set sunPosition(value) {
+    this.material.sunPosition = value
+  }
+
+  get sunRayleigh() {
+    return this.material.sunRayleigh
+  }
+
+  set sunRayleigh(value) {
+    this.material.sunRayleigh = value
+  }
+
+  get sunTurbidity() {
+    return this.material.sunTurbidity
+  }
+
+  set sunTurbidity(value) {
+    this.material.sunTurbidity = value
+  }
+
+  get sunLuminance() {
+    return this.material.sunLuminance
+  }
+
+  set sunLuminance(value) {
+    this.material.sunLuminance = value
+  }
+
+  get sunMieCoefficient() {
+    return this.material.sunMieCoefficient
+  }
+
+  set sunMieCoefficient(value) {
+    this.material.sunMieCoefficient = value
+  }
+
+  get sunMieDirectionalG() {
+    return this.material.sunMieDirectionalG
+  }
+
+  set sunMieDirectionalG(value) {
+    this.material.sunMieDirectionalG = value
+  }
+
+  get moonInclination() {
+    return this._moonInclination
+  }
+
+  set moonInclination(value) {
+    this._moonInclination = value
+    this._updatePositionFromInclinationAzimuth(this.moonPosition, this.moonInclination, this.moonAzimuth)
+  }
+
+  get moonAzimuth() {
+    return this._moonAzimuth
+  }
+
+  set moonAzimuth(value) {
+    this._moonAzimuth = value
+    this._updatePositionFromInclinationAzimuth(this.moonPosition, this.moonInclination, this.moonAzimuth)
+  }
+
+  get moonPosition() {
+    return this.material.moonPosition
+  }
+
+  set moonPosition(value) {
+    this.material.moonPosition = value
+  }
+
+  get moonRayleigh() {
+    return this.material.moonRayleigh
+  }
+
+  set moonRayleigh(value) {
+    this.material.moonRayleigh = value
+  }
+
+  get moonTurbidity() {
+    return this.material.moonTurbidity
+  }
+
+  set moonTurbidity(value) {
+    this.material.moonTurbidity = value
+  }
+
+  get moonLuminance() {
+    return this.material.moonLuminance
+  }
+
+  set moonLuminance(value) {
+    this.material.moonLuminance = value
+  }
+
+  get moonMieCoefficient() {
+    return this.material.moonMieCoefficient
+  }
+
+  set moonMieCoefficient(value) {
+    this.material.moonMieCoefficient = value
+  }
+
+  get moonMieDirectionalG() {
+    return this.material.moonMieDirectionalG
+  }
+
+  set moonMieDirectionalG(value) {
+    this.material.moonMieDirectionalG = value
+  }
+}

package/object/THREESprite.js

@@ -0,0 +1,96 @@
+import { Object3D, Mesh, Color, PlaneGeometry, Texture, DoubleSide, LinearFilter } from '../../../three/build/three.module.js'
+
+import THREEShaderMaterial from './THREEShaderMaterial.js'
+
+const CACHED_IMAGES = new Map()
+
+export default class Sprite extends Object3D {
+  constructor(image, { data, frame, scale = 1 } = {}) {
+    super()
+
+    this._data = data
+    this._image = image
+    this._scale = scale
+
+    // Optimise images decoding
+    let canvas = CACHED_IMAGES.get(this.image)
+
+    if (!canvas) {
+      canvas = document.createElement('canvas')
+      canvas.width = this.image.width
+      canvas.height = this.image.height
+      const context = canvas.getContext('2d')
+      context.drawImage(this.image, 0, 0)
+      CACHED_IMAGES.set(this.image, canvas)
+    }
+
+    this.mesh = new Mesh(new PlaneGeometry(1, 1), new THREEShaderMaterial({
+      type: 'basic',
+      transparent: true,
+      side: DoubleSide,
+      uniforms: {
+        diffuse: new Color(0xffffff),
+        map: new Texture(canvas),
+      },
+    }))
+    this.mesh.scale.x = canvas.width * this._scale
+    this.mesh.scale.y = canvas.height * this._scale
+    this.mesh.material.map.minFilter = LinearFilter
+    this.mesh.material.map.generateMipmaps = false
+    this.mesh.material.map.needsUpdate = true
+
+    this.add(this.mesh)
+
+    if (frame) {
+      this.frame = frame
+    }
+  }
+
+  get image() {
+    return this._image
+  }
+
+  get data() {
+    return this._data
+  }
+
+  set material(value) {
+    this.mesh.material = value
+    this.frame = this.frame
+  }
+
+  get material() {
+    return this.mesh.material
+  }
+
+  set frame(value) {
+    if (!this.data) {
+      return
+    }
+
+    this._frame = value
+
+    const offsetRepeat = this.mesh.material.offsetRepeat
+    const frameData = this.data.frames[this._frame]
+
+    offsetRepeat.z = (frameData.rotated ? frameData.frame.h : frameData.frame.w) / this.image.width
+    offsetRepeat.w = (frameData.rotated ? frameData.frame.w : frameData.frame.h) / this.image.height
+
+    offsetRepeat.x = frameData.frame.x / this.image.width
+    offsetRepeat.y = 1. - frameData.frame.y / this.image.height - offsetRepeat.w
+
+    const scale = 1 / parseFloat(this.data.meta.scale)
+
+    this.mesh.scale.x = (frameData.rotated ? frameData.frame.h : frameData.frame.w) * scale * this._scale
+    this.mesh.scale.y = (frameData.rotated ? frameData.frame.w : frameData.frame.h) * scale * this._scale
+
+    this.mesh.position.x = (-(frameData.sourceSize.w - frameData.frame.w) * .5 + frameData.spriteSourceSize.x + frameData.sourceSize.w * (.5 - frameData.pivot.x)) * scale * this._scale
+    this.mesh.position.y = ((frameData.sourceSize.h - frameData.frame.h) * .5 - frameData.spriteSourceSize.y - frameData.sourceSize.h * (.5 - frameData.pivot.y)) * scale * this._scale
+
+    this.mesh.rotation.z = frameData.rotated ? Math.PI * .5 : 0
+  }
+
+  get frame() {
+    return this._frame
+  }
+}

package/object/THREESpriteAnimation.js

@@ -0,0 +1,103 @@
+
+import THREESprite from './THREESprite.js'
+
+import Signal from '../../core/util/Signal'
+import Ticker from '../../core/util/Ticker'
+
+const SPRITESHEETS = new Map()
+
+export default class THREESpriteAnimation extends THREESprite {
+  constructor(image, data, animation, {
+    speed = 1,
+    fps = 25,
+    loop = true,
+    reverse = false,
+    scale = 1,
+    autoplay = true,
+  } = {}) {
+    let animations = SPRITESHEETS.get(data)
+    if (!animations) {
+      animations = new Map()
+      for (const key in data.frames) {
+        const match = /(.*?)([0-9]+)[$\.]/.exec(key)
+        const animationName = match[1]
+        let frames = animations.get(animationName)
+        if (!frames) {
+          frames = []
+          animations.set(animationName, frames)
+        }
+        const position = parseInt(match[2])
+        frames[position - 1] = key
+      }
+      SPRITESHEETS.set(data, animations)
+    }
+
+    super(image, {
+      data,
+      frame: animations.get(animation)[0],
+      scale,
+    })
+
+    this.onAnimationEnd = new Signal()
+
+    this._progress = 0
+    this._animations = animations
+
+    this.loop = loop
+    this.reverse = reverse
+    this.speed = speed
+    this.fps = fps
+    this.animation = animation
+
+    if (autoplay) {
+      this.play()
+    }
+  }
+
+  set animation(value) {
+    if (this._animation === value) {
+      return
+    }
+    this._animation = value
+
+    this.update()
+  }
+
+  get animation() {
+    return this._animation
+  }
+
+  play() {
+    Ticker.add(this._updateBound = this._updateBound || this.update.bind(this))
+  }
+
+  stop() {
+    Ticker.delete(this._updateBound)
+  }
+
+  set progress(value) {
+    if (this._progress === value) {
+      return
+    }
+    const previousProgress = this._progress
+    this._progress = value
+    if (this.loop) {
+      this._progress = ((this._progress % 1) + 1) % 1
+    } else {
+      this._progress = Math.min(Math.max(this._progress, 0), 1)
+      if (previousProgress !== this._progress && (this._progress === 1 && !this.reverse || this._progress === 0 && this.reverse)) {
+        this.onAnimationEnd.dispatch()
+      }
+    }
+  }
+
+  get progress() {
+    return this._progress
+  }
+
+  update() {
+    const frames = this._animations.get(this.animation)
+    this.progress += (this.speed * (this.fps / 60) * Ticker.timeScale / frames.length) * (this.reverse ? -1 : 1)
+    this.frame = frames[Math.round(this._progress * (frames.length - 1))]
+  }
+}

package/object/THREEText.js

@@ -0,0 +1,240 @@
+import { Object3D } from '../../../three/src/core/Object3D.js'
+import { Mesh } from '../../../three/src/objects/Mesh.js'
+import { PlaneGeometry } from '../../../three/src/geometries/PlaneGeometry.js'
+import { Texture } from '../../../three/src/textures/Texture.js'
+import { LinearFilter } from '../../../three/src/constants.js'
+
+import THREEShaderMaterial from '../material/THREEShaderMaterial.js'
+
+export default class THREEText extends Object3D {
+  constructor({
+    textContent = '',
+    font = '10px sans-serif',
+    fillStyle = 'black',
+    textAlign = 'start',
+    shadowColor = 'rgba(0, 0, 0 ,0)',
+    shadowBlur = 0,
+    shadowOffsetX = 0,
+    shadowOffsetY = 0,
+    scale = 1,
+    maxWidth = Infinity,
+    geometry = new PlaneGeometry(1, 1),
+    material = new THREEShaderMaterial({
+      type: 'basic',
+      transparent: true,
+    }),
+  } = {}) {
+    super()
+
+    this._scale = scale
+
+    this._canvas = document.createElement('canvas')
+    this._context = this._canvas.getContext('2d')
+
+    this._texture = new Texture(this._canvas)
+
+    material.map = this._texture
+
+    this.textContent = textContent
+    this.font = font
+    this.fillStyle = fillStyle
+    this.textAlign = textAlign
+    this.maxWidth = maxWidth
+    this.shadowColor = shadowColor
+    this.shadowBlur = shadowBlur
+    this.shadowOffsetX = shadowOffsetX
+    this.shadowOffsetY = shadowOffsetY
+
+    this._mesh = new Mesh(geometry, material)
+    this.add(this._mesh)
+
+    this._update()
+  }
+
+  _updateContextProperties() {
+    this._context.font = this.font
+    this._context.fillStyle = this.fillStyle
+    this._context.shadowColor = this.shadowColor
+    this._context.shadowBlur = this.shadowBlur
+    this._context.shadowOffsetX = this.shadowOffsetX
+    this._context.shadowOffsetY = this.shadowOffsetY
+    this._context.textBaseline = 'top'
+  }
+
+  _update() {
+    if (!this._mesh) {
+      return
+    }
+
+    this._updateContextProperties()
+
+    const shadowOffsetX = this.shadowOffsetX - this.shadowBlur
+    const shadowOffsetY = this.shadowOffsetY - this.shadowBlur
+
+    const words = this.textContent.split(' ')
+
+    const spaceWidth = this._context.measureText(' ').width
+    const wordsWidth = new Map()
+    const lines = [{
+      textContent: '',
+      width: 0,
+    }]
+    for (const word of words) {
+      if (!wordsWidth.get(word)) {
+        wordsWidth.set(word, this._context.measureText(word).width)
+      }
+    }
+
+    let width = 0
+    let lineNumber = 0
+    for (const word of words) {
+      const newWidth = lines[lineNumber].width + wordsWidth.get(word)
+
+      if (newWidth > this.maxWidth) {
+        lineNumber++
+        lines[lineNumber] = {
+          textContent: word,
+          width: wordsWidth.get(word),
+        }
+      } else {
+        if (lines[lineNumber].textContent !== '') {
+          lines[lineNumber].textContent += ' '
+        }
+        lines[lineNumber].textContent += word
+        lines[lineNumber].width += spaceWidth + wordsWidth.get(word)
+      }
+      width = Math.max(width, lines[lineNumber].width)
+    }
+
+    width += this.shadowBlur * 2 + Math.abs(this.shadowOffsetX)
+
+    const lineHeight = parseFloat(/\b(\d*)px/.exec(this._context.font)[1])
+    let height = lineHeight
+    height *= lines.length
+    height += this.shadowBlur * 2 + Math.abs(this.shadowOffsetY)
+
+    if (this._canvas.width !== width || this._canvas.height !== height) {
+      this._canvas.width = width
+      this._canvas.height = height
+      this._updateContextProperties()
+    }
+
+    this._mesh.position.y = -shadowOffsetY * .5 * this._scale
+
+    if (this.textAlign === 'start' || this.textAlign === 'left') {
+      this._mesh.position.x = (this._canvas.width * .5 + Math.min(0, shadowOffsetX)) * this._scale
+    } else if (this.textAlign === 'end' || this.textAlign === 'right') {
+      this._mesh.position.x = (-this._canvas.width * .5 + Math.max(0, shadowOffsetX)) * this._scale
+    } else {
+      this._mesh.position.x = shadowOffsetX * .5 * this._scale
+    }
+    this._mesh.scale.x = this._canvas.width * this._scale
+    this._mesh.scale.y = this._canvas.height * this._scale
+    this._context.globalAlpha = 1 / 255
+    this._context.fillRect(0, 0, width, height)
+    this._context.globalAlpha = 1
+    for (const [i, line] of lines.entries()) {
+      let offsetX
+      switch (this.textAlign) {
+        case 'start':
+        case 'left':
+          offsetX = 0
+          break
+        case 'center':
+          offsetX = (width - line.width) * .5
+          break
+        case 'end':
+        case 'right':
+          offsetX = width - line.width
+          break
+      }
+      this._context.fillText(line.textContent, offsetX + (shadowOffsetX < 0 ? Math.abs(shadowOffsetX) : 0), (shadowOffsetY < 0 ? Math.abs(shadowOffsetY) : 0) + lineHeight * i)
+    }
+    this._texture.needsUpdate = true
+  }
+
+  get material() {
+    return this._mesh.material
+  }
+
+  set textContent(value) {
+    this._textContent = value
+    this._update()
+  }
+
+  get textContent() {
+    return this._textContent
+  }
+
+  set font(value) {
+    this._context.font = this._font = value
+    this._update()
+  }
+
+  get font() {
+    return this._font
+  }
+
+  set fillStyle(value) {
+    this._context.fillStyle = this._fillStyle = value
+    this._update()
+  }
+
+  get fillStyle() {
+    return this._fillStyle
+  }
+
+  set textAlign(value) {
+    this._textAlign = value
+    this._update()
+  }
+
+  get textAlign() {
+    return this._textAlign
+  }
+
+  set maxWidth(value) {
+    this._maxWidth = value
+    this._update()
+  }
+
+  get maxWidth() {
+    return this._maxWidth
+  }
+
+  set shadowColor(value) {
+    this._context.shadowColor = this._shadowColor = value
+    this._update()
+  }
+
+  get shadowColor() {
+    return this._shadowColor
+  }
+
+  set shadowBlur(value) {
+    this._context.shadowBlur = this._shadowBlur = value
+    this._update()
+  }
+
+  get shadowBlur() {
+    return this._shadowBlur
+  }
+
+  set shadowOffsetX(value) {
+    this._context.shadowOffsetX = this._shadowOffsetX = value
+    this._update()
+  }
+
+  get shadowOffsetX() {
+    return this._shadowOffsetX
+  }
+
+  set shadowOffsetY(value) {
+    this._context.shadowOffsetY = this._shadowOffsetY = value
+    this._update()
+  }
+
+  get shadowOffsetY() {
+    return this._shadowOffsetY
+  }
+}