[!!!!!!!!!!!!!!!] Remove new-home

package.json

@@ -14,10 +14,8 @@
         "emoji-regex": "^10.2.1",
         "linkify-urls": "^4.0.0",
         "marked": "^4.2.12",
-        "meshline": "^3.1.6",
         "moment": "^2.29.4",
         "tg-blog": "^1.1.0",
-        "three": "^0.150.1",
         "vue": "^3.2.47",
         "vue-i18n": "^9.2.2",
         "vue-router": "^4.1.6",
@@ -28,7 +26,6 @@
         "@types/jqueryui": "^1.12.16",
         "@types/marked": "^4.0.7",
         "@types/node": "^18.14.5",
-        "@types/three": "^0.149.0",
         "@vitejs/plugin-vue": "^4.0.0",
         "eslint": "^8.35.0",
         "sass": "^1.58.3",

src/animation/Config.ts

@@ -1,34 +0,0 @@
-import {Color} from "three";
-
-/**
- * Configurations
- */
-export const config = {
-
-    // Field of vision and cutoff frustum for near and far
-    cam: {fov: 50, near: 1, far: 5000},
-
-    // Smooth movements (speeds are in terms of pixels per ms)
-    smooth: {mouseSpeed: 10 * window.devicePixelRatio},
-
-    // Cursor
-    cursor: {radius: 2, width: 0.3, color: new Color('#333')},
-
-    // Debug mode
-    debug: false,
-
-    // Edit mode
-    editMode: true,
-
-    // Editor config
-    editor: {zMin: 70, zMax: 90}
-}
-
-export const colors = {
-    sky: {
-        top: new Color('#3284ff'),
-        bottom: new Color('#ffffff'),
-        ground: new Color('#ffc87f'),
-        dirLight: new Color('#fff4e5')
-    },
-}

src/animation/Helpers.ts

@@ -1,62 +0,0 @@
-import * as THREE from 'three'
-
-/**
- * Create a 3D box geometry made out of dashed lines
- * @param width
- * @param height
- * @param depth
- */
-export function box(width: number, height: number, depth: number): THREE.BufferGeometry
-{
-    width = width * 0.5
-    height = height * 0.5
-    depth = depth * 0.5
-
-    const geometry = new THREE.BufferGeometry();
-    const position = [];
-
-    for (const x of [-1, 1])
-        for (const y of [-1, 1])
-            for (const z of [-1, 1])
-            {
-                const rx = x * width, ry = y * height, rz = z * depth
-                position.push(rx, ry, rz)
-                position.push(rx * -x, ry, rz)
-                position.push(rx, ry, rz)
-                position.push(rx, ry * -y, rz)
-                position.push(rx, ry, rz)
-                position.push(rx, ry, rz * -z)
-            }
-
-    geometry.setAttribute('position', new THREE.Float32BufferAttribute(position, 3))
-    return geometry
-}
-
-/**
- * Create a 2D circle
- * @param color
- * @param z
- * @param r
- * @param hollow
- */
-export function circle(color: THREE.Color | number | string, z: number, r: number): THREE.Mesh
-{
-    const geometry = new THREE.CircleGeometry(r, 64)
-    const material = new THREE.MeshBasicMaterial({color})
-    const circle = new THREE.Mesh(geometry, material)
-    circle.position.z = z
-    return circle
-}
-
-/**
- * Ignore depth https://stackoverflow.com/a/62818553/7346633
- * @param obj
- * @param material
- */
-export function alwaysOnTop(obj: THREE.Object3D, material: THREE.Material): void
-{
-    obj.renderOrder = 999
-    material.depthTest = false
-    material.depthWrite = false
-    obj.onBeforeRender = (r) => r.clearDepth()
-}

src/animation/Home.ts

