Shoka主题：使用Three.js实现交互式3D留声机

const { buildThreeAssets } = require('../../../../lib/build-three.cjs');

      three: theme.vendors.js.three,

      gramophone: theme.js + '/gramophone.js',

      gramophone: theme.css + '/gramophone.css',

        three: config.root + theme.js + '/three.module.min.js',

        gramophone: config.root + theme.js + '/gramophone.js',

  const threeAssets = buildThreeAssets();

  Object.entries(threeAssets).forEach(([filename, data]) => {

    outputs.push({ path: theme.js + '/' + filename, data });

  });

/* global hexo */

'use strict'

const yaml = require('js-yaml')

const escapeHTML = value => String(value == null ? '' : value)

  .replace(/&/g, '&')

  .replace(/</g, '&lt;')

  .replace(/>/g, '>')

  .replace(/"/g, '"')

  .replace(/'/g, ''')

function renderGramophone(args, content) {

  const playlists = yaml.load(content)

  if(!Array.isArray(playlists) || !playlists.length)

    throw new TypeError('gramophone 标签内需要填写至少一个歌单')

  const playlistNames = playlists.map((playlist, index) =>

    playlist && playlist.title ? playlist.title : `歌单 ${index + 1}`)

  const source = escapeHTML(JSON.stringify(playlists))

  const names = escapeHTML(JSON.stringify(playlistNames))

  return `<section id="about-gramophone" class="about-gramophone" data-gramophone-playlists="${names}" aria-label="可交互的三维黑胶留声机">

  <div class="about-gramophone__visual">

    <canvas id="about-gramophone-canvas" aria-label="三维黑胶留声机，拖动可以旋转视角，点击唱片可以播放或暂停"></canvas>

    <button class="about-gramophone__fullscreen" type="button" data-gramophone-fullscreen aria-label="全屏欣赏留声机"><i class="ic i-expand"></i></button>

    <div class="gramophone-tools" aria-label="留声机快捷操作">

      <button type="button" data-gramophone-reset title="恢复视角">↺<span>复位</span></button>

      <button type="button" data-gramophone-interact aria-pressed="false">◎<span>操作模型</span></button>

      <button type="button" data-gramophone-shelf aria-expanded="false">▤<span>挑选唱片</span></button>

      <button type="button" data-gramophone-console>♫<span>播放室</span></button>

    </div>

    <div class="gramophone-hotspot" data-gramophone-hotspot hidden></div>

    <div class="gramophone-shelf-status" data-gramophone-shelf-status hidden role="status"></div>

    <div class="gramophone-shelf-access" data-gramophone-shelf-access hidden aria-label="选择歌单唱片"></div>

    <div class="about-gramophone__loading" data-gramophone-loading role="status">

      <span></span><strong>正在为留声机上弦</strong><small>唱片与曲库准备中</small>

    </div>

  </div>

  <button class="about-gramophone__dialog-backdrop" type="button" data-gramophone-close aria-label="关闭播放面板"></button>

  <div class="about-gramophone__console" data-gramophone-dialog role="dialog" aria-modal="false" aria-hidden="true" aria-label="留声机播放控制面板">

    <div class="about-gramophone__dialog-head">

      <span><i class="ic i-music"></i> 黑胶播放室</span>

      <button type="button" data-gramophone-close aria-label="关闭播放面板"><i class="ic i-times"></i></button>

    </div>

    <div class="about-gramophone__cover"><img data-gramophone-cover src="/images/music-cover-default.svg" alt="当前歌曲封面" referrerpolicy="no-referrer"></div>

    <div class="about-gramophone__track">

      <span>NOW SPINNING</span>

      <strong data-gramophone-title>等待唱片</strong>

      <small data-gramophone-artist>加载歌单后即可开始播放</small>

      <em data-gramophone-playlist-name>默认歌单</em>

    </div>

    <div class="about-gramophone__lyrics" aria-live="polite">

      <span>实时歌词 <button type="button" data-gramophone-lyrics-toggle aria-expanded="false">展开歌词</button></span>

      <strong data-gramophone-lyric-current>等待音乐响起</strong>

      <small data-gramophone-lyric-next>歌词将在这里随播放进度更新</small>

      <div class="gramophone-lyrics-reader" data-gramophone-lyrics-reader hidden aria-label="点击歌词跳转播放"></div>

    </div>

    <div class="about-gramophone__queue">

      <div class="about-gramophone__queue-head">

        <span><i class="ic i-music"></i> 当前歌单曲目</span>

        <small data-gramophone-track-count>正在读取</small>

      </div>

      <div class="gramophone-queue-tools"><input type="search" data-gramophone-search placeholder="搜索歌名或歌手" aria-label="搜索歌名或歌手"><button type="button" data-gramophone-current-track>回到正在播放</button></div>

      <ol data-gramophone-track-list aria-label="当前歌单曲目列表"></ol>

    </div>

    <div class="about-gramophone__timeline">

      <time data-gramophone-current>00:00</time>

      <input data-gramophone-progress type="range" min="0" max="1000" value="0" aria-label="播放进度">

      <time data-gramophone-duration>00:00</time>

    </div>

    <div class="about-gramophone__modes" role="group" aria-label="播放模式">

      <span>播放模式</span>

      <button type="button" data-gramophone-mode="loop" aria-label="单曲循环"><i class="ic i-loop"></i><em>单曲循环</em></button>

      <button type="button" data-gramophone-mode="order" aria-label="列表播放"><i class="ic i-list-ol"></i><em>列表播放</em></button>

      <button type="button" data-gramophone-mode="random" aria-label="随机播放"><i class="ic i-random"></i><em>随机播放</em></button>

    </div>

    <div class="about-gramophone__controls">

      <button type="button" data-gramophone-prev aria-label="上一首"><i class="ic i-backward"></i></button>

      <button type="button" data-gramophone-stop aria-label="停止"><span aria-hidden="true">■</span></button>

      <button class="is-primary" type="button" data-gramophone-play aria-label="播放"><i class="ic i-play"></i></button>

      <button type="button" data-gramophone-next aria-label="下一首"><i class="ic i-forward"></i></button>

var gramophoneLoadId = 0

const destroyAboutGramophone = function() {

  gramophoneLoadId++

  if(window.AboutGramophone && typeof window.AboutGramophone.destroy === 'function')

    window.AboutGramophone.destroy()

}

const mountAboutGramophone = function() {

  if(!LOCAL.gramophone || !$('#about-gramophone'))

    return

  var currentLoadId = ++gramophoneLoadId

  vendorCss('gramophone')

  vendorJs('gramophone', function() {

    if(currentLoadId !== gramophoneLoadId || !LOCAL.gramophone || !$('#about-gramophone'))

      return

    vendorModule('three', function(THREE) {

      if(currentLoadId !== gramophoneLoadId || !LOCAL.gramophone || !$('#about-gramophone'))

        return

      if(window.AboutGramophone && typeof window.AboutGramophone.mount === 'function')

        window.AboutGramophone.mount({ THREE: THREE })

    })

  }, window.AboutGramophone)

}

  destroyAboutGramophone()

  mountAboutGramophone()

(function() {

  'use strict'

  var active = null

  var motionMediaQuery = null

  function prefersReducedMotion() {

    if(window.ShokaMotion && typeof window.ShokaMotion.reduced === 'function') return window.ShokaMotion.reduced()

    // The writing-room iframe can run without the site's bootstrap. A cached

    // MediaQueryList still reflects system changes on every rendered frame.

    if(!motionMediaQuery && typeof window.matchMedia === 'function') motionMediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')

    return document.documentElement.getAttribute('data-motion') === 'reduce' || !!(motionMediaQuery && motionMediaQuery.matches)

  }

  function clamp(value, min, max) {

    return Math.max(min, Math.min(max, value))

  }

  function smootherStep(value) {

    value = clamp(value, 0, 1)

    return value * value * value * (value * (value * 6 - 15) + 10)

  }

  function timeText(value) {

    if(!isFinite(value) || value < 0) value = 0

    var minutes = Math.floor(value / 60)

    var seconds = Math.floor(value % 60)

    return String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0')

  }

  function disposeObject(root) {

    root.traverse(function(object) {

      if(object.geometry) object.geometry.dispose()

      if(object.material) {

        var materials = Array.isArray(object.material) ? object.material : [object.material]

        materials.forEach(function(material) { material.dispose() })

      }

    })

  }

  function mount(options) {

    destroy()

    var THREE = options && options.THREE

    } catch(error) {

      playlistNames = []

    }

    if(!playlistNames.length) playlistNames = ['默认歌单']

    var listeners = []

    var timers = []

    var raf = 0

    var disposed = false

    var visible = true

    var dragging = false

    var moved = false

    var downX = 0

    var downY = 0

    var lastX = 0

    var lastY = 0

    var targetYaw = -0.16

    var targetPitch = -0.12

    var distance = 17.4

    var targetDistance = distance

    var fallbackFullscreen = false

    var fullscreenActive = false

    var fullscreenScrollY = 0

    var audioContext = null

    var analyser = null

    var analyserSource = null

    var frequencyData = null

    var reactiveEnergy = 0

    var recordCoverTexture = null

    var recordCoverRequest = 0

    var recordSwapStarted = 0

    var recordSwapMidpoint = false

    var recordSwapAction = null

    var selectedPlaylistIndex = 0

    var activePlaylistIndex = 0

    var shelfSelectionTouched = false

    var displayTitle = '等待唱片'

    var displayArtist = '点击侧边唱片放入唱盘'

    var ledTexture = null

    var shelfTexture = null

    var tonearmPlayingState = null

    var tonearmTransitionStarted = 0

    var tonearmTransitionFrom = 1.42

    var tonearmPlaneTilt = 0.018

    var interactiveTargets = []

    var panelIconTextures = []

    var playlistCardTextures = []

    var panelPlayIcon = null

    var panelPlayIconContext = null

    var shelfOpen = false

    var shelfExpansion = 0

    var hoveredPlaylistIndex = -1

    var playlistCards = []

    function resetView() {

      targetYaw = -0.16; targetPitch = -0.12; targetDistance = 17.4

      shelfView = null

    }

    function setModelInteraction(enabled) {

      modelInteraction = enabled

      root.classList.toggle('is-model-interactive', enabled)

      var button = root.querySelector('[data-gramophone-interact]')

      if(button) button.setAttribute('aria-pressed', String(enabled))

    }

    function playlistAvailability(index) {

      var tab = playlistTabs()[index]

      if(!tab) return '曲库加载中'

      var tracks = tab.querySelectorAll('li')

      return tracks.length ? (playlistTrackCount(index) ? playlistTrackCount(index) + ' 首可播放' : '暂无可播放歌曲') : '暂无曲目，请稍后重试'

    }

    function listen(target, type, handler, opts) {

      if(!target) return

      target.addEventListener(type, handler, opts)

      listeners.push(function() { target.removeEventListener(type, handler, opts) })

    }

    function later(fn, delay) {

      var id = window.setTimeout(fn, delay)

      timers.push(id)

      return id

    }

    renderer.shadowMap.type = THREE.PCFShadowMap

    if('outputColorSpace' in renderer && THREE.SRGBColorSpace) renderer.outputColorSpace = THREE.SRGBColorSpace

    if('toneMapping' in renderer && THREE.ACESFilmicToneMapping) renderer.toneMapping = THREE.ACESFilmicToneMapping

    renderer.toneMappingExposure = 1.16

    // Soft environment lighting plus coloured practical lights keeps the toon

    // palette readable without pushing it back toward photorealistic metal.

    scene.add(new THREE.AmbientLight(0xfffaff, 0.58))

    scene.add(new THREE.HemisphereLight(0xeaf3ff, 0x765582, 0.9))

    var key = new THREE.DirectionalLight(0xfff7fb, 1.75)

    key.position.set(4.8, 9, 7)

    key.castShadow = true

    key.shadow.mapSize.set(1024, 1024)

    scene.add(key)

    var violet = new THREE.PointLight(0xc17aff, 5.5, 16, 1.65)

    violet.position.set(-4.5, 3.6, 3.2)

    scene.add(violet)

    var cyan = new THREE.PointLight(0x54efff, 4.5, 15, 1.8)

    cyan.position.set(4.8, 2.4, -3.4)

    scene.add(cyan)

    var rose = new THREE.PointLight(0xff79c5, 4.5, 12, 1.9)

    rose.position.set(0, 5.6, 1.5)

    scene.add(rose)

    var machine = new THREE.Group()

    machine.position.set(-0.18, -1.72, 0)

    scene.add(machine)

    // Video-inspired pastel palette: dark square music box, lavender deck,

    // pink flower horn and a pale hand-drawn silhouette.

    var wood = new THREE.MeshToonMaterial({ color: 0x766188, emissive: 0x25182d, emissiveIntensity: 0.25 })

    var woodDark = new THREE.MeshToonMaterial({ color: 0x59466b, emissive: 0x160c20, emissiveIntensity: 0.24 })

    var woodEdge = new THREE.MeshToonMaterial({ color: 0x9b7fb0, emissive: 0x2b1835, emissiveIntensity: 0.24 })

      ledTexture.needsUpdate = true

    }

    var panelButtons = {}

    function makePanelButton(x, action, color) {

      var buttonMaterial = new THREE.MeshStandardMaterial({ color: color, emissive: color, emissiveIntensity: 0.18, roughness: 0.32, metalness: 0.58 })

      var button = mesh(new THREE.CylinderGeometry(0.19, 0.19, 0.12, 24), buttonMaterial, [x, 0.43, 3.32], [Math.PI / 2, 0, 0])

      button.userData.action = action

      interactiveTargets.push(button)

      mesh(new THREE.TorusGeometry(0.22, 0.025, 7, 28), brassLight, [x, 0.43, 3.39])

      panelButtons[action] = button

      return button

    }

    makePanelButton(1.3, 'prev', 0x75dfee)

    makePanelButton(1.78, 'play', 0xd776ff)

    makePanelButton(2.26, 'next', 0xff78b9)

    function drawPanelIcon(context, kind, playing) {

      context.clearRect(0, 0, 128, 128)

      context.fillStyle = '#fff9ff'

      context.strokeStyle = '#fff9ff'

      context.lineWidth = 13

      context.lineCap = 'round'

      context.lineJoin = 'round'

      context.shadowColor = kind === 'play' ? '#fff2a4' : '#bffaff'

      context.shadowBlur = 12

      if(kind === 'play' && playing) {

        context.fillRect(38, 30, 17, 68)

        context.fillRect(73, 30, 17, 68)

      } else if(kind === 'play') {

        context.beginPath()

        context.moveTo(43, 27)

        context.lineTo(96, 64)

        context.lineTo(43, 101)

        context.closePath()

        context.fill()

      } else {

        var backward = kind === 'prev'

        context.fillRect(backward ? 29 : 87, 29, 12, 70)

        context.beginPath()

        context.moveTo(backward ? 91 : 37, 28)

        context.lineTo(backward ? 43 : 85, 64)

        context.lineTo(backward ? 91 : 37, 100)

        context.closePath()

        context.fill()

      }

    }

    function makePanelIcon(x, kind) {

      var iconCanvas = document.createElement('canvas')

      iconCanvas.width = 128

      iconCanvas.height = 128

      var context = iconCanvas.getContext('2d')

      drawPanelIcon(context, kind, false)

      var texture = new THREE.CanvasTexture(iconCanvas)

      texture.needsUpdate = true

      panelIconTextures.push(texture)

      var icon = mesh(new THREE.PlaneGeometry(0.2, 0.2), new THREE.MeshBasicMaterial({ map: texture, transparent: true, depthWrite: false }), [x, 0.43, 3.405])

      icon.castShadow = false

      if(kind === 'play') {

        panelPlayIcon = texture

        panelPlayIconContext = context

      }

    }

    makePanelIcon(1.3, 'prev')

    makePanelIcon(1.78, 'play')

    makePanelIcon(2.26, 'next')

    // Side winding crank: the entire group rotates around its axle only while

    // the real audio element is playing.

    var crankGroup = new THREE.Group()

    crankGroup.position.set(-3.18, 0.48, 0.55)

    machine.add(crankGroup)

    mesh(new THREE.CylinderGeometry(0.07, 0.07, 0.52, 12), brassLight, [-0.2, 0, 0], [0, 0, Math.PI / 2], crankGroup)

    mesh(new THREE.BoxGeometry(0.09, 0.84, 0.1), brass, [-0.44, -0.36, 0], null, crankGroup)

    mesh(new THREE.CylinderGeometry(0.105, 0.125, 0.58, 14), woodEdge, [-0.72, -0.75, 0], [0, 0, Math.PI / 2], crankGroup)

    var platter = new THREE.Group()

    platter.position.set(-0.42, 0.91, 0.28)

    machine.add(platter)

    outlined(mesh(new THREE.CylinderGeometry(1.66, 1.71, 0.095, 72), woodDark, [0, 0, 0], null, platter), 1.011)

    var vinylGroup = new THREE.Group()

    platter.add(vinylGroup)

    var record = mesh(new THREE.CylinderGeometry(1.54, 1.54, 0.045, 96), vinylMaterial, [0, 0.072, 0], null, vinylGroup)

    var recordGroup = new THREE.Group()

    recordGroup.position.y = 0.102

    vinylGroup.add(recordGroup)

    var grooveMaterials = [

      new THREE.MeshBasicMaterial({ color: 0xbab0ca, transparent: true, opacity: 0.23, depthWrite: false }),

      new THREE.MeshBasicMaterial({ color: 0x665c73, transparent: true, opacity: 0.3, depthWrite: false })

    // Oversized flower horn lifted well above the deck so it frames, rather than

    // covers, the record and tonearm.

    var horn = new THREE.Group()

    horn.position.set(1.68, 4.18, -1.62)

    horn.rotation.x = 0.98

    horn.rotation.z = 0.52

    machine.add(horn)

    outlined(mesh(new THREE.CylinderGeometry(0.205, 0.145, 0.5, 24), brassLight, [0, 0.2, 0], null, horn), 1.025)

    mesh(new THREE.TorusGeometry(0.205, 0.045, 9, 32), hornDark, [0, 0.43, 0], [Math.PI / 2, 0, 0], horn)

    // The pipe enters the horn along its own axis. Slim overlapping collars

    // replace the old ball joint so throat, bend and bell read as one assembly.

    mesh(new THREE.CylinderGeometry(0.19, 0.155, 0.32, 28), hornDark, [0, -0.1, 0], null, horn)

    mesh(new THREE.TorusGeometry(0.176, 0.024, 9, 36), flowerPink, [0, 0.055, 0], [Math.PI / 2, 0, 0], horn)

    var hornLength = 3.25

    var hornPetals = 12

    var hornRadius = function(progress, angle) {

      var flare = 0.13 + progress * 0.08 + Math.pow(progress, 2.75) * 1.83

      var flower = Math.pow(clamp((progress - 0.5) / 0.5, 0, 1), 1.45)

      return flare * (1 + Math.cos(angle * hornPetals) * 0.078 * flower)

    }

    var hornPositions = []

    var hornUvs = []

    var hornIndices = []

    var hornAxial = 30

    var hornRadial = 96

    for(var hy = 0; hy <= hornAxial; hy++) {

      var hp = hy / hornAxial

      for(var hs = 0; hs <= hornRadial; hs++) {

        var ha = hs / hornRadial * Math.PI * 2

        var hr = hornRadius(hp, ha)

        hornPositions.push(Math.cos(ha) * hr, hp * hornLength, Math.sin(ha) * hr)

        hornUvs.push(hs / hornRadial, hp)

      }

    }

    for(var hi = 0; hi < hornAxial; hi++) {

      for(var hj = 0; hj < hornRadial; hj++) {

        var row = hornRadial + 1

        var a = hi * row + hj

        var b = a + row

        hornIndices.push(a, b, a + 1, b, b + 1, a + 1)

      }

    }

    var hornGeometry = new THREE.BufferGeometry()

    hornGeometry.setAttribute('position', new THREE.Float32BufferAttribute(hornPositions, 3))

    hornGeometry.setAttribute('uv', new THREE.Float32BufferAttribute(hornUvs, 2))

    hornGeometry.setIndex(hornIndices)

    hornGeometry.computeVertexNormals()

    var hornColors = []

    for(var colorIndex = 0; colorIndex < hornPositions.length; colorIndex += 3) {

      var depth = clamp(hornPositions[colorIndex + 1] / hornLength, 0, 1)

      var hornColor = new THREE.Color(0x4c215e).lerp(new THREE.Color(0xffd4e9), Math.pow(depth, 0.68))

      hornColors.push(hornColor.r, hornColor.g, hornColor.b)

    }

    hornGeometry.setAttribute('color', new THREE.Float32BufferAttribute(hornColors, 3))

    brassGlow.vertexColors = true; brassGlow.color.setHex(0xffffff)

    // The flower rim already provides a silhouette. A scaled back-face outline

    // here would cover the entire bell interior when viewed from the front.

    mesh(hornGeometry, brassGlow, null, null, horn)

    // Raised radial ribs and the scalloped flower rim make the bell read as a horn.

    for(var ribIndex = 0; ribIndex < hornPetals; ribIndex++) {

      var ribAngle = ribIndex / hornPetals * Math.PI * 2

      var ribPoints = []

      for(var ribStep = 1; ribStep <= 14; ribStep++) {

        var ribProgress = ribStep / 14

        var ribRadius = hornRadius(ribProgress, ribAngle) + 0.022

        ribPoints.push(new THREE.Vector3(Math.cos(ribAngle) * ribRadius, ribProgress * hornLength, Math.sin(ribAngle) * ribRadius))

      }

      mesh(new THREE.TubeGeometry(new THREE.CatmullRomCurve3(ribPoints), 30, 0.024 + ribIndex % 2 * 0.006, 7, false), hornDark, null, null, horn)

    }

    var bandPoints = []

    for(var bandStep = 0; bandStep < hornRadial; bandStep++) {

      var bandAngle = bandStep / hornRadial * Math.PI * 2

      var bandRadius = hornRadius(0.79, bandAngle) + 0.018

      bandPoints.push(new THREE.Vector3(Math.cos(bandAngle) * bandRadius, hornLength * 0.79, Math.sin(bandAngle) * bandRadius))

    }

    mesh(new THREE.TubeGeometry(new THREE.CatmullRomCurve3(bandPoints, true), 128, 0.026, 8, true), hornDark, null, null, horn)

    var rimPoints = []

    for(var rimStep = 0; rimStep < hornRadial; rimStep++) {

    leafShape.moveTo(0, -0.26)

    leafShape.bezierCurveTo(-0.16, -0.18, -0.2, 0.09, 0, 0.28)

    leafShape.bezierCurveTo(0.2, 0.09, 0.16, -0.18, 0, -0.26)

    var leafGeometry = new THREE.ShapeGeometry(leafShape, 16)

    var leafPositions = leafGeometry.attributes.position

    var leafUvs = leafGeometry.attributes.uv

    for(var leafVertex = 0; leafVertex < leafPositions.count; leafVertex++) {

      var leafX = leafPositions.getX(leafVertex)

      var leafY = leafPositions.getY(leafVertex)

      leafPositions.setZ(leafVertex, (1 - Math.min(1, Math.abs(leafX) / 0.2)) * 0.043 + Math.sin((leafY + 0.26) * 5) * 0.03 + leafX * leafY * 0.35)

      leafUvs.setXY(leafVertex, (leafX + 0.2) / 0.4, (leafY + 0.26) / 0.54)

    }

    leafPositions.needsUpdate = true

    leafUvs.needsUpdate = true

    leafGeometry.computeVertexNormals()

    function makeLeaf(parent, position, scale, rotation, material) {

      var leafGroup = new THREE.Group()

      leafGroup.position.set(position[0], position[1], position[2])

      if(rotation) leafGroup.rotation.set(rotation[0], rotation[1], rotation[2])

      parent.add(leafGroup)

      var texturedMaterial = material === leafBlue ? blueLeafMaterial : mintLeafMaterial

      var leaf = mesh(leafGeometry, texturedMaterial, [0, 0, 0], null, leafGroup)

      leaf.scale.set(scale[0], scale[1], Math.max(0.7, scale[2] || 1))

      var stemCurve = new THREE.QuadraticBezierCurve3(

        new THREE.Vector3(0, -0.31, 0.02),

        new THREE.Vector3(-0.01, 0, 0.055),

        new THREE.Vector3(0, 0.265, 0.03)

      )

      var veinMesh = mesh(new THREE.TubeGeometry(stemCurve, 16, 0.008, 5, false), brassLight, null, null, leafGroup)

      veinMesh.scale.set(scale[0], scale[1], 1)

      veinMesh.castShadow = false

      return leafGroup

    }

    function makeFlower(parent, position, material, scale) {

      var blossom = new THREE.Group()

      blossom.position.set(position[0], position[1], position[2])

      parent.add(blossom)

      for(var petal = 0; petal < 6; petal++) {

        var angle = petal / 6 * Math.PI * 2

        var piece = mesh(new THREE.SphereGeometry(0.12, 10, 6), material, [Math.cos(angle) * 0.18, Math.sin(angle) * 0.18, 0], null, blossom)

        piece.scale.set(0.72, 1.3, 0.4)

        piece.rotation.z = angle - Math.PI / 2

        var innerPetal = mesh(new THREE.SphereGeometry(0.075, 9, 5), material, [Math.cos(angle + 0.18) * 0.1, Math.sin(angle + 0.18) * 0.1, 0.045], null, blossom)

        innerPetal.scale.set(0.68, 1.12, 0.36)

        innerPetal.rotation.z = angle - Math.PI / 2

      }

      mesh(new THREE.SphereGeometry(0.092, 12, 8), flowerYellow, [0, 0, 0.08], null, blossom)

      blossom.scale.setScalar(scale || 1)

      return blossom

    }

    function makeGrassCluster(position, material, size) {

      var grass = new THREE.Group()

      grass.position.set(position[0], position[1], position[2])

      machine.add(grass)

      for(var blade = 0; blade < 9; blade++) {

        var angle = blade / 9 * Math.PI * 2

        var height = (0.28 + (blade % 4) * 0.065) * (size || 1)

        var lean = 0.12 + (blade % 3) * 0.045

        var curve = new THREE.QuadraticBezierCurve3(

          new THREE.Vector3(0, 0, 0),

          new THREE.Vector3(Math.cos(angle) * lean * 0.35, height * 0.62, Math.sin(angle) * lean * 0.35),

          new THREE.Vector3(Math.cos(angle) * lean, height, Math.sin(angle) * lean)

        )

        mesh(new THREE.TubeGeometry(curve, 10, 0.012, 5, false), blade % 2 ? material : mint, null, null, grass)

      }

      return grass

    }

    function makePlant(position, tall) {

      var plant = new THREE.Group()

      plant.position.set(position[0], position[1], position[2])

      machine.add(plant)

      outlined(mesh(new THREE.CylinderGeometry(0.29, 0.37, 0.42, 10), flowerPink, [0, 0.21, 0], null, plant), 1.03)

      mesh(new THREE.TorusGeometry(0.31, 0.045, 6, 24), brassLight, [0, 0.41, 0], [Math.PI / 2, 0, 0], plant)

      mesh(new THREE.CylinderGeometry(0.275, 0.275, 0.035, 20), soil, [0, 0.415, 0], null, plant)

      mesh(new THREE.TorusGeometry(0.25, 0.014, 5, 20), woodEdge, [0, 0.435, 0], [Math.PI / 2, 0, 0], plant)

      var stemHeight = tall ? 1.36 : 0.82

      ;[-0.21, -0.08, 0.06, 0.23].forEach(function(x, index) {

        var height = stemHeight * (0.64 + index * 0.075 + (index % 2) * 0.08)

        var z = (index % 3 - 1) * 0.08

        var stemBaseY = 0.41

        mesh(new THREE.CylinderGeometry(0.018, 0.027, height, 8), mint, [x, stemBaseY + height / 2, z], [0, 0, x * -0.42], plant)

        // Four smaller leaves alternate along each stem. The side changes for

        // neighbouring stems as well, creating a natural staggered bouquet.

    // visible while preserving the asymmetrical garden composition.

    makePlant([2.28, 0.87, 0.32], true)

    makePlant([-2.35, 0.87, 2.0], false)

    makeGrassCluster([0.92, 0.88, 2.54], leafBlue, 0.72)

    makeGrassCluster([-1.72, 0.88, 2.36], mint, 0.88)

    makeGrassCluster([1.92, 0.88, -2.28], leafBlue, 0.78)

    ;[[1.42, 0.91, 2.48], [2.67, 0.9, 0.48], [-1.48, 0.9, 2.52]].forEach(function(p, index) {

      var pebble = mesh(new THREE.SphereGeometry(0.1 + index * 0.018, 10, 6), index % 2 ? brassLight : woodEdge, p)

      pebble.scale.set(1.35, 0.38, 1)

    })

    // A two-tier fountain sits closer to the visual centre. Two continuous,

    // translucent curtains contain layered blue flow lines; no particle spray

    // is used, keeping the small decorative model calm and readable.

    var fountain = new THREE.Group()

    fountain.position.set(1.66, 0.88, 1.94)

    fountain.scale.setScalar(1.16)

    machine.add(fountain)

    outlined(mesh(new THREE.CylinderGeometry(0.61, 0.69, 0.18, 40), woodEdge, [0, 0.09, 0], null, fountain), 1.025)

    mesh(new THREE.TorusGeometry(0.59, 0.082, 9, 52), brass, [0, 0.19, 0], [Math.PI / 2, 0, 0], fountain)

    var fountainSurfaceMaterial = new THREE.MeshBasicMaterial({

      color: 0x3ddff5,

      transparent: true,

      opacity: 0.76,

      depthWrite: false

    })

    mesh(new THREE.CylinderGeometry(0.55, 0.55, 0.04, 52), fountainSurfaceMaterial, [0, 0.21, 0], null, fountain)

    outlined(mesh(new THREE.CylinderGeometry(0.11, 0.18, 0.4, 28), brassLight, [0, 0.42, 0], null, fountain), 1.024)

    outlined(mesh(new THREE.CylinderGeometry(0.35, 0.23, 0.105, 40), woodEdge, [0, 0.63, 0], null, fountain), 1.022)

    mesh(new THREE.TorusGeometry(0.33, 0.052, 8, 44), brass, [0, 0.69, 0], [Math.PI / 2, 0, 0], fountain)

    mesh(new THREE.CylinderGeometry(0.295, 0.295, 0.03, 44), fountainSurfaceMaterial, [0, 0.7, 0], null, fountain)

    mesh(new THREE.CylinderGeometry(0.052, 0.082, 0.28, 20), brassLight, [0, 0.85, 0], null, fountain)

    var fountainWaterMaterial = new THREE.MeshBasicMaterial({

      color: 0x147fb8,

      transparent: true,

      opacity: 0.58,

      side: THREE.DoubleSide,

      depthWrite: false

    })

    var fountainSheetMaterial = new THREE.MeshBasicMaterial({

      color: 0x118fbd,

      transparent: true,

      opacity: 0.46,

      side: THREE.DoubleSide,

      depthWrite: false

    })

    var fountainUpperWater = new THREE.Group()

    var fountainLowerWater = new THREE.Group()

    fountain.add(fountainUpperWater)