threejslookat之后控制旋转发现首次触摸出现跳动问题解决
简书链接:threejslookat之后控制旋转发现首次触摸出现跳动问题解决文章字数：35,阅读全文大约需要1分钟lookat之后这个control记忆的target却不是同样的，需要同步更新过去。测试target设置之后正常了 1234567if (props.sceneConfig && props.sceneConfig.CameraLookAt) { holder.camera.lookAt(props.sceneConfig.CameraLookAt) holder.controls.target.x=props.sceneConfig.CameraLookAt.x holder.controls.target.y=props.sceneConfig.CameraLookAt.y holder.controls.target.z=props.sceneConfig.CameraLookAt.z console.log("lookat..") }
threejs代码创建div设置样式不生效的问题原因探讨
简书链接:threejs代码创建div设置样式不生效的问题原因探讨文章字数：452,阅读全文大约需要1分钟环境是vue环境，发现添加后打开开发者工具发现这个div并没有被设置上样式，按理来说用html js的基础常识来说这样的代码定然是没问题的，但是vue中不一样了，vue有样式作用域的概念 12345678910111213function create3DSprite(name): CSS3DSprite { // 创建div元素(作为标签) let div = document.createElement('div'); div.innerHTML = name; div.className="tag" // div.classList.add('tag'); //div元素包装为CSS2模型对象CSS2DObject let label = new CSS3DSprite(div); div.style.pointerEvents =...
htmljs前端无法无法正确的获取div高度原因
简书链接:htmljs前端无法无法正确的获取div高度原因文章字数：79,阅读全文大约需要1分钟实际做 vue项目时候，发现父组件的onmounted先于子组件，因为此时如果子组件没加载完毕找不到id,然后发现clientWidth和offsetwidth并不能真实获取宽度，浏览器宽度变化后获取的还是之前的宽高，最后调整如下 1234let rect = mysceneRef.value.getBoundingClientRect(); var width = rect.width; sceneConfig.configWidth= rect.width sceneConfig.configHeight=rect.height
htmljsmouseEvent中clientX和offsetX以及pageX以及screenX区别
简书链接:htmljsmouseEvent中clientX和offsetX以及pageX以及screenX区别文章字数：580,阅读全文大约需要2分钟在HTML和JavaScript中，鼠标事件对象（如MouseEvent）提供了几个不同的属性来表示鼠标事件发生时的鼠标位置。这些属性包括clientX、offsetX、pageX和screenX，它们各自表示不同的坐标信息： clientX： 这个属性表示鼠标事件在浏览器窗口内的客户区域的横坐标位置。客户区域是指浏览器窗口中除去滚动条的区域，通常是用户可见的页面区域。 offsetX： 这个属性通常用于鼠标事件中的目标元素（即触发事件的元素），表示鼠标事件发生时，鼠标指针相对于目标元素的内边距框的横坐标位置。 pageX： 这个属性表示鼠标事件在整个页面文档中的横坐标位置，包括滚动条滚动的偏移量。它可以用于确定鼠标相对于整个文档的位置。 screenX：...
three纹理画布贴图翻转和旋转
简书链接:three纹理画布贴图翻转和旋转文章字数：200,阅读全文大约需要1分钟 x ,y 1保持不变这里y为-1 代表垂直翻转反之则反 ctx.scale(1,-1) 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152function createLabelForMesh(mesh, labelText) { let myvalue = 0 if (mesh.xx||mesh.xx==0) { myvalue = mesh.xx+ 15 } mesh.xx = myvalue console.log("叠加",myvalue, mesh.xx ) const canvas = document.createElement('canvas'); // canvas.style.transform = 'scale(-1,...
vuethreejs不响应双击的解决办法
简书链接:vuethreejs不响应双击的解决办法文章字数：127,阅读全文大约需要1分钟在chrome 谷歌浏览器中切换手机模式，监听右击，但是发现event 得到的xy 不准确，导致射线点击无法命中东西 document.addEventListener('contextmenu', onMouseDbClick); 鼠标按下，发现只响应鼠标左键 document.addEventListener('mousedown', function (e) { 监听双击window.addEventListener('dblclick', onMouseDbClick, false);测试时无法触发，因此采用鼠标左键单击模拟 最后只能这样了 监听点击和双击 window.addEventListener('click', onMouseClick, false); 12345678910111213141516let clicking=0function onMouseClick(event)...
threejs3D静态导入的三种方式
简书链接:threejs3D静态导入的三种方式文章字数：416,阅读全文大约需要1分钟 参考https://threejs.org/docs/index.html#manual/zh/introduction/Creating-a-scene方式1 123456789101112131415161718192021222324252627<html><head> <script type="importmap"> { "imports": { "three": "https://unpkg.com/[email protected]/build/three.module.js" } } </script> <script type="module"> import...
vue组合式和选项的简单套路模板转换等笔记
简书链接:vue组合式和选项的简单套路模板转换等笔记文章字数：111,阅读全文大约需要1分钟默写，默写很重要，看10编不如默写一遍 1234567891011121314151617181920<scirpt>export default {mounted(){},data(){return { a:[],b:{},c:"a"}},methods:[a(){this.c=this.c+"aa";console.log(this.c);}]</script> 组合式 123456789<script setup>import {ref } from 'vue'const a=ref([]]const b=ref({})const c=ref("a")function...