@@ -1,156 +0,0 @@
-import * as THREE from 'three'
-import {Color} from 'three'
-import * as helper from "@/animation/Helpers"
-import {initMouseTracker} from "@/animation/Trackers"
-import {addDirLight, addGround, addHemiLight, addSky} from "@/animation/Shaders"
-import {config} from "@/animation/Config"
-import Cursor from "@/animation/components/Cursor";
-import IUpdatable from "@/animation/components/IUpdatable";
-import Grid from "@/animation/components/Grid";
-import Editor from "@/animation/components/Editor";
-
-export let renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.PerspectiveCamera
-export let editor: Editor
-const clock = new THREE.Clock()
-export const objects: { [id: string]: THREE.Object3D } = {}
-const updatable: IUpdatable[] = []
-
-// ////////////////////
-// Three.js scene code
-
-function init(): void
-{
-    const geometryBox = helper.box(50, 50, 1000)
-
-    const lineSegments = new THREE.LineSegments(geometryBox, new THREE.LineDashedMaterial({
-        color: "#420000",
-        dashSize: 3,
-        gapSize: 1
-    }))
-    lineSegments.computeLineDistances()
-
-    updatable.push(new Cursor(scene, config.cursor, camera))
-    updatable.push(new Grid(), editor = new Editor())
-
-    objects.box = lineSegments
-    scene.add(lineSegments)
-
-    // scene.add(circle(0xffff00, 0, 5))
-    // scene.add(circle(0xff00ff, 1, 4))
-    // scene.add(circle(0x0000ff, 2, 3))
-    // scene.add(circle(0x00ffff, 3, 2))
-    // scene.add(circle(0xff0000, 4, 1))
-}
-
-// Buffer for smooth update
-const smoothBuffer = {cam: {x: 0, y: 0}}
-
-function pn(b: boolean): number
-{
-    return b ? 1 : -1
-}
-
-/**
- * Update frame
- *
- * @param dt delta time in ms
- */
-function update(dt: number): void
-{
-    // objects['cursor'].position.set(moused.x, moused.y, 150)
-
-    // smoothBuffer.cam.x = moused.x * config.mouseFactor
-    // smoothBuffer.cam.y = moused.y * config.mouseFactor
-    // smoothUpdate()
-
-    // const time = Date.now() * 0.001
-    // objects.box.rotation.x = 0.25 * time
-    // objects.box.rotation.y = 0.25 * time
-
-    function smoothUpdate(): void
-    {
-        // Pixels moved = speed * time
-        const delta = config.smooth.mouseSpeed * dt
-        // Current position
-        const cp = camera.position
-        // Target position
-        const tp = smoothBuffer.cam
-
-        if (Math.abs(cp.x - tp.x) > delta)
-        {
-            cp.x = cp.x + delta * pn(cp.x < tp.x)
-        } else
-        {
-            cp.x = tp.x
-        }
-
-        if (Math.abs(cp.y - tp.y) > delta)
-        {
-            cp.y = cp.y + delta * pn(cp.y < tp.y)
-        } else
-        {
-            cp.y = tp.y
-        }
-    }
-}
-
-// ///////////////////
-// Three.js meta code
-
-/**
- * Start the three.js rendering engine
- *
- * @param id: Canvas element id
- */
-export function start(id: string): void
-{
-    scene = new THREE.Scene()
-    scene.background = new Color('#f9f2e0')
-    // Create camera
-    camera = new THREE.PerspectiveCamera(config.cam.fov, window.innerWidth / window.innerHeight,
-        config.cam.near, config.cam.far)
-    camera.position.set(0, 0, 200)
-    camera.lookAt(0, 0, 0)
-
-    // @ts-ignore Create WebGL Renderer
-    renderer = new THREE.WebGLRenderer({canvas: document.getElementById(id), antialias: true})
-    onWindowResize()
-    window.addEventListener('resize', onWindowResize)
-
-    addLights()
-
-    init()
-    initMouseTracker()
-    animate()
-}
-
-function addLights(): void
-{
-    objects.hemiLight = addHemiLight(scene)
-    objects.dirLight = addDirLight(scene)
-    objects.ground = addGround(scene)
-    objects.sky = addSky(scene)
-    objects.sky.visible = false
-    objects.ground.visible = false
-
-    renderer.outputEncoding = THREE.sRGBEncoding
-    renderer.shadowMap.enabled = true
-}
-
-function onWindowResize()
-{
-    camera.aspect = window.innerWidth / window.innerHeight
-    camera.updateProjectionMatrix()
-
-    renderer.setPixelRatio(window.devicePixelRatio)
-    renderer.setSize(window.innerWidth, window.innerHeight)
-}
-
-function animate(): void
-{
-    requestAnimationFrame(animate)
-    const dt = clock.getDelta()
-    update(dt)
-    for (const o of updatable) o.update(dt)
-    renderer.render(scene, camera)
-}

