vue-three.js
文章平均质量分 73
在vue框架下学习three.js
点燃火柴
心之所向,涸池若海
展开
-
three.js后期处理-使用BrightnessContrastShader定制效果调整页面的亮度与对比度(vue中使用three.js92)
使用VignetteShader定制效果添加晕映效果1.demo效果2. 知识要点2.1 BrightnessContrastShader介绍2.2 BrightnessContrastShader的使用步骤3. 实现要点3.1 相关文件引入3.2 创建效果组合器3.3 render中更新4. demo代码1.demo效果如上图,为使用BrightnessContrastShader后期通道调整页面的亮度和对比度时的效果2. 知识要点2.1 BrightnessContrastShader介绍原创 2021-06-20 16:59:40 · 1349 阅读 · 0 评论 -
three.js后期处理-使用ColorifyShader定制效果在屏幕上蒙上一层颜色(vue中使用three.js91)
使用ColorifyShader定制效果在屏幕上蒙上一层颜色1.demo效果2. 知识要点2.1 ColorifyShader介绍2.2 ColorifyShader的使用步骤3. 实现要点3.1 相关文件引入3.2 创建效果组合器3.3 render中更新4. demo代码1.demo效果如上图,为使用ColorifyShader后期通道调整color属性时的效果2. 知识要点2.1 ColorifyShader介绍通过使用ColorifyShader的后期处理可以实现在屏幕上蒙上一层颜色,原创 2021-06-20 00:03:58 · 728 阅读 · 0 评论 -
three.js后期处理-使用SepiaShader定制效果创建出类似乌贼墨的效果(vue中使用three.js90)
使用SepiaShader定制效果创建出类似乌贼墨的效果1.demo效果2. 知识要点2.1 SepiaShader介绍2.2 SepiaShader的使用步骤3. 实现要点3.1 相关文件引入3.2 创建效果组合器3.3 render中更新4. demo代码1.demo效果如上图,为使用SepiaShader后期通道调整amount属性时的效果2. 知识要点2.1 SepiaShader介绍通过使用SepiaShader的后期处理可以实现添加晕映效果,它支持输入一个参数amount表示乌贼墨效原创 2021-06-19 23:31:41 · 422 阅读 · 0 评论 -
three.js后期处理-使用VignetteShader定制效果添加晕映效果,在图片周围显示黑色边框(vue中使用three.js89)
使用VignetteShader定制效果添加晕映效果1.demo效果2. 知识要点2.1 VignetteShader介绍2.2 VignetteShader的使用步骤3. 实现要点3.1 相关文件引入3.2 创建效果组合器3.3 render中更新4. demo代码1.demo效果如上图,为使用VignetteShader后期通道调整offset和darknesssh属性时的效果2. 知识要点2.1 VignetteShader介绍通过使用VignetteShader的后期处理可以实现添加晕原创 2021-06-19 22:44:51 · 1126 阅读 · 0 评论 -
three.js后期处理-使用HueSaturationShader定制效果调整颜色的色调和饱和度(vue中使用three.js88)
使用HueSaturationShader定制效果调整颜色的色调和饱和度1.demo效果2. 知识要点2.1 HueSaturationShader介绍2.2 HueSaturationShader的使用步骤3. 实现要点3.1 相关文件引入3.2 创建效果组合器3.3 render中更新4. demo代码1.demo效果如上图,展示了使用HueSaturationShader后期处理通道调整色调和饱和度的效果2. 知识要点2.1 HueSaturationShader介绍通过使用HueSat原创 2021-06-19 22:11:15 · 1410 阅读 · 3 评论 -
three.js后期处理-使用MirrorShader定制效果实现镜像效果(vue中使用three.js87)
使用MirrorShader定制效果实现镜像效果1.demo效果2. 知识要点2.1 MirrorShader介绍2.2 MirrorShader的使用步骤3. 实现要点3.1 相关文件引入3.2 创建效果组合器3.3 render中更新4. demo代码1.demo效果如上图,展示了使用MirrorShader镜像处理,side属性分别为0、1、2、3时的镜像效果2. 知识要点2.1 MirrorShader介绍通过使用MirrorShader的后期处理效果可以实现为部分屏幕实现镜面效果原创 2021-06-19 17:59:53 · 1268 阅读 · 1 评论 -
three.js后期处理-使用MaskPass掩膜通道实现多个场景中地球与火星使用不同后期处理效果,不同场景的物体在同一屏幕展示(vue中使用three.js86)
使用MaskPass掩膜通道实现多个场景中地球与火星使用不同后期处理效果1.demo效果2. 重要知识点2.1 MaskPass通道介绍2.2 MaskPass通道使用注意事项3. 实现要点3.1 相关文件引入3.2 创建多个场景3.3 不同场景添加光源3.4 创建效果组合器4. demo代码1.demo效果如上图,demo中背景、地球和火星使用了不同后期处理通道,最终将不同场景下的物体展示在同一屏幕2. 重要知识点2.1 MaskPass通道介绍MaskPass 通道称为 掩膜通道,用于限定后原创 2021-06-10 23:54:45 · 1128 阅读 · 6 评论 -
three.js后期处理-使用UnrealBloomPass通道在场景中添加泛光效果,三维物体表面发光效果(vue中使用three.js85)
使用UnrealBloomPass通道在场景中添加泛光效果1.demo效果2. 重要知识点2.1 回顾要点2.2 UnrealBloomPass通道介绍3. 实现要点3.1 相关文件引入3.2 创建效果组合器并添加通道3.3 render中更新效果组合器4. demo代码1.demo效果2. 重要知识点2.1 回顾要点上一篇文章中我们介绍了如何使用后期处理,同时也介绍了几个简单的后期处理通道:FilmPass(类似电视效果)、DotScreenPass(将场景输出成点集)、GlitchPass(原创 2021-06-09 23:21:49 · 5787 阅读 · 7 评论 -
three.js后期处理-FilmPass(类似电视效果)、DotScreenPass(将场景输出成点集)、GlitchPass(电磁风暴效果)-(vue中使用three.js84)
简单的后期处理通道FilmPass、DotScreenPass、GlitchPass1.demo效果2. 重要知识点2.1 认识后期处理2.2 简单后期处理通道介绍2.2.1 FilmPass通道介绍2.2.1 DotScreenPass通道介绍2.2.1 GlitchPass通道介绍3. 实现要点3.1 相关文件引入3.2 创建效果组合器并添加通道3.3 处理通道切换处理3.4 render中更新通道与效果处理器4. demo代码1.demo效果2. 重要知识点2.1 认识后期处理后期处原创 2021-06-08 23:17:01 · 1088 阅读 · 4 评论 -
three.js使用CubeCamera创建反光效果,动态环境贴图实现,立方体全景贴图(vue中使用three.js83)
使用CubeCamera创建反光效果1.demo效果2. 实现要点2.1 创建立方体相机CubeCamera2.2 使用动态环境贴图材质2.3 render中更新立方体相机2.4 创建场景的全景贴图2.5 创建场景中的模型3. demo代码1.demo效果2. 实现要点2.1 创建立方体相机CubeCamera创建立方体的语法如下const cubeCamera = new THREE.CubeCamera( near, far, cubeRenderTarget)参数说明near原创 2021-06-05 23:31:33 · 3697 阅读 · 39 评论 -
three.js使用环境贴图创建虚假的反光效果,使用CubeTextureLoader创建全景贴图,使用envMap创建静态环境贴图(vue中使用three.js82)
使用环境贴图创建虚假的反光效果1.demo效果2. 实现要点2.1 创建场景的全景贴图2.2 创建场景中的模型2.3 属性更新处理2.4 模型旋转更新3. demo代码1.demo效果2. 实现要点2.1 创建场景的全景贴图在创建场景函数中,使用 CubeTextureLoader 创建全景贴图,然后将全景贴图赋值给场景的 background 属性// 创建场景createScene() { this.scene = new THREE.Scene() const public原创 2021-06-05 17:59:32 · 2022 阅读 · 0 评论 -
three.js用视频输出作为纹理,使用VideoTexture视频纹理实现物体表面播放视频(vue中使用three.js81)
使用VideoTexture视频纹理实现物体表面播放视频1.demo效果2. 实现要点2.1 使用标签引入视频资源2.2 创建视频纹理材质4. demo代码1.demo效果2. 实现要点2.1 使用标签引入视频资源在public目录下的index.html文件中通过< script >标签引入相关文件文件<video id="video" style="display: none; position: absolute; left: 15px; top: 75px;" :src原创 2021-06-05 00:04:54 · 3135 阅读 · 1 评论 -
three.js使用canvas上的绘画结果作为纹理渲染到方块上,使用动态绘画纹理(vue中使用three.js80)
使用canvas画布上的绘画作为纹理渲染到方块上1.demo效果2. 实现要点2.1 引入canvas绘板2.2创建绘图板2.3 创建使用canvas纹理材质的网格对象2.4 render()中更新canvas纹理贴图材质4. demo代码1.demo效果2. 实现要点2.1 引入canvas绘板在public目录下的index.html文件中通过< script >标签引入相关文件文件<script type="text/javascript" src="../libs/li原创 2021-06-04 23:31:33 · 1238 阅读 · 0 评论 -
three.js在canvas画布上生成噪音图,然后创建凹凸贴图(vue中使用three.js79)
使用高光贴图创建色彩鲜明的地球1.demo效果2. 实现要点2.1 引入噪音函数库2.2在画布上绘制噪音图2.3 创建凹凸贴图材质的网格对象2.4 更新bumpScale4. demo代码1.demo效果2. 实现要点2.1 引入噪音函数库在public目录下的index.html文件中通过< script >标签引入perlin.js 文件<script type="text/javascript" src="./libs/perlin.js"></script&原创 2021-06-04 00:33:42 · 837 阅读 · 0 评论 -
three.js加载和使用纹理- 通过设置纹理的wrapS、wrapT、repeat属性实现纹理的重复平铺,纹理的重复映射(vue中使用three.js78)
使用高光贴图创建色彩鲜明的地球1.demo效果2. 相关知识点2.2.4 wrapS(number)2.2.5 wrapT(number)2.2.12 repeat (Vector2)3. 实现要点4. demo代码1.demo效果2. 相关知识点2.2.4 wrapS(number)纹理在水平方向上纹理包裹方式,在UV映射中对应于U,默认THREE.ClampToEdgeWrapping,表示纹理边缘与网格的边缘贴合。中间部分等比缩放另外两个可选值为THREE.RepeatWrapping:原创 2021-06-03 22:48:17 · 6480 阅读 · 3 评论 -
three.js加载和使用纹理-specularMap使用高光贴图创建色彩鲜明的地球(vue中使用three.js77)
使用高光贴图创建色彩鲜明的地球1.demo效果2. 相关知识点3. 实现要点4. demo代码1.demo效果2. 相关知识点在demo效果中,你可以看到海洋的色彩比较鲜明会反光,陆地上则不反光或反光很少,实现这种效果并不是使用特殊的法线贴图,使用一张显示高度的法向贴图即可3. 实现要点高光贴图的使用和其他贴图一样,需要将material的 specularMap 属性设置成加载的高光贴图,还要设置material的 specular 属性,该属性接收一个Color对象,这个属性会 决定反光颜色原创 2021-06-03 01:04:01 · 879 阅读 · 0 评论 -
three.js加载和使用纹理-lightMap使用光照贴图创建假阴影(vue中使用three.js76)
使用光照贴图创建假阴影1.demo效果2. 相关知识点3. 实现要点3.1 创建模型3.2 创建带阴影的地板4. demo代码1.demo效果如上图通过光照贴图实现了物体的阴影2. 相关知识点在场景中为物体添加阴影,可以增加物体的立体感,但是通过计算实现阴影非常耗费性能,人们总会想办法通过其他方式实现相同的效果,比如通过光照贴图创建假阴影,通过这种方式创建阴影,有优点也有缺点,优点是可以创建出解析度很高的阴影而且不损耗性能,缺点 是只能用于静态场景3. 实现要点3.1 创建模型这一步将会创建原创 2021-06-03 00:13:35 · 845 阅读 · 0 评论 -
three.js加载和使用纹理-normalMap使用法向贴图创建表面不同凹凸程度的三维物体(vue中使用three.js75)
使用法向贴图创建凹凸和皱纹1.demo效果2. 知识要点2.1 法向贴图2.2 使用法向贴图3. 实现要点2.2 创建凹凸贴图的物体2.3 创建普通贴图的物体3. demo代码1.demo效果2. 知识要点2.1 法向贴图法向贴图 保存的是每个像素的法向量,这样的好处是使用非常少的顶点和面就可以创建出有丰富细节的模型2.2 使用法向贴图使用法向贴图的方法和使用凹凸贴图一样,只需要将material的 normalMap 属性设置成一个法向纹理即可,同时也可以通过 mormalScale 属性设原创 2021-06-02 22:35:58 · 1892 阅读 · 21 评论 -
three.js加载和使用纹理-设置material.bumpMap属性使用凹凸贴图创建皱纹(vue中使用three.js74)
加载DDS、PVR、TGA格式的纹理1.demo效果2. 实现要点2.1 创建地板2.2 创建凹凸贴图的物体2.3 创建普通贴图的物体3. demo代码1.demo效果2. 实现要点2.1 创建地板createFloor() { const publicPath = process.env.BASE_URL const floorTex = new THREE.TextureLoader().load( `${publicPath}textures/general/floor-wo原创 2021-06-02 00:41:56 · 987 阅读 · 0 评论 -
three.js加载和使用纹理-加载DDS、PVR、TGA格式的纹理(vue中使用three.js73)
加载DDS、PVR、TGA格式的纹理1.demo效果2. 实现要点2.1 加载DDS格式纹理2.2 加载PVR格式纹理2.3 加载TGA格式纹理3. demo代码1.demo效果以上三个动图分别是加载DDS、PVR、TGA格式的纹理的效果图2. 实现要点与上一片文章基本相同,不同的地方只是使用不同的纹理加载器,加载的纹理图片不同2.1 加载DDS格式纹理createMesh(geom) { const publicPath = process.env.BASE_URL //获取环境变量原创 2021-06-02 00:00:32 · 1871 阅读 · 8 评论 -
three.js加载和使用纹理-Texture纹理对象介绍,使用TextureLoader加载纹理(vue中使用three.js72)
使用纹理材质创建模型1.demo效果2. 实现要点2.1 TextureLoader加载器介绍2.2 创建AnimationMixer动画2.3 render中更新动画3. demo代码1.demo效果2. 实现要点2.1 TextureLoader加载器介绍TextureLoader用于加载图片用作纹理贴图,使用比较简单THREE.TextureLoader(texturePath)加载gltf文件,首先要引入GLTF加载器,需要在vue文件中显示引入import { GLTFLoader原创 2021-06-01 23:05:54 · 2361 阅读 · 2 评论 -
three.js使用外部模型创建动画,使用GLTF格式文件动画创建动画(vue中使用three.js71)
使用GLTF格式文件动画创建动画1.demo效果2. 实现要点2.1 加载GLTF文件2.2 创建AnimationMixer动画2.3 render中更新动画3. demo代码1.demo效果2. 实现要点2.1 加载GLTF文件加载gltf文件,首先要引入GLTF加载器,需要在vue文件中显示引入import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'加载模型代码如下// 创建模型createModel原创 2021-05-29 21:12:25 · 2810 阅读 · 7 评论 -
three.js使用外部模型创建动画,使用Blender导出的JSON模型创建动画(vue中使用three.js70)
使用Blender导出的JSON模型创建动画1.demo效果2. 实现要点2.1 加载模型文件2.2 创建蒙皮与动画2.3 render中更新动画3. demo代码1.demo效果2. 实现要点2.1 加载模型文件与之前一样这里要用到JSONLoader加载器,需要在 public目录下的index.html 文件中引入旧版three.js<script type="text/javascript" src="./libs/three.js"></script>在当前原创 2021-05-29 14:41:56 · 988 阅读 · 0 评论 -
three.js创建骨骼动画,使用SkinnedMesh制作蒙皮(vue中使用three.js69)
创建骨骼动画,使用SkinnedMesh制作蒙皮1.demo效果2.骨骼蒙皮动画介绍3. 实现要点3.1 加载模型文件3.2 创建tween动画3.3 render中更新动画4. demo代码1.demo效果2.骨骼蒙皮动画介绍人体有骨骼肌肉和皮肤,在three.js中骨骼的作用和人体的骨骼相同就是骨架,蒙皮即人类的皮肤,只不过它不需要肌肉,骨骼蒙皮动画其实就是通过骨骼的变形蒙皮联动而产生一系列的动画3. 实现要点3.1 加载模型文件与之前一样这里要用到JSONLoader加载器,需要在 pu原创 2021-05-29 14:31:39 · 1355 阅读 · 1 评论 -
three.js变形动画-通过设置morphTargetInfluences属性创建动画(vue中使用three.js68)
通过设置morphTargetInfluences属性创建动画1.demo效果2. 实现要点2.1 Geometry到BufferGeometry3.2 创建带有变形目标的网格对象3.3 render中更新动画4. demo代码1.demo效果2. 实现要点2.1 Geometry到BufferGeometry最新的three.js中的 updateMorphTargets 方法不再支持Geometry几何体,需要使用 BufferGeometry 替代,而且原来Geometry对象中的morph原创 2021-05-29 13:38:10 · 1391 阅读 · 7 评论 -
three.js变形动画-使用MorphAnimMesh制作奔跑的小马动画(vue中使用three.js67)
使用MorphAnimMesh制作动画1.demo效果2.OrbitControls介绍3. 实现要点3.1 vue中引入OrbitControls控制器3.2 创建轨道控件实例3.3 render中更新轨道控件4. demo代码1.demo效果2.OrbitControls介绍通过轨道控件OrbitControls 可以实现按住鼠标左键旋转物体,按住鼠标右键平移物体,滚动滚轮缩放物体,还可以通过方向键移动物体位置OrbitControls操控说明以下是操控和动作的比对说明操控动作原创 2021-05-29 10:46:57 · 713 阅读 · 1 评论 -
three.js使相机沿指定路径运动,相机漫游,使物体在指定路径上运动(vue中使用three.js66)
使相机沿指定路径运动,是物体在指定路径上运动1.demo效果2. 实现要点2.1 相机运动2.1.1 创建运动路径2.1.2 render中更相机坐标2.2 相机轨道参考线2.3 小球运动2.3.1 创建小球2.3.2 render中更小球坐标3. demo代码1.demo效果如上图,该demo实现相机沿指定路径运动始终看向地球,绿色小球沿相机相反方向运动2. 实现要点2.1 相机运动2.1.1 创建运动路径创建运动路径通过 THREE.CatmullRomCurve3 对象来创建,将会生成一原创 2021-05-28 23:14:34 · 3339 阅读 · 13 评论 -
three.js使用轨道控件OrbitControls控制相机(vue中使用three.js65)
使用轨道控件OrbitControls控制相机1.demo效果2.OrbitControls介绍3. 实现要点3.1 vue中引入OrbitControls控制器3.2 创建轨道控件实例3.3 render中更新轨道控件4. demo代码1.demo效果如上图,该demo通过轨道控件OrbitControls控制相机。实现按住鼠标左键旋转物体,按住鼠标右键平移物体,滚动滚轮缩放物体,还可以通过方向键移动物体位置2.OrbitControls介绍通过轨道控件OrbitControls 可以实现按住鼠原创 2021-05-27 21:52:45 · 4087 阅读 · 1 评论 -
three.js使用第一人称控件FirstPersonControls控制相机(vue中使用three.js64)
使用飞行控件FlyControls控制相机1.demo效果2.FirstPersonControls介绍3. 实现要点3.1 vue中引入FirstPersonControls控制器3.2 创建第一人称控件实例3.3 render中更新第一人称控件4. demo代码1.demo效果如上图,该demo通过第一人称控件FirstPersonControls控制相机。实现像第一人称射击游戏一样使用键盘移动角色,使用鼠标控制视角2.FirstPersonControls介绍通过第一人称控件FirstPer原创 2021-05-27 21:10:14 · 3902 阅读 · 8 评论 -
three.js使用飞行控件FlyControls控制相机(vue中使用three.js63)
使用飞行控件FlyControls控制相机1.demo效果2.FlyControls介绍3. 实现要点3.1 vue中引入FlyControls控制器3.2 创建飞行控件实例3.3 render中更新飞行控件4. demo代码1.demo效果如上图,该demo通过飞行控件FlyControls控制相机。实现视图的上下左右前后移动,左右翻滚,跟随鼠标移动等效果2.FlyControls介绍通过飞行控件FlyControls 可以实现场景的前后左右移动,左右翻滚,跟随鼠标四周移动FlyControl原创 2021-05-27 00:27:56 · 1823 阅读 · 0 评论 -
three.js使用轨迹球控件TrackballControls控制相机(vue中使用three.js62)
使用TrackballControls控制相机1.demo效果2.TrackballControls介绍2.1 TrackballControls操控说明2.2 TrackballControls属性介绍2.3 TrackballControls方法介绍2.3.1 update()函数2.3.2 reset()函数2.3.3 dispose()函数2.3.4 change()回调函数3.实现要点3.1 vue中引入TrackballControls控制器3.2 创建TrackballControls实例3.原创 2021-02-27 13:20:51 · 5684 阅读 · 0 评论 -
three.js使用Tween.js实现动画(vue中使用three.js61)
使用Tween.js实现动画1.demo效果2.Tween.js基本用法2.1 tween的基本使用2.1.1 创建Tween对象2.1.2 定期更新tween2.2 控制tween动画2.2.1控制动画的开始和结束2.2.2控制多个动画2.2.3控制动画执行次数2.2.4控制动画更新2.3 tween回调函数3.实现要点3.1 vue中tween.js引入3.2 创建并启动Tween动画3.3 动画更新回调处理3.4 render中处理动画更新4.demo代码1.demo效果如上图,该demo通过原创 2021-02-25 22:27:57 · 6976 阅读 · 1 评论 -
three.js使用光线投射对象Raycaster在屏幕中拾取/选取对象(vue中使用three.js60)
用鼠标在屏幕中拾取/选取对象1.demo效果2.知识要点2.1 光线投射对象Raycaster2.1.1 创建光线投射对象2.1.2获取射线交叉对象3.实现要点3.1 添加鼠标点击和悬浮监听事件3.2 屏幕坐标系转换为three.js 坐标系3.3 创建光线投射对象获取选取对象3.4 选中对象处理4.demo代码1.demo效果如上图,该demo实现鼠标可以在屏幕中选取球体、圆柱或方块,点击时改变其透明度。若勾选showRay属性。鼠标滑过对象时出现模拟投射射线的红色线条2.知识要点2.1 光线投原创 2021-02-24 00:25:15 · 3453 阅读 · 7 评论 -
three.js创建简单动画(vue中使用three.js59)
简单动画1.demo效果2.知识要点2.1 three.js动画分类2.1.1基础动画2.1.2移动相机2.1.3变形和蒙皮2.1.4加载外部动画2.2 基础动画实现方式2.2.1 利用requestAnimationFrame()函数实现动画2.2.2 利用setInterval()或setTimeout()实现动画3.实现要点3.1 创建底板、方块、球体、圆柱并添加到场景3.1 实现方块、球体、圆柱动画4.demo代码1.demo效果如上图,该demo实现方块旋转、球体上下跳动、圆柱放大缩小简单动原创 2021-02-22 23:54:22 · 978 阅读 · 0 评论 -
three.js加载GLTF格式模型(vue中使用three.js58)
加载GLTF格式模型1.demo效果2.实现要点2.1 GLTF模型放置路径2.2 GLTF格式说明2.3 加载GLTF模型3.demo代码1.demo效果如上图,该demo通过GLTFLoader加载了GLTF格式的模型,并呈现在页面中2.实现要点2.1 GLTF模型放置路径vue中加载文件时默认的路径为public下,所以需要加载的文件放在该路径下,同时在vue的data属性中创建变量publicPath,此变量的值是vue中的环境变量process.env.BASE_URLdata()原创 2021-02-09 23:10:20 · 4492 阅读 · 9 评论 -
three.js加载VRML格式模型(vue中使用three.js57)
加载VRML格式模型1.demo效果2.实现要点2.1 VRML模型放置路径2.2 加载VRML模型3.demo代码1.demo效果如上图,该demo通过VRMLLoader加载了VRML格式的模型,并呈现在页面中2.实现要点2.1 VRML模型放置路径vue中加载文件时默认的路径为public下,所以需要加载的文件放在该路径下,同时在vue的data属性中创建变量publicPath,此变量的值是vue中的环境变量process.env.BASE_URLdata() { return {原创 2021-02-09 22:29:55 · 1401 阅读 · 0 评论 -
three.js加载PLY格式模型(vue中使用three.js56)
加载PLY格式模型1.demo效果2.实现要点2.1 PLY模型放置路径2.2 加载PLY模型2.3 创建粒子材质纹理2.4 格式化为粒子系统3.demo代码1.demo效果如上图,该demo通过PLYLoader加载了PLY格式的模型,将汽车模型呈现在页面中2.实现要点2.1 PLY模型放置路径vue中加载文件时默认的路径为public下,所以需要加载的文件放在该路径下,同时在vue的data属性中创建变量publicPath,此变量的值是vue中的环境变量process.env.BASE_U原创 2021-02-06 22:12:28 · 4679 阅读 · 4 评论 -
three.js加载PDB格式模型(vue中使用three.js55)
加载PDB格式模型1.demo效果2.实现要点2.1 PDB模型放置路径2.2 加载PDB模型2.3 处理分子顶点2.4 处理分子连线3.demo代码1.demo效果如上图,该demo通过PDBLoader加载了PDB格式的模型,将分子结构模型呈现在页面中2.实现要点2.1 PDB模型放置路径vue中加载文件时默认的路径为public下,所以需要加载的文件放在该路径下,同时在vue的data属性中创建变量publicPath,此变量的值是vue中的环境变量process.env.BASE_URL原创 2021-02-06 22:00:23 · 929 阅读 · 4 评论 -
three.js加载VTK格式模型(vue中使用three.js54)
加载VTK格式模型1.demo效果2.实现要点2.1 VTK模型放置路径2.2 加载VTK模型3.demo代码1.demo效果如上图,该demo通过VTKLoader加载了VTK格式的模型,将塑像呈现在页面中2.实现要点2.1 VTK模型放置路径vue中加载文件时默认的路径为public下,所以需要加载的文件放在该路径下,同时在vue的data属性中创建变量publicPath,此变量的值是vue中的环境变量process.env.BASE_URLdata() { return {原创 2021-02-03 00:03:51 · 1939 阅读 · 5 评论 -
three.js加载COLLADA(.dae)格式模型(vue中使用three.js53)
加载COLLADA格式模型1.demo效果2.实现要点2.1 COLLADA模型放置路径2.2 加载COLLADA模型3.demo代码1.demo效果如上图,该demo通过ColladaLoader加载了COLLADA格式的模型,将卡车呈现在页面中2.实现要点2.1 COLLADA模型放置路径vue中加载文件时默认的路径为public下,所以需要加载的文件放在该路径下,同时在vue的data属性中创建变量publicPath,此变量的值是vue中的环境变量process.env.BASE_URL原创 2021-02-02 22:40:10 · 1966 阅读 · 1 评论