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

news2024/10/6 20:36:56

效果:

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1004327.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

抖店产品曝光率低怎么解决?提高曝光、点击、转化的技巧,可收藏

我是王路飞。 我之前一直在强调,抖店的核心有且只有一个,就是选品。 店铺内的所有问题,都是产品的问题,而你的运营手段,黑科技等等,终究只是外力罢了,既没办法让你赚到钱,也对你个…

59从零开始学Java之StringBuilder与StringBuffer

作者:孙玉昌,昵称【一一哥】,另外【壹壹哥】也是我哦 千锋教育高级教研员、CSDN博客专家、万粉博主、阿里云专家博主、掘金优质作者 前言 最近的这几篇文章,壹哥一直在给大家讲解字符串相关的内容。其实字符串按照可变性&#xf…

Linux内核分析与应用8-文件系统

本系列是对 陈莉君 老师 Linux 内核分析与应用[1] 的学习与记录。讲的非常之好,推荐观看 留此记录,蜻蜓点水,可作抛砖引玉 8.1 虚拟文件系统的引入 Linux文件系统中最重要的一个概念: 索引节点 Inode 文件系统是具体到分区的,所以不同分区格式化时,可以是…

Seata在Liunx环境启动配置指定JVM大小

Seata从官网下载下来默认分配的内存为2048MB,测试环境因为部署的程序比较多,给Seata分配2048MB内存也显得很奢侈于是在程序启动的时候配置Seata的内存 bin目录下面一个有四个脚本 在Liunx启动Seata我们需要在seata-setup.sh设置JVM seata-setup.sh设置JVM参考Liu…

DT Paint Effects工具(二)

混合笔刷 Paint Effects面板 画布菜单 笔刷和分辨率 高级笔划节点 最小-最大剪裁 笔刷类型 控制通道 笔刷轮廓 必须的物体上用 扭曲 网格设置和网格环境 刺 着色属性 照明Paint Effects 阴影 辉光

考研英语笔记:日本色情业的冰山一角

微信里很多考友说自己撑不住了,是的,这确实是考研过程中,最难熬的一段时光。 这就如,在狭窄的隧道中,前面只有一丝光亮。而后面,漆黑一片,早已没有了退路。 放弃是不可能了。但想拼却又觉得就那…

数据结构-时间复杂度/空间复杂度

Hello,好久没有更新了哦,已经开始学习数据结构了,这篇文章呢就是对刚学数据结构所接触到的时间复杂度进行一个分享哦,如果有错误之处,大家记得拍拍我哦~ 既然要讨论时间/空间复杂度,那我们就得知道时间/空…

【提醒】警惕骗子会议

不要相信以下两个网站所检索到的任何内容: Conferences All Over The World | Conference Index,警惕理由:它支持自己创建会议,也就是你都能去创建个会议😅World Academy of Science, Engineering and Technology&…

Trie树【数组实现】

全文目录 Trie的表现形式数组实现 Trie 树代码 Trie的表现形式 Trie树主要用来实现字符串的存储和快速查找,其表现形式类似一颗多叉树,每个节点表示字符串的一个字符。由于可能会存在类似 "abc" 和 "abcde" 这样的数据,…

合成游戏开发方案

合成游戏是一种深受玩家喜爱的游戏类型,它将各种不同的元素结合起来,以创新的方式吸引玩家。在本文中,我们将探讨一种合成游戏的开发方案,包括游戏目标、游戏机制、游戏关卡、游戏核心元素以及未来发展方向。 游戏目标 我…

WebSocket的优缺点

WebSocket的优缺点 1. WebSocket概念 1.1 WebSocket优点 低延迟全双工长期运行双向实时通信 1.2 什么是心跳机制 为了保持WebSocket稳定的长连接,在建立连接后,服务器和客户端之间需要通过心跳包来保持连接状态,以防止连接因长时间没有数据传输而被切断. 心跳包是一直特殊…

国内外大语言模型调研(更新到2023.09.12)

目录 国外 OpenAI-ChatGPT Anthropic-Claude Google-Bard 国内 百度-文心一言 清华大学&智谱AI-ChatGLM 百川智能-百川大模型 科大讯飞-星火 阿里-通义千问 360-360智脑 腾讯-混元大模型 华为-盘古大模型 字节跳动-云雀大模型 好未来-MathGPT 商汤科技-商量…

abb PPC902AE101 3BHE010751R0101控制板

通信接口: 控制板通常配备了多种通信接口,以便与其他设备和系统进行数据交换。这些接口可能包括以太网、串行通信、Modbus等。 处理能力: 控制板可能具有一定的数据处理和计算能力,以执行控制算法、数据处理或逻辑功能。 数据存…

HiAI Foundation助力端侧音视频AI能力,高性能低功耗释放云侧成本

过去三年是端侧AI高速发展的几年,华为在2020年预言了端侧AI的发展潮流,2021年通过提供端云协同的方式使我们的HiAI Foundation应用性更进一个台阶,2022年提供视频超分端到端的解决方案,在2023HDC大会上,HiAI Foundatio…

喜讯连连!疆程重磅发布全球独家3.6 TFT- LCD AR-HUD及CMS产品及解决方案,并斩获年度TOP10供应商

9月7日至8日,2023世界显示产业大会在成都盛大启幕,同期由BOE(京东方)承办的“Define the Future 智能座舱生态论坛”,合肥疆程技术有限公司创始人兼总经理康栋受邀出席并发布两款重磅座舱解决方案。 本次论坛以“智能座…

VRTK4⭐二.VRTK4的项目基础配置

文章目录 🟥 硬件基本配置🟧 设置XR Plug-in Management🟨 添加项目Tilia🟩 配置项目Hierarchy 🟥 硬件基本配置 解决使用OpenXR,HTC头显正常追踪,但手柄无法使用的问题. 问题如下: 当我们按照官方的标准流程配置完Op…

消息队列(一):需求分析

为什么要做这样一个项目? 首先,我们在之前学习的时候,就认识了一下 生产者消费者模式,这样一个模式有两大好处: 解耦合 本来有个分布式系统,A服务器 调⽤ B服务器(A给B发请求,B给A…

中国智能卡车“遥遥领先”:卡车NOA落地5000万公里0事故,全球首个

智能车参考 | 公众号 AI4Auto 成熟的“擎天柱”,已经可以自己出去赚钱了。 此时此刻,遍及华东、华北、华南、西北…几乎全国所有主要货运干线上,都有智能重卡承运商单。 高速路段由卡车智能驾驶系统完全承担驾驶任务,自主控制油门…

中国社科院大学与美国杜兰大学能源管理硕士项目——喜欢可抵万难,加油!

人生起起伏伏,在我们与生活较量的过程中,每克服一道难题,便赢得了自我成就的依仗。慢慢的,我们放下了名利、物质和虚荣,但决不放弃对世界的求知欲以及对知识的渴望,虽然在职读研很苦很累,但喜欢…

【CesiumJS入门】(10)绘制多边形(动态实时画面)

前言 如果你是在寻求解决方案,可以直接用cesium-draw这个插件。 鼠标左键添加点、右键完成绘制,单击右侧弹窗关闭按钮清空绘制。参考沙盒示例:Drawing on Terrain 直接上代码了 /** Date: 2023-07-12 18:47:18* LastEditors: ReBeX 420659880qq.com* L…