src/animation/Shaders.ts

@@ -1,118 +0,0 @@
-import * as THREE from 'three'
-import {DirectionalLight, HemisphereLight, Mesh} from 'three'
-import {colors, config} from "@/animation/Config";
-
-export const vertexShader = `
-    varying vec3 vWorldPosition;
-    
-    void main() {
-        vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
-        vWorldPosition = worldPosition.xyz;
-        
-        gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-    }`;
-
-export const fragmentShader = `
-    uniform vec3 topColor;
-    uniform vec3 bottomColor;
-    uniform float offset;
-    uniform float exponent;
-    
-    varying vec3 vWorldPosition;
-    
-    void main() {
-        float h = normalize( vWorldPosition + offset ).y;
-        gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max( h , 0.0), exponent ), 0.0 ) ), 1.0 );
-    }`;
-
-/**
- * Create sky dome
- * @param scene
- */
-export function addSky(scene: THREE.Scene): Mesh
-{
-    const uniforms = {
-        "topColor": { value: colors.sky.top },
-        "bottomColor": { value: colors.sky.bottom },
-        "offset": { value: 33 },
-        "exponent": { value: 0.6 }
-    }
-
-    const skyGeo = new THREE.SphereGeometry( 4000, 32, 15 );
-    const skyMat = new THREE.ShaderMaterial({
-        uniforms: uniforms,
-        vertexShader: vertexShader,
-        fragmentShader: fragmentShader,
-        side: THREE.BackSide
-    });
-
-    const sky = new THREE.Mesh(skyGeo, skyMat)
-    scene.add(sky)
-    scene.fog = new THREE.Fog(colors.sky.bottom, 1, 5000)
-
-    return sky
-}
-
-/**
- * Create ground
- * @param scene
- */
-export function addGround(scene: THREE.Scene): Mesh
-{
-    const groundGeo = new THREE.PlaneGeometry(10000, 10000)
-    const groundMat = new THREE.MeshLambertMaterial({color: colors.sky.ground})
-    const ground = new THREE.Mesh(groundGeo, groundMat)
-    ground.position.y = -33
-    ground.rotation.x = -Math.PI / 2
-    ground.receiveShadow = true
-    scene.add(ground)
-
-    return ground
-}
-
-/**
- * Add hemisphere light
- * @param scene
- */
-export function addHemiLight(scene: THREE.Scene): HemisphereLight
-{
-    const hemiLight = new THREE.HemisphereLight(colors.sky.top, colors.sky.ground, 0.6)
-    hemiLight.position.set(0, 50, 0)
-    scene.add(hemiLight)
-
-    if (config.debug) scene.add(new THREE.HemisphereLightHelper(hemiLight, 10))
-
-    return hemiLight
-}
-
-/**
- * Add directional light
- * @param scene
- */
-export function addDirLight(scene: THREE.Scene): DirectionalLight
-{
-    // Directional light
-    const dirLight = new THREE.DirectionalLight(colors.sky.dirLight, 1)
-    dirLight.position.set(-1, 1.75, 1)
-    dirLight.position.multiplyScalar(30)
-    scene.add(dirLight)
-
-    dirLight.castShadow = true
-
-    dirLight.shadow.mapSize.width = 2048
-    dirLight.shadow.mapSize.height = 2048
-
-    const d = 50
-
-    dirLight.shadow.camera.left = -d
-    dirLight.shadow.camera.right = d
-    dirLight.shadow.camera.top = d
-    dirLight.shadow.camera.bottom = -d
-
-    dirLight.shadow.camera.far = 3500
-    dirLight.shadow.bias = -0.0001
-
-    if (config.debug) scene.add(new THREE.DirectionalLightHelper(dirLight, 10))
-
-    return dirLight
-}

