为什么初始化的时候，模型没有渲染出来？

Question

为什么初始化的时候，模型没有被渲染出来？

<template>
  <div class="box" id="myBox"></div>
</template>
<script>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
export default {
  name: 'E',
  data() {
    return {
      scene: null,
      camera: null,
      renderer: null
    }
  },
  mounted() {
    this.initUV()
  },
  methods: {
    initUV() {
      // UV坐标及纹理贴图
      const width = document.getElementById('myBox').offsetWidth
      const height = document.getElementById('myBox').offsetHeight
      const scene = new THREE.Scene()

      const axesHelper = new THREE.AxesHelper(200)
      scene.add(axesHelper)

      const camera = new THREE.PerspectiveCamera(100, width / height, 0.1, 3000)
      camera.position.set(0, 0, 100)

      // const geometry = new THREE.BoxGeometry(90, 90, 90)
      const geometry = new THREE.PlaneGeometry(100, 100)

      const textureLoader = new THREE.TextureLoader()
      const texture = textureLoader.load('static/1.jpeg')

      const material = new THREE.MeshLambertMaterial({
        // color: 0xff0000,
        map: texture
      })

      const uvs = geometry.getAttribute('uv')
      console.log('uvs', uvs)

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

      const dirLight = new THREE.DirectionalLight(0xffffff, 1)
      dirLight.position.set(0, 100, 300)
      dirLight.target = mesh
      scene.add(dirLight)

      const renderer = new THREE.WebGLRenderer()
      renderer.setSize(width, height)
      renderer.render(scene, camera)
      document.getElementById('myBox').appendChild(renderer.domElement)

      const controls = new OrbitControls(camera, renderer.domElement)
      controls.addEventListener('change', () => {
        renderer.render(scene, camera)
      })
    }
  }
}
</script>
<style>
.box {
  width: 100%;
  height: 100%;
}
</style>

初始化时渲染出的效果是这样的，这里有模型，但是没有显示出贴图，

鼠标操作之后贴图就显示出来了

Answer 1

找到原因了，添加完纹理贴图之后，需要重新渲染下，
代码修改，把renderer挪到上面去，纹理load方法中重新渲染

const texture = textureLoader.load('static/1.jpeg', () => {
    renderer.render(scene, camera)
})

Answer 2

这些地方改一下：

const textureLoader = new THREE.TextureLoader()
textureLoader.load('static/1.jpeg', (texture) => {
  const material = new THREE.MeshLambertMaterial({
    map: texture
  })
  const mesh = new THREE.Mesh(geometry, material)
  scene.add(mesh)
  
  // 加动画循环
  const animate = () => {
    requestAnimationFrame(animate)
    renderer.render(scene, camera)
  }
  animate()
})