Three
在Vue中使用Three构建3d场景的步骤。
xx_ling
这个作者很懒,什么都没留下…
展开
-
使用three构建3d场景,实现简单交互
源码地址 如果有用的话给我一个小星星吧~3d场景初始化外部obj模型加载(1)几个模型加载(2)多个相同模型加载优化模型增加文字方案1: sprite方案2: css2dobject点击拾取模型实际遇到的问题与解决方法...原创 2020-04-08 10:49:10 · 1162 阅读 · 1 评论 -
使用CSS2DObject创建文字
项目源码:地址使用CSS2DObject创建文字1 引入CSS2DObject, CSS2DRendererimport { CSS2DObject, CSS2DRenderer} from "three/examples/jsm/renderers/CSS2DRenderer"2 render初始化 initCSSRender() { this.CSSRender ...原创 2020-04-01 15:21:29 · 5351 阅读 · 4 评论 -
three - 解决一些问题
1,在之前,为了操控模型,引入了OrbitControls,该插件中绑定了鼠标滚轮事件,实现通过滚轮放大缩小的功能。但在此次需求中,当房子放大到某种程度时要去掉屋顶,缩小到某种程度时去掉屋顶。而此时在外面监听不了滚轮事件了,怎么办呢?当时想的就是改源码。但node_modules中的代码改了也没用啊,,呃,那就把它单独拿出来改。文件拿出来后,修改文件中对其他插件的引用路径,(按照自己的文件结构修...原创 2020-03-26 10:08:30 · 558 阅读 · 0 评论 -
three 实现多个相同模型的加载
考虑一种场景: 现在有一个厂房,里面有很多机器,而这些机器是一样的。那我们难道要将同一个模型加载多次吗?很明显,效率太低,不能这么做。是不是想到克隆了呢?要不加载一次模型,然后需要多少个就克隆多少个?克隆看这里ok,现在就开始搞。(1)定义一个模型克隆函数 cloneModel(obj, x, y, z, num) { //params: 模型, 坐标xyz,自定义数据 ...原创 2020-03-26 09:56:39 · 5960 阅读 · 2 评论 -
使用光线投射器(Raycaster)实现点击拾取模型
该类用来处理光线投射。光线投射主要用于物体选择、碰撞检测以及图像成像等方面。这里利用他来做:点击拾取模型功能。可以这么想像:点击屏幕时,就会从视线方向发出一条射线,这条射线可能穿过场景中的多个模型,利用该类提供的方法能够拾取到这些模型。(1)初始化this.raycaster = new THREE.Raycaster();this.mouse = new THREE.Vector2()...原创 2020-03-26 09:08:27 · 1676 阅读 · 0 评论 -
vue中使用three,绘制3d场景--给模型增加文字标签
实际需求中,模型总会有一个文字标签,解释模型相关的信息。这里要用到的是:精灵平面(Sprite)精灵平面(Sprite)是一个在3D场景中总是面对着相机的平面。也就是无论你怎么旋转,你会发现他都朝向你哟,是不是很厉害的样子~好的,现在开始给模型增加sprite:(1)利用canvas绘制文字,作为sprite的材质var canvas = document.createElement(...原创 2020-03-25 16:37:56 · 4657 阅读 · 10 评论 -
vue中使用three,绘制3d场景--obj模型加载
二,模型加载在three官方文档中可以看到有多种加载器,这里我采用的是objLoader,obj模型是产品给的,关于3d建模不是很清楚就不说了。关于模型,我这里用到了两个文件(其实是产品就给了两个,模型不同文件个数不一定,有的可能还会用到图片)。分别是obj和mtl文件,obj文件即3d模型,但是他只有形状,没有外观,如色彩啊等等,所以需要mtl材质文件。(1)加载模型,需要使用加载器。这里...原创 2020-03-25 16:21:41 · 4301 阅读 · 0 评论 -
vue中使用three,绘制3d场景--初始化
一,初始化1,安装依赖(注意项目name不能为three,否则会有冲突)npm i three --save2,在需要使用three的组件中引入threeimport THREE from "three";3,初始化(1)场景scene初始化this.secen = new THREE.Secen();(2)相机camera初始化const aspect = window.i...原创 2020-03-25 16:08:20 · 2908 阅读 · 0 评论