src/animation/Trackers.ts

@@ -1,41 +0,0 @@
-import * as THREE from 'three'
-import {Vector3} from 'three'
-import {camera} from "@/animation/Home";
-
-export let mouse: MouseEvent
-export const moused = {x: 0, y: 0, pos: new Vector3()}
-
-/**
- * Initialize mouse tracker
- */
-export function initMouseTracker(): void
-{
-    document.onmousemove = (e: MouseEvent) =>
-    {
-        mouse = e
-        moused.x = e.clientX / window.innerWidth * 2 - 1
-        moused.y = -(e.clientY / window.innerHeight * 2 - 1)
-        moused.pos = projectTo3D(moused.x, moused.y, 0)
-    }
-}
-
-/**
- * Project to 3D position
- * https://www.reddit.com/r/threejs/comments/eba9l3/3d_cursor_using_threejs_html_css/
- * https://jsfiddle.net/atwfxdpd/10/
- *
- * @param screenX X position on 2D canvas
- * @param screenY Y position on 2D canvas
- * @param z Z position in 3D
- */
-export function projectTo3D(screenX: number, screenY: number, z: number): Vector3
-{
-    const vector = new THREE.Vector3(screenX, screenY, 0.5)
-    vector.unproject(camera)
-    const dir = vector.sub(camera.position).normalize()
-    const distance = (-camera.position.z + z) / dir.z
-    const pos = camera.position.clone().add(dir.multiplyScalar(distance))
-    // console.log('Dir:', dir)
-    // console.log('Pos:', pos)
-    return pos
-}

src/animation/components/Cursor.ts

@@ -1,62 +0,0 @@
-import * as THREE from "three";
-import {Color, Material} from "three";
-import {MeshLineGeometry, MeshLineMaterial} from 'meshline';
-import IUpdatable from "@/animation/components/IUpdatable";
-import {moused} from "@/animation/Trackers";
-import {alwaysOnTop, circle} from "@/animation/Helpers";
-
-type CursorConfig = {radius: number, color: Color, width: number}
-
-export default class Cursor implements IUpdatable
-{
-    camera: THREE.Camera
-    circle: CursorCircle
-    dot: THREE.Mesh
-
-    constructor(scene: THREE.Scene, conf: CursorConfig, camera: THREE.Camera)
-    {
-        this.camera = camera
-        this.circle = new CursorCircle(conf, camera)
-        scene.add(this.circle)
-
-        this.dot = circle('#000', 0, 0.3)
-        alwaysOnTop(this.dot, this.dot.material as Material)
-        scene.add(this.dot)
-
-        this.circle.visible = false
-    }
-
-    update(dt: number): void
-    {
-        this.circle.update(dt)
-        this.dot.position.copy(moused.pos)
-        this.circle.position.copy(moused.pos)
-    }
-}
-
-export class CursorCircle extends THREE.Mesh implements IUpdatable
-{
-    camera: THREE.Camera
-
-    constructor(conf: CursorConfig, camera: THREE.Camera)
-    {
-        // https://discourse.threejs.org/t/shift-vertices-of-circle-geometry-not-working/26664
-        const pts = new THREE.Path().absarc(0, 0, conf.radius, 0, Math.PI * 2, true).getPoints(90)
-        const geometry = new MeshLineGeometry()
-        geometry.setFromPoints(pts)
-
-        // MeshLine: https://stackoverflow.com/a/25759280/7346633
-        const material = new MeshLineMaterial({color: conf.color, lineWidth: conf.width,
-            resolution: new THREE.Vector2(window.innerWidth, window.innerHeight)})
-        super(geometry, material)
-
-        this.camera = camera
-
-        alwaysOnTop(this, material)
-    }
-
-    update(dt: number): void
-    {
-        return
-    }
-}

