最近在弄一个vue3的项目,需要添加一些3d效果的东西,比如obj跟glb格式的文件,再网上找了很多案例,直接修改glb文件路径,结果发现加载的东西黑漆漆的,更别说鼠标滚动,拖拽什么效果的。整个场景都是黑的,从glb文件有问题,可以去http://three-gltf-viewer.gongzuoshijian.com/上传你的3d模型去看下效果,如果可以基本上就是代码问题了。后来放弃度娘,直接去官网https://github.com/mrdoob/three.js看教程,有中文跟英文的还是没看懂,最后发现官网有很多案例,在examples下面,不过不能直接通过电脑端文件管理器访问,类似file:///C:/Users/Administrator/Desktop/zk_by_888H/zk/PHP/examples/index.html,直接在文件管理器中双击打开是不行的,你要准备一个服务器端,通过http://zk.com/examples/index.html才能正常加载,接下来就简单了,全局搜索.glb,然后调一个其中的案例,把自己的glb替换进去,果然就老实了,效果直接呈现出来了,什么原理我就不清楚了,不过学东西最好还是去官网,最根源的地方找东西,不要去学二手三手的东西,弯路可以少走很多。在vue3中加载的时候代码如下。

import * as THREE from 'three';

import Stats from 'three/examples/jsm/libs/stats.module.js';

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

html例子中是这么写的

import * as THREE from '../build/three.module.js';

import Stats from './jsm/libs/stats.module.js';

import { OrbitControls } from './jsm/controls/OrbitControls.js';

PhoXo1.gif

本文链接:http://www.20m8.com/151.html

热门文章

jiaminghi/data-view改造版dataV for vite2/3+vue3/2项目

dataV是个不错的选择,就是原生支持vue-cli的webpack打包工具,不支持vite,不过站长还算完美地解决了这个问题。

查看全文 hehu158 于 2021-07-30 11:07 发表在 Vue ( 阅读:6979 )

Vue2/VUE3子组件如何调用父组件变量以及函数

本文主要分析下子组件如何调用父组件的变量跟函数。

查看全文 hehu158 于 2019-12-27 16:03 发表在 Vue ( 阅读:4124 )

vue项目使用font-spider压缩后的外部字体

vue使用font-spider压缩字体文件的爬坑记录

查看全文 hehu158 于 2020-04-25 10:57 发表在 Vue ( 阅读:3558 )

vue3如何快速获取网址中的get参数

vue3下快速获取网址中的url参数,网上基本上都是vue2的,所以站长整理了下解决方案

查看全文 hehu158 于 2021-08-17 14:11 发表在 Vue ( 阅读:3423 )

MUI实现图片无缝循环轮播不用mui-slider-item-duplicate的快速解决方案

mui轮播还是ok的,循环轮播就不行了哈,通过简单的JavaScript代码完善下就解决

查看全文 hehu158 于 2020-03-06 17:01 发表在 Vue ( 阅读:3108 )

hoppscotch使用pnpm搭建windows机子卡死的一种解决方案

pnpm跟360有冲突,我也是第一次见识。

查看全文 hehu158 于 2021-12-07 16:17 发表在 Vue ( 阅读:2568 )

vue3+three.js加载3d效果爬坑日志-支持vite2.4.4

three.js一个js三维模型库,陌生是挺陌生的,不过学习的话,我们还是要从官网开始,别随便拿别人的代码套。

查看全文 hehu158 于 2021-07-09 16:09 发表在 Vue ( 阅读:2178 )

cnpm+electron+vue3+vite2+mqtt项目DEMO

让electron支持vite2,非常不错,让vue3跑mqtt,十分完美的组合,还支持cnpm。

查看全文 hehu158 于 2021-12-09 09:04 发表在 Vue ( 阅读:2070 )

main.js跟.vue2文件间的通信

整理vue公共函数,放置到main.js,在main.js设置全局变量,实现main.js跟.vue文件间的数据通信。

查看全文 hehu158 于 2020-01-02 17:37 发表在 Vue ( 阅读:1935 )

vite2 vue3 兼容库包好用到爆

vite2 vue3 兼容库包,站长用完才能偷偷告诉你。

查看全文 hehu158 于 2021-09-30 09:37 发表在 Vue ( 阅读:1904 )