解决three.js中加载纹理贴图时，初次渲染不显示的问题

效果：

 

解决方法：主要是将一些构建网格对象的操作放在了textureLoader.load()方法中，加载图片也用了require

init() {// 1, 创建场景对象this.scene = new this.$three.Scene();// 2, 创建立方缓冲几何体this.geometry = new this.$three.BoxGeometry(100, 100, 100);// 3,创建纹理贴图加载器对象const textureLoader = new this.$three.TextureLoader();const texture = textureLoader.load(require("../../assets/a.png"), () => {// 4,创建网格材质对象// const material = new this.$three.MeshLambertMaterial({const material = new this.$three.MeshBasicMaterial({map: texture, // map 表示材质的颜色贴图属性});// 5， 创建网格对象this.mesh = new this.$three.Mesh(this.geometry, material);this.scene.add(this.mesh);// 6,创建辅助坐标轴对象const axesHelper = new this.$three.AxesHelper(200);this.scene.add(axesHelper);// 6.1 创建环境光对象const light = new this.$three.AmbientLight(0xffffff);this.scene.add(light);// 7,创建透视投影相机对象this.camera = new this.$three.PerspectiveCamera(60, 1, 0.01, 1000);this.camera.position.set(200, 200, 200);this.camera.lookAt(0, 0, 0);// 8,创建渲染器对象this.renderer = new this.$three.WebGLRenderer();this.renderer.setSize(1000, 800);this.renderer.render(this.scene, this.camera);document.getElementById("threejs").appendChild(this.renderer.domElement);});const controls = new OrbitControls(this.camera, this.renderer.domElement);controls.addEventListener("change", () => {this.renderer.render(this.scene, this.camera);});},