模型对象CSS2DObject始终在画布的左上角(问题解决)

news2024/11/18 6:25:56

写了个简单案例模拟一下这个问题,看下图片

下面看下c2渲染器相关代码部分

this.css2DRenderer = new CSS2DRenderer();
this.css2DRenderer.render(this.scene, this.camera);
this.css2DRenderer.setSize(width, height);
this.css2DRenderer.domElement.style.position = 'absolute';
this.css2DRenderer.domElement.style.top = '0px';
this.css2DRenderer.domElement.style.pointerEvents = 'none' 
document.querySelector('.contain').appendChild(this.css2DRenderer.domElement);

我们可以看到 是在设置渲染输入尺寸范围之前调用render方法的,将render方法放到setSize之后即可解决

this.css2DRenderer = new CSS2DRenderer();
this.css2DRenderer.setSize(width, height);
this.css2DRenderer.domElement.style.position = 'absolute';
this.css2DRenderer.domElement.style.top = '0px';
this.css2DRenderer.domElement.style.pointerEvents = 'none' 
this.css2DRenderer.render(this.scene, this.camera);				document.querySelector('.contain').appendChild(this.css2DRenderer.domElement);

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

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

相关文章

C/C++计算表达式值 2020年12月电子学会青少年软件编程(C/C++)等级考试一级真题答案解析

目录 C/C计算表达式值 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 C/C计算表达式值 2020年12月 C/C编程等级考试一级编程题 一、题目要求 计算(ab)*(c-b)的值 1、编程实现 给定3个整数a、b、c&…

MYSQL批量插入并发场景下的DEADLOCK