src/animation/components/Editor.ts

@@ -1,92 +0,0 @@
-import {Mesh, MeshBasicMaterial, Vector3} from "three";
-import IUpdatable from "@/animation/components/IUpdatable";
-import {circle} from "@/animation/Helpers";
-import {scene} from "@/animation/Home";
-import {moused, projectTo3D} from "@/animation/Trackers";
-import {config} from "@/animation/Config";
-import {minMax} from "@/scripts/utils";
-
-type DisplayCircle = {x: number, y: number, z: number, radius: number, color: string}
-
-export default class Editor implements IUpdatable
-{
-    hand: Mesh
-    radius = 3
-    scale = 1
-    z = config.editor.zMax
-    data: DisplayCircle[] = []
-    circles: Mesh[] = []
-
-    constructor()
-    {
-        this.hand = circle('#ffffff', 0, this.radius)
-        scene.add(this.hand)
-
-        window.addEventListener('mousedown', (e) =>
-        {
-            console.log('clicked', e)
-            this.addCirc(this.radius * this.scale, this.hand.position, this.color)
-        })
-
-        window.addEventListener('wheel', (e) =>
-        {
-            let direction = (e.detail < 0 || e.deltaY > 0) ? 1 : -1;
-
-            // Shift to micro-adjust
-            if (e.shiftKey) direction /= 10
-
-            // Ctrl + Alt to shift the entire plane
-            if (e.altKey && e.ctrlKey)
-            {
-                // TODO
-                return
-            }
-
-            // Scroll to adjust z, alt + scroll to adjust radius
-            if (e.altKey)
-            {
-                this.scale -= direction / 10
-                this.hand.scale.set(this.scale, this.scale, this.scale)
-            }
-            else this.z = minMax(this.z - direction * 2, config.editor.zMin, config.editor.zMax)
-
-        }, false)
-    }
-
-    addCirc(radius: number, pos: Vector3, color: string): void
-    {
-        const data = {...pos, radius, color}
-        data.z -= config.editor.zMax
-        this.data.push(data)
-        this.displayCirc(data)
-    }
-
-    displayCirc(params: DisplayCircle): void
-    {
-        const circ = circle(params.color, 0, params.radius)
-        circ.position.x = params.x
-        circ.position.y = params.y
-        circ.position.z = params.z + config.editor.zMax
-        scene.add(circ)
-        this.circles.push(circ)
-    }
-
-    update(dt: number): void
-    {
-        const pos = projectTo3D(moused.x, moused.y, this.z)
-        this.hand.position.copy(pos)
-        return
-    }
-
-    get color(): string
-    {
-        return '#' + this.handMaterial.color.getHexString()
-    }
-
-    set color(value: string)
-    {
-        this.handMaterial.color.setStyle(value.substr(0, 7))
-    }
-
-    get handMaterial(): MeshBasicMaterial { return (this.hand.material as MeshBasicMaterial) }
-}

src/animation/components/Grid.ts

@@ -1,38 +0,0 @@
-import * as THREE from "three";
-import {GridHelper} from "three";
-import {scene} from "@/animation/Home";
-import IUpdatable from "@/animation/components/IUpdatable";
-
-export default class Grid implements IUpdatable
-{
-    lines = []
-    grid: GridHelper[] = []
-
-    constructor()
-    {
-        const size = 100
-        const divisions = 20
-
-        let color = new THREE.Color('#7a0c0c')
-        let grid = new THREE.GridHelper(size, divisions, color, color)
-        grid.rotation.x = Math.PI / 2
-        grid.position.z = 90
-        this.grid.push(grid)
-
-        color = new THREE.Color('#a4a4a4')
-        grid = new THREE.GridHelper(size, divisions, color, color)
-        grid.rotation.x = Math.PI / 2
-        grid.position.z = 70
-        this.grid.push(grid)
-
-        this.grid.forEach(it => scene.add(it))
-    }
-
-    update(dt: number): void
-    {
-        // this.grid.rotation.x = 0.25 * Date.now() * 0.001
-        // console.log(this.grid.rotation.x)
-        // this.grid.position.z += dt * 10
-        // console.log(this.grid.position.z)
-    }
-}

