Three.js加载自定义贴图（代码可直接在vue中运行，亲测可行！！！）

代码运行截图：

vue代码( import图片请自行更改，加载的是本地图片 )：

	<template>
	  <div class="three">
	    <div id="container"></div>
	  </div>
	</template>
	
	<script>
	import * as Three from 'three'
	import road from '../assets/road.jpg'
	
	export default {
	  name: 'Three',
	  props: {
	    msg: String
	  },
	  data() {
	    return {
	      camera: null,
	      scene: null,
	      renderer: null,
	      mesh: null,
	      material: null
	    }
	  },
	  methods: {
	    init() {
	      let container = document.getElementById('container');
	 
	      this.camera = new Three.PerspectiveCamera(100, container.clientWidth/container.clientHeight, 0.01, 100);
	      this.camera.position.y = -10;
	      this.camera.position.z = 30;
	
	      this.scene = new Three.Scene();
	
	      let geometry = new Three.BoxGeometry(10, 10, 10);
	
	      // TextureLoader创建一个纹理加载器对象，可以加载图片作为几何体纹理
	      var textureLoader = new Three.TextureLoader();
	      // 执行load方法，加载纹理贴图成功后，返回一个纹理对象Texture
	      textureLoader.load(road, (texture) => {
	        this.material = new Three.MeshBasicMaterial({
	          map: texture,//设置颜色贴图属性值
	        }); //材质对象Material
	        this.mesh = new Three.Mesh(geometry, this.material);
	        this.mesh.rotation.x = -0.2
	        this.scene.add(this.mesh);
	      
	        //纹理贴图加载成功后，调用渲染函数执行渲染操作
	        // this.render();
	      })
	
	      this.renderer = new Three.WebGLRenderer({antialias: true});
	      this.renderer.setSize(container.clientWidth, container.clientHeight);
	      container.appendChild(this.renderer.domElement);
	    },
	    animate: function() {
	      requestAnimationFrame(this.animate);
	      if (this.material) {
	        this.mesh.rotation.x += 0.01;
	        this.mesh.rotation.y += 0.02;
	      }
	      this.renderer.render(this.scene, this.camera);
	    },
	  },
	  async mounted() {
	    await this.init();
	    await this.animate()
	  }
	}
	</script>
	
	<style scoped>
	  #container {
	    height: 100vh;
	  }
	</style>