- 博客(11)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 vue3+3d-force-graph渲染glb模型
1、声明一个div标签 通过ref获取此div元素。2、定义初始化图谱方法（initGraph ）1.找好要渲染的glb/gltf模型。3.安装3d-force-graph。2.安装three.js。将准备好的glb加载进来。将默认节点替换为模型。
2025-04-03 15:30:05
394
原创 Vue3+Three.js为模型添加点击事件
通过鼠标的位置与光线的位置重合来获取模型信息。if (intersects.length > 0) 成立的条件下，处理点击事件。此处是将选中的模型组进行沿Z轴平移10个单位。监听鼠标点击事件，使用const mouse = new THREE.Vector2();使用Raycaster射线投射器，光线的位置。
2024-08-16 13:28:31
775
原创 Vue3+Three.js 辅助坐标线问题
创建完页面后，模型能正常显示在页面中，但是有个辅助线看着很不舒服 还是圆形的，就想着给他删了或者隐藏起来，死活是没有找到这个东西，后来一点点的从场景（scene）到渲染（renderer）再到相机（camera）到控制器（controls）终于找到了大致位置，索性直接visable = false,给他隐藏掉就行了。就是这个下面的visable,如果不确定的话可以在截图的这个位置直接修改，页面有变化就是改对了。就是框出来这三个圆形的坐标线，看着太丑了，还不好用。查看scene的输出。
2024-08-15 14:44:37
310
原创 Vue3+Three.js(一)
使用Three记住一下五点就能成功渲染模型了。1、场景：创建场景 new THREE.Scene()2、模型：创建几何模型/引入glb模型之类和创建材质 new THREE.MeshBasicMaterial()3、渲染：renderer渲染器，顾名思义其负责渲染模型和场景到页面中4、相机：camera 根据需求创建自己所需的相机类型，填写好各种参数，一般的视野角度75就够用了。5、控制：controls负责控制页面旋转缩放操作的。
2024-08-15 10:06:57
311
原创 webstorm如何调试uniapp程序
2.在HbuilderX路径的位置 选择自己的Hbuilder安装路径。第一步，找到文件设置—>工具—>uniApp。最后点击运行按钮，等待运行完成即可。3.点击启动工具编辑。4.选择uniapp。
2024-08-14 15:37:18
1508
原创 vue3 中 练习 3d-force-graph 中 img-nodes项目
template>注：在vue3中的setup语法糖推荐使用ref在组建中创建一个可响应式的引用，通过ref可以轻松访问要操作的DOM，同时在script中创建一个container的引用,并将ref函数初始化为null,代码如下：先上代码只要输出一下nodes就能看出，它就是将imgs数组中的每个元素img和对应的索引包装成一个对象，并返回一个新数组。
2023-07-08 00:34:53
447
2
vue3+3d-force-graph+three-spritetext
2023-07-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人