src/animation/components/IUpdatable.ts

@@ -1,4 +0,0 @@
-export default interface IUpdatable
-{
-    update: (dt: number) => void
-}

src/scripts/router.ts

@@ -8,12 +8,6 @@ const routes: Array<RouteRecordRaw> = [
         meta: {title: 'Home', nav: true},
         component: Home
     },
-    {
-        path: '/new-home',
-        name: 'New Home',
-        meta: {title: 'Home'},
-        component: () => import('../views/NewHome.vue')
-    },
     {
         path: '/about',
         name: 'About',

src/views/NewHome.vue

@@ -1,161 +0,0 @@
-<template>
-    <div id="NewHome">
-        <canvas id="three"></canvas>
-
-        <!-- Editor controls -->
-        <div id="editor-controls">
-            <div>Editor</div>
-
-            <div class="separator"/>
-
-            <div>New</div>
-            <div>Save</div>
-
-            <div class="separator"/>
-
-            <div id="colors" class="fbox-h">
-                <div class="color" v-for="(c, i) in colors" :key="i" :style="{'background-color': c ?? '#333'}"
-                     @click="e => openPicker(e, c)">
-                    <div>{{(i + 1) % 10}}</div>
-                </div>
-            </div>
-
-            <div class="f-grow1"></div>
-
-            <div class="separator"/>
-
-            <div @click="_ => toggle('sky')">Sky</div>
-        </div>
-        <MyColorPicker v-if="pickerColor" :color="pickerColor" style="z-index: 3"
-                       @close="pickerColor = ''" :initial-pos="initialPos"
-                       @updatePalette="p => colors = p[0]"/>
-    </div>
-</template>
-
-<script lang="ts">
-import {Options} from 'vue-class-component';
-import {camera, editor, objects, start} from "@/animation/Home";
-import {config} from "@/animation/Config";
-import {KeyHandler, range} from "@/scripts/utils";
-import MyColorPicker from "@/components/color/ColorPicker.vue";
-
-@Options({components: {MyColorPicker}})
-export default class NewHome extends KeyHandler
-{
-    editMode = config.editMode
-
-    colors = localStorage.getItem('palette') ? JSON.parse(localStorage.getItem('palette') as string)[0] :
-        range(10).map(_ => '#ffa8a8')
-
-    pickerColor = ''
-    initialPos = {x: 0, y: 0}
-    started = false
-
-    created(): void
-    {
-        // Escape to close picker
-        this.keybinds.Escape = _ => this.pickerColor = ''
-
-        // Pick colors
-        range(10).forEach(i => this.keybinds[((i + 1) % 10)+''] = _ => editor.color = this.colors[i])
-
-        // Camera position binds
-        this.keybinds.ArrowLeft = _ => camera.position.x -= 1
-        this.keybinds.ArrowRight = _ => camera.position.x += 1
-        this.keybinds.ArrowUp = _ => camera.position.y += 1
-        this.keybinds.ArrowDown = _ => camera.position.y -= 1
-        this.keybinds.J = _ => camera.rotateY(Math.PI / 60)
-        this.keybinds.L = _ => camera.rotateY(-Math.PI / 60)
-        this.keybinds.I = _ => camera.rotateX(Math.PI / 60)
-        this.keybinds.K = _ => camera.rotateX(-Math.PI / 60)
-        this.keybinds.Ctrl0 = _ =>
-        {
-            camera.position.set(0, 0, 200)
-            camera.lookAt(0, 0, 0)
-        }
-    }
-
-    mounted(): void
-    {
-        if (!this.started)
-        {
-            start('three')
-            this.started = true
-        }
-    }
-
-    toggle(s: string): void
-    {
-        if (s == 'sky')
-        {
-            objects.hemiLight.visible = !objects.hemiLight.visible
-            objects.dirLight.visible = !objects.dirLight.visible
-            objects.sky.visible = !objects.sky.visible
-        }
-    }
-
-    openPicker(e: MouseEvent, c: string): void
-    {
-        this.pickerColor = c
-        this.initialPos = {x: e.clientX - 150, y: e.clientY + 50}
-    }
-}
-</script>
-
-<style lang="sass" scoped>
-#three
-    width: 100vw
-    height: 100vh
-    position: absolute
-    top: 0
-    left: 0
-    z-index: 1
-    cursor: none
-
-#editor-controls
-    position: absolute
-    z-index: 2
-    user-select: none
-
-    // Positioning
-    top: 20px
-    left: 50px
-    height: 50px
-    width: calc(100vw - 100px - 40px)
-    padding: 0 20px
-    border-radius: 50px
-
-    // Flex center
-    display: flex
-    align-items: center
-
-    // Colors
-    color: #ffeedb
-    background-image: linear-gradient(180deg, #000000 0%, #434343 100%)
-
-    // Separator
-    .separator
-        width: 1px
-        height: 50%
-        border-radius: 100px
-        background-color: rgba(255, 238, 219, 0.37)
-
-    #colors
-        align-items: center
-
-        .color
-            width: 12px
-            height: 12px
-
-            div
-                margin-top: -10px
-                font-size: 8px
-                color: #8f8f8f
-
-            + .color
-                margin-left: 5px
-
-#editor-controls > * + *
-    margin-left: 10px
-
-</style>

yarn.lock

@@ -298,23 +298,11 @@
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
   integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
 
-"@types/three@^0.149.0":
-  version "0.149.0"
-  resolved "https://registry.yarnpkg.com/@types/three/-/three-0.149.0.tgz#f48c03ffcf35b2d196f3532b51bc845e96f6090e"
-  integrity sha512-fgNBm9LWc65ER/W0cvoXdC0iMy7Ke9e2CONmEr6Jt8sDSY3sw4DgOubZfmdZ747dkPhbQrgRQAWwDEr2S/7IEg==
-  dependencies:
-    "@types/webxr" "*"
-
 "@types/web-bluetooth@^0.0.16":
   version "0.0.16"
   resolved "https://registry.yarnpkg.com/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
   integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
 
-"@types/webxr@*":
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/@types/webxr/-/webxr-0.5.1.tgz#4908349419104bd476a4252d04e4c3abb496748d"
-  integrity sha512-xlFXPfgJR5vIuDefhaHuUM9uUgvPaXB6GKdXy2gdEh8gBWQZ2ul24AJz3foUd8NNKlSTQuWYJpCb1/pL81m1KQ==
-
 "@vitejs/plugin-vue@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz#93815beffd23db46288c787352a8ea31a0c03e5e"
@@ -1249,11 +1237,6 @@ memoize-one@^6.0.0:
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
   integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
-meshline@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/meshline/-/meshline-3.1.6.tgz#eee67d9b0fd9841652cc1dc2d3833093ae8e68ca"
-  integrity sha512-8JZJOdaL5oz3PI/upG8JvP/5FfzYUOhrkJ8np/WKvXzl0/PZ2V9pqTvCIjSKv+w9ccg2xb+yyBhXAwt6ier3ug==
-
 minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
@@ -1584,11 +1567,6 @@ tg-blog@^1.1.0:
     url-join "^5.0.0"
     vue "^3.2.33"
 
-three@^0.150.1:
-  version "0.150.1"
-  resolved "https://registry.yarnpkg.com/three/-/three-0.150.1.tgz#870d324a4d2daf1c7d55be97f3f73d83783e28be"
-  integrity sha512-5C1MqKUWaHYo13BX0Q64qcdwImgnnjSOFgBscOzAo8MYCzEtqfQqorEKMcajnA3FHy1yVlIe9AmaMQ0OQracNA==
-
 tinycolor2@^1.4.2:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"