一、背景 公元2023-10-12(周四)上午,组内的亚梅反馈,用户生成标签报死锁异常 二、排查异常日志 查到当时报错的日志 具体异常信息如下 server-provider-info-2023-10-12.0.log:2023-10-12 09:40:50.593 [TID:bf623bded189486cbb0b6a64d81b64b4.357.16970…

【C语言】memmove()函数(拷贝重叠内存块函数详解)

🦄个人主页:修修修也 🎏所属专栏:C语言 ⚙️操作环境:Visual Studio 2022 目录 一.memmove()函数简介 1.函数功能 2.函数参数 1>.void * destination 2>.onst void * source 3>.size_t num 3.函数返回值 4.函数头文件 二.memmove()函数…

【爬虫】charles手机抓包环境设置(设置系统证书)

1.说明 想要对手机抓包,最关键的是需要设置好根证书,用户证书在安卓7.0之后就不受信任了,想要对手机app抓包,就需要把用户证书设置为系统证书(根证书) 注意,想要设置为根证书,你的…

JavaScrip的DOM接口

JavaScript的DOM(Document Object Model)是一种接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。DOM是一种将HTML或XML文档表示为对象树的标准方式。 在JavaScript中,DOM提供了一种方式来操作HTML或XML文档的元素…

基于nodejs+vue人脸识别考勤管理系统的设计与实现

目 录 摘 要 I ABSTRACT II 目 录 II 第1章 绪论 1 1.1背景及意义 1 1.2 国内外研究概况 1 1.3 研究的内容 1 第2章 相关技术 3 2.1 nodejs简介 4 2.2 express框架介绍 6 2.4 MySQL数据库 4 第3章 系统分析 5 3.1 需求分析 5 3.2 系统可行性分析 5 3.2.1技术可行性:…

unocss和tailwindcss css原子引擎

第一种tailwindcss: tailwindcss官网 https://tailwindcss.com/docs/grid-column 基本介绍及优点分析 Tailwind CSS 中文文档 - 无需离开您的HTML,即可快速建立现代网站 PostCss 处理 Tailwind Css 基本流程 PostCSS - 是一个用 JavaScript 工具和插…

分享Keil5设置忽略编译过程中的警告

Keil5忽略编译过程中的警告 分享Keil5设置忽略编译过程中的警告 分享Keil5设置忽略编译过程中的警告 加上这段字符就好了 --diag_suppress68 --diag_suppress111 --diag_suppress188 --diag_suppress223 --diag_suppress546 --diag_suppress1295实测有效

Vue3-02_Vue基础入门

背景 这里,跟vue官网的介绍章节稍有差异。官网上侧重组件原理,从浅到深介绍各种组件。后续是系统生态。 教程上更偏路线化,需要用到的优先讲解。完成综合案例。所以我主要按照教程的思路来进行学习。 ◆ 能够知道 vue 的基本使用步骤 ◆ 掌…

知识图谱相关的操作

微软生成自己的图谱:GitHub - microsoft/SmartKG: This project accepts excel files as input which contains the description of a Knowledge Graph (Vertexes and Edges) and convert it into an in-memory Graph Store. This project implements APIs to searc…

SSH安全登录远程主机

SSH服务器简介 SSH即Security SHell的意思,它可以将连线的封包进行加密技术,之后进行传输,因此相当的安全。 SSH是一种协议标准,其目的是实现安全远程登录以及其它安全网络服务。 SSH协定,在预设的状态下,…

计算机网络重点概念整理-第一章 计算机网络概述【期末复习|考研复习】

第一章 计算机网络概述 【期末复习|考研复习】 计算机网络系列文章传送门: 第一章 计算机网络概述 第二章 物理层 第三章 数据链路层 第四章 网络层 第五章 传输层 第六章 应用层 第七章 网络安全 计算机网络整理-简称&缩写 文章目录 第一章 计算机网络概述 【…

微信小程序之投票管理

前言 对于会议管理模块,必不可少的当然就是我们的投票管理,实现真正意义上的无纸化办公,本期博客为大家介绍会议管理模块,包括发布投票及查看各类投票的状态 所用技术点 MyBatis、SpringMVC、VentUI MyBatis和SpringMVC在博客主…

PyCharm社区版安装

PyCharm社区版安装 到中国官网下载 https://www.jetbrains.com/zh-cn/pycharm/download/?sectionwindows 首次创建项目,会自动下载安装Python 3.9 社区版的区别 社区版的区别

Vue项目搭建及使用vue-cli创建项目、创建登录页面、与后台进行交互,以及安装和使用axios、qs和vue-axios

目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2.3 配置路由 2.5 运行效果 3. 后台交互 3.1 引入axios 3.2 axios/qs/vue-axios安装与使用 3.2…

【微信小程序】发布投票与用户投票完整讲解

目录 前言 组件功能示例 一、数据库 二、后端接口定义 三、前端准备 3.1 定义连接接口 3.2 Vant Weapp UI 组件库 3.3 授权登录与相关工具 四、小程序编写 4.1 投票组件 WXML WXSS JSON WXJS 效果展示讲解: 4.2 发布投票组件 WXML WXSS JSON WX…

线扫相机DALSA--采集卡Base模式设置

采集卡默认加载“1 X Full Camera Link”固件,Base模式首先要将固件更新为“2 X Base Camera Link”。 右键SCI图标,选择“打开文件所在的位置”,找到并打开SciDalsaConfig的Demo,如上图所示: 左键单击“获取相机”&a…

生成的二维码如何解析出原来的地址?

生成的二维码如何解析出原来的地址? 随着移动互联网的发展,二维码作为一种快速获取信息的方式,在我们的生活中越来越常见。而PHP作为Web语言之一,也有着二维码解码的功能。 PHP中有着众多的二维码解码库,例如&#x…

前端将图片储存table表格中,页面回显

<el-table :data"tableData" v-loading"loading" style"width: 100%" height"calc(100vh - 270px)" :size"tableSize"row-dblclick"enterClick"><el-table-column prop"name" label"文档…

代码随想录Day30 贪心05 LeetCode T435无重叠区间 T763划分字母区间 T56 合并区间

LeetCode T435 无重叠区间 题目链接:435. 无重叠区间 - 力扣&#xff08;LeetCode&#xff09; 题目思路: 这题思路和昨天的打气球类似,我们需要按照左区间或者右区间进行排序,然后哦判断第i个区间的左端点和第i-1个区间的右端点的大小关系,,如果大于等于,那么就无需操作,一旦…