import React from 'react'
import { LineBasicMaterial, Line, Group } from 'three'
import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'

export default function Axes() {
    const axes = new Group()

    const x = new Line(
        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0),
        new THREE.Vector3(100, 0, 0)]), 
        new LineBasicMaterial({ color: 0xff0000 }) // red
    )
    const y = new Line(
        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), 
        new THREE.Vector3(0, 100, 0)]), 
        new LineBasicMaterial({ color: 0x00ff00 }) // green
    )
    const z = new Line(
        new THREE.BufferGeometry().setFromPoints([new THREE.Vector3(0, 0, 0), 
        new THREE.Vector3(0, 0, 100)]), 
        new LineBasicMaterial({ color: 0x0000ff }) // blue
    )

    axes.add(x)
    axes.add(y)
    axes.add(z)


    return <primitive object={axes} />
}