Strange squared border around mesh

Questions
1

I´ve created a glb base mesh. But a thin white square border appeared around it. I´m not being able to identify which part of my code is producing it.

lucifer symbol

My code is like this:

const canvas = document.querySelector("#c"),
      renderer = new THREE.WebGLRenderer({ canvas }),
      fov = 21,
      aspect = 100,
      near = 1,
      far = 2800,
      camera = new THREE.PerspectiveCamera(fov, aspect, near, far),
      light = new THREE.DirectionalLight(0xffffff),
      helper = new THREE.DirectionalLightHelper(light, 5)

    this.renderer = renderer
    let localScope = this

    canvas.onmousemove = localScope.onDocumentMouseMove

    camera.position.set(0, 3, 40)
    window.camera = camera

const controls = new OrbitControls(camera, renderer.domElement)

this.controls = controls
controls.target.set(0, 1, 1)
window.controls = controls
controls.update()

const scene = new THREE.Scene(),
  raycaster = new THREE.Raycaster(),
  mouse = new THREE.Vector2()
scene.background = new THREE.Color("white")

this.tobs.scene = scene
this.tobs.raycaster = raycaster

window.addLight = function addLight(...pos) {
  const color = 0xffffff
  const intensity = 1.2
  const light = new THREE.DirectionalLight(color, intensity)
  light.position.set(...pos)
  scene.add(light)
  scene.add(light.target)
}
addLight(5, 5, 2)
addLight(-5, 5, 5)
const manager = new THREE.LoadingManager()
manager.onLoad = init
window.helper = helper

scene.add(helper)

const progressbarElem = document.querySelector("#progressbar")
manager.onProgress = (url, itemsLoaded, itemsTotal) => {
  progressbarElem.style.width = `${((itemsLoaded / itemsTotal) * 100) | 0}%`
}

const models = {
  symbol: { url: "./models/symbol.glb" },
}

this.model = models

{
  const glbLoader = new GLTFLoader(manager)
  let index = 0
  for (const model of Object.values(models)) {
    glbLoader.load(model.url, (glb) => {
      model.glb = glb
      model.glb.name = 'symbol'
      index++
    })
  }
}

function init() {
  // TBD
  // hide the loading bar
  const loadingElem = document.querySelector("#loading")
  loadingElem.style.display = "none"


  Object.values(models).forEach((model, index) => {
    const clonedScene = clone(model.glb.scene)
    const el = new THREE.Object3D()
    el.add(clonedScene)
    el.name = model.glb.name
    scene.add(el)
    // transform.add(clonedScene)

    if (index == 0) {
      el.position.x = 0
      el.position.y = -3
    }

    root[model.glb.name] = el
  })
}

function resizeRendererToDisplaySize(renderer) {
  const canvas = renderer.domElement
  let width, height
  if (!localScope.isLandscape) {
    width = canvas.clientWidth
    height = canvas.clientHeight
  } else {
    width = window.innerHeight
    height = window.innerWidth
  }
  const needResize = canvas.width !== width || canvas.height !== height
  if (needResize) {
    renderer.setSize(width, height, false)
  }
  return needResize
}

let then = 0
let deltaTime = 0
const render = (now) => {
  now *= 0.001 // convert to seconds
  deltaTime = now - then
  then = now

  if (resizeRendererToDisplaySize(renderer)) {
    const canvas = renderer.domElement
    camera.aspect = canvas.clientWidth / canvas.clientHeight
    camera.updateProjectionMatrix()
  }


  renderer.render(scene, camera)

}
requestAnimationFrame(render)

I remember having this issue before, and tweaking one or two lines of code solving it, but can´t remember precisely where.

2

I would check out the model in a online model viewer to see if the model is having the lines already