import * as THREE from 'three'

const scene = new THREE.Scene()
scene.background = new THREE.Color('pink')

const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
)
camera.position.z = 5

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
const canvas = document.createElement('canvas')
canvas.width = 256
canvas.height = 256

const ctx = canvas.getContext('2d') 

ctx.fillStyle = 'white'
ctx.fillRect(0, 0, 256, 256)

ctx.fillStyle = 'black'
ctx.fillRect(0, 0, 128, 128)
ctx.fillRect(128, 128, 128, 128)

const texture = new THREE.CanvasTexture(canvas)

const geometry = new THREE.BoxGeometry(2, 2, 2)

const material = new THREE.MeshBasicMaterial({ map: texture })

const light1 = new THREE.AmbientLight(0xffffff, 0.5)
scene.add(light1)

const light2 = new THREE.PointLight(0xffffff, 1)
light2.position.set(5, 5, 5)
scene.add(light2)

const cube = new THREE.Mesh(geometry, material)
scene.add(cube)

function animate() {
  requestAnimationFrame(animate)

  cube.rotation.x += 0.01
  cube.rotation.y += 0.01

  renderer.render(scene, camera)
}

animate()

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth, window.innerHeight)
})