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

汉武大帝·

于 2023-09-12 17:57:35 发布

阅读量1.8k

点赞数

分类专栏： three.js 文章标签： javascript 贴图开发语言

本文链接：https://blog.csdn.net/yinge0508/article/details/132837757

版权

three.js 专栏收录该内容

112 篇文章

订阅专栏

本文介绍了如何在Three.js中创建场景、网格、纹理贴图，并通过TextureLoader加载图片，设置Mesh、AmbientLight和PerspectiveCamera，最后实现渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果：

解决方法：主要是将一些构建网格对象的操作放在了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);
      });
    },