解决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);});},

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

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

相关文章

Promethus(普罗米修斯)安装与配置(亲测可用)

1. 普罗米修斯概述 Prometheus(是由go语言(golang)开发)是一套开源的监控&报警&时间序列数 据库的组合。适合监控docker容器。 Prometheus是最初在SoundCloud上构建的开源系统监视和警报工具包 。自2012年成立以来,许多公司和组织都采用了Prometheus&#…

电压源与电流源简介

文章目录 电压源与电流源简介1.电压源的本质2.电流源的本质3.Q&A 推荐学习 电压源与电流源简介 1.电压源的本质 无论带什么样的负载,输出电压保持不变的电路才是电压源。 一个电路想要输出电压不变,那它必须有强有力的输出电流能力,而不…

idea在同一窗口打开多个项目

ieda中同一窗口打开多个项目操作如下: 1.点击文件中的项目结构 2.点击模块,选择号 3.点击想要加入的模块,点击下一步确定等,最后点击应用,确定。变成如下图所示,这样方便多个项目代码的阅读

EdgeX Foundry MQTT设备服务

一、部署edgex 1.运行命令行,进入放置docker-compose-fuji-no-secty.yml文件的路径下 下载到本地的docker-compose文件 执行: docker-compose -f docker-compose-fuji-no-secty.yml pull 拉取相关镜像,这里默认将文件中没有注释的服务镜像全部…

27、Flink 的SQL之SELECT (SQL Hints 和 Joins)介绍及详细示例(2-1)

Flink 系列文章 1、Flink 部署、概念介绍、source、transformation、sink使用示例、四大基石介绍和示例等系列综合文章链接 13、Flink 的table api与sql的基本概念、通用api介绍及入门示例 14、Flink 的table api与sql之数据类型: 内置数据类型以及它们的属性 15、Flink 的ta…

HarmonyOS开发环境搭建

一 鸿蒙简介: 1.1 HarmonyOS是华为自研的一款分布式操作系统,兼容Android,但又区别Android,不仅仅定位于手机系统。更侧重于万物物联和智能终端,目前已更新到4.0版本。 1.2 HarmonyOS软件编程语言是ArkTS&#xff0c…

Flutter快速入门学习(一)

目录 前言 新建项目 项目入口 Dart的入口(项目的入口) 布局 视图组件 Container(容器) Text(文本) Image(图片) Row(水平布局)和Column&#xff08…

C++ 算法学习 之 vector assign

参考c官方手册 vector::assign是C标准模板库中的一个函数&#xff0c;它的主要功能是给vector容器重新赋值。具体来说&#xff0c;vector::assign函数会删除vector中的所有元素&#xff0c;并根据用户提供的参数重新填充。 这个函数有三种形式&#xff1a; template <cla…

P2P协议的传输艺术

TP 采用两个 TCP 连接来传输一个文件。 控制连接&#xff1a;服务器以被动的方式&#xff0c;打开众所周知用于 FTP 的端口 21&#xff0c;客户端则主动发起连接。该连接将命令从客户端传给服务器&#xff0c;并传回服务器的应答。常用的命令有&#xff1a;list——获取文件目…

随机抽样一致RANSAC

文章目录 RANSAC简介RANSAC算法Ransac在3D视觉中的用法直线拟合单应性矩阵拟合RANSAC的优缺点RANSAC的优点RANSAC的缺点RANSAC在弯曲场景中的缺点:RANSAC适用场景RANSAC简介 RANSAC是 RANdom SAmple Consensus 的缩写,中文翻译叫随机采样一致。它可以从一组观测数据中,找出…

【ROS】Ubuntu20.04+ROS Noetic 配置PX4-v1.12.2和Gazebo11联合仿真环境【教程】

【ROS】Ubuntu20.04ROS Noetic 配置PX4-v-v1.12.2和Gazebo11联合仿真环境【教程】 文章目录 【ROS】Ubuntu20.04ROS Noetic 配置PX4-v-v1.12.2和Gazebo11联合仿真环境【教程】0. 安装UbuntuROS1. 安装依赖2. 安装QGC地面站3. 配置PX4-v1.12.23.1 安装PX43.2 测试PX4是否成功安装…

hive工具-zeppelin部署

zeppelin部署 解压安装包至/opt/soft 并改名 /etc/proofile中配置环境变量并source生效 #ZEPPELIN export ZEPPELIN_HOME/opt/soft/zeppelin010 export PATH$ZEPPELIN_HOME/bin:$PATH &#xff08;1&#xff09;conf目录下拷贝一份初始配置文件 [rootkb129 conf]# pwd /opt/s…

Linux内核4.14版本——drm框架分析(12)——DRM_IOCTL_MODE_SETCRTC(drm_mode_setcrtc)

目录 1. drm_mode_setcrtc 1.1 根据应用传入的crtc_id找到crtc 1.2 根据应用传入的fb_id,找到对应的drm_framebuffer 1.3 根据应用传入的mode&#xff0c;创建一个drm_display_mode 1.4 根据传入的set_connectors_ptr&#xff0c;找到驱动对应的connector 1.5 将以上信息…

go语言基础--面向对象杂谈

面向过程 所谓的面向过程就是&#xff1a;强调的是步骤、过程、每一步都是自己亲自去实现的。 面向对象 所谓的面向对象其实就是找一个专门做这个事的人来做&#xff0c;不用关心具体怎么实现的。 所以说&#xff0c;面向过程强调的是过程&#xff0c;步骤。而面向对象强调的…

C++编译过程

文章目录 1、c编译 1、c编译 鼠标右键选择“Open in Integrated Terminal”&#xff0c;然后在下面的终端输入“cmake . -B build”&#xff0c;或者是这个命令也可以“cmake --build build -j12”&#xff0c;完成之后再次在终端输入“cmake --build build”&#xff0c;完成之…

2023Web前端逻辑面试题

1、现有9个小球&#xff0c;已知其中一个球比其它的重&#xff0c;如何只用天平称2次就找出该球&#xff1f; ①把9个球分成三份&#xff0c;三个一份&#xff1b; ②拿出其中两份进行称量&#xff1b;会分为两种情况 若拿出的两份小球称量结果&#xff0c;重量相等&#xff1b…

使用香橙派 学习Linux的串口开发

串口的回顾 & 硬件接线 关于串口也是之前学习过很多次了&#xff0c;详见&#xff1a; 认识串口 和 蓝牙模块HC08_hc08蓝牙模块_mjmmm的博客-CSDN博客 串口的再认识-CSDN博客 香橙派提供了两路串口&#xff0c;第一路就是在刷机时串口连接的引脚&#xff08;对应驱动ttyS0&…

MAC MINI 2012安装Montery折腾笔记

MAC MINI 2012安装Montery折腾笔记&#xff08;作为电视盒子/远程开发机&#xff09; 起因&#xff1a; 手头有个mac mini&#xff0c;2018年买的2手。一直都是10.12系统&#xff0c;处理python和苹果开发都受制于旧系统&#xff0c;很多软件也装不上&#xff0c;于是有了升级…

python有限差分法求解一维热传导方程

​1、方程及其离散 1.1一维热传导方程 1.2离散化 设定步长&#xff0c;依据上述方程得到递推关系&#xff1a; 2、python求解实现 import numpy as np import matplotlib.pyplot as plth 0.1#空间步长 N 30#空间步数 dt 0.0001#时间步长 M 10000#时间的步数 A dt/(h**2)…

Java8实战-总结29

Java8实战-总结29 并行数据处理与性能并行流将顺序流转换为并行流测量流性能 并行数据处理与性能 到目前为止&#xff0c;Stream接口最重要的好处是可以对这些集合执行操作流水线&#xff0c;能够自动利用计算机上的多个内核。 例如&#xff0c;在Java 7之前&#xff0c;并行…