E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
Three.JS
360*180度全景图预览插件Photo Sphere Viewer
插件描述PhotoSphereViewer是一款基于
Three.js
的360X180度全景图预览js插件。该js插件可以360度旋转查看全景图,也可以上下180度查看图片。
MC桥默
·
2024-01-07 17:53
手搭我的世界基岩版服务器后台网站(LiteloaderBDS-SQLite-Spring Boot-Vue)Java后端+RESTful API;借助
Three.js
实现三维可视化展览交互界面
项目是刚刚完成的,于是趁热打铁把文档也写了。在这里分享出来,也方便以后回顾目录项目介绍整体设计架构图网站界面预览图技术选型和原因搭建步骤库表设计插件说明后端说明前端说明部署说明完整代码插件代码后端代码前端代码项目总结项目介绍本项目旨在为我的世界基岩版私服搭建一个可视化的后台管理系统,通过LiteloaderBDS插件实时收集游戏内数据,并将其存储在轻量级数据库SQLite中。后端采用SpringB
覚えていない903
·
2024-01-07 07:58
java
javascript
spring
boot
vue.js
sqlite
WEB 3D技术
three.js
顶点交换
本文我们来说顶点的转换其实就是我们所有顶点的位置发生转变我们整个物体的位置也会随之转变这里我们编写代码如下import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{RGBELoader}from"three/e
-耿瑞-
·
2024-01-06 13:26
前端
3d
javascript
WEB 3D技术
three.js
顶点缩放
本文我们来说顶点缩放我们官网搜索BufferGeometry下面有一个scale函数例如我们先将代码写成这样上面图片和资源文件大家需要自己去加一下import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{RGB
-耿瑞-
·
2024-01-06 13:26
前端
3d
javascript
带你入门
three.js
——从0到1实现一个3d可视化地图
读完本篇文章,你可以学到什么对于
three.js
这个框架有一个简单的理解,可以入门下。学习three中的Raycaster,主要是用鼠标来判断当前选择的是哪一个物体。我用一个简单的实例带大家用
前端图形
·
2024-01-06 13:56
可视化
数据可视化
es6
three.js
前端
javascript
Three.js
使用技巧
three.js
中大多数材质需要有了光照才可以看到,MeshBasicMaterial是一种不需要光照就可以见的材质。
神小夜
·
2024-01-06 13:26
three.js
Three.js
web3d
Three.js
一起学-对比WebGL和
Three.js
的渲染流程
前言大家好,我是一拳~对web3D感兴趣的同学一定对WebGL和
Three.js
不陌生了,前者是web端实现3D场景的不二之选,后者也是业界应用最广泛,认可度最高的web端3D渲染引擎之一。
一拳小和尚LXY
·
2024-01-06 13:25
Three.js
前端
Three.js
WebGL
three.js
汇总,老牌Web 3d展示Js
简述我把现在的Web前端页面动效分为四个等级1:简单的css,js,jquery的旋转,缩放,位移,淡入淡出,拉伸,渐变等效果;2:通过Ae或者其他软件导出的序列帧(或者图片),和一些简单的特效js(大多是canvas);3:通过大量数据(json)来定义的动作,包含(人物,地图等,可包含简单的3d模型,因为一些3d模型也是由json数据组成),相当复杂的css(如果css相当优秀可直接无视这篇文
lxw_powerfulCat
·
2024-01-06 13:54
3d
javascript
【
Three.js
】渲染模型卡顿的优化办法
使用LOD技术可以在不同距离下使用不同的模型细节来优化
three.js
渲染性能,下面是具体步骤:创建多个模型,每个模型的面数和细节不同,这些模型应该是同一个对象的不同
小楼窗外的细雨
·
2024-01-06 13:24
模型渲染
javascript
three.js
前端
WEB 3D技术
three.js
顶点旋转
我们来说说几何体顶点的旋转官网搜索BufferGeometry这里我们有xyz三个轴的旋转例如我们这样的代码import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{RGBELoader}from"three/
-耿瑞-
·
2024-01-06 13:23
前端
3d
javascript
【
Three.JS
学习笔记(一)】几何体全家福
几何体摘录自官网https://threejs.org/,作为学习笔记增加了些个人的想法。立方缓冲几何体构造函数参数名含义类型默认值widthX轴上面的宽度Float1heightY轴上面的高度Float1depthZ轴上面的深度Float1widthSegmentsX轴的分段数Integer1heightSegmentsY轴的分段数Integer1depthSegmentsZ轴的分段数Integ
xxhls_02
·
2024-01-05 18:31
Three.JS学习笔记
javascript
学习
笔记
three.js
射线拾取精灵图Sprite控制场景
效果:这里只是鼠标点击时,改变了精灵图的材质颜色代码://引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器i
汉武大帝·
·
2024-01-05 15:00
three.js
前端
javascript
three.js
Raycaster(鼠标点击选中模型)
效果:代码:标准设备坐标系:three.jsCanvas画布具有一个标准设备坐标系,该坐标系的坐标原点是在canvas画布的中间位置,x轴水平向右,y轴竖直向上,标准设备坐标系的坐标值不是绝对值,是相对值,范围是[-1,1],也就是说canvas画布上任何一个位置的坐标,如果用标准设备坐标取衡量,那么坐标的所有值都在-1和1之间;屏幕坐标转为标准设备坐标://坐标转化公式addEventListe
汉武大帝·
·
2024-01-05 14:56
three.js
javascript
前端
vue.js
three.js
使用正方体加图片实现全景看房效果
three.js
使用正方体加图片实现全景看房效果实现方法创建一个正方体加载6张纹理贴图正方体z轴缩放-1调整相机位置图例代码import{ref,onMounted}from"vue";import*asTHREEfrom"three
是云呀!
·
2024-01-05 13:42
three.js
javascript
开发语言
前端
vue.js
three.js
实现电子围栏效果(纹理贴图)
three.js
实现电子围栏效果(纹理贴图)实现步骤围栏的坐标坐标转换为几何体顶点,uv顶点坐标加载贴图,移动图例代码import{ref,onMounted}from"vue";import*asTHREEfrom"three
是云呀!
·
2024-01-05 13:35
three.js
javascript
开发语言
前端
vue.js
WEB 3D技术
three.js
法向量演示性讲解
本文我们来说法向法向又叫法向量就是我们一个三维物体顶点垂直于面的方向向量他的作用用来做光反射根据光照的方向根据面进行反射我们上文写的这个代码import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";//创建相机constca
-耿瑞-
·
2024-01-04 23:23
前端
3d
javascript
WEB 3D技术
three.js
通过 GLTFLoader 导入并应用 gltf/glb 3D资源
上文WEB3D技术
three.js
雾基础使用讲解我们讲了雾的基本使用方法但是如果我们要做一个树林一颗一颗树去加那真的是要累死了我们一定是在建模软件上建模好这样的模型然后将模型导入到场景中官网中搜索GLTFLoader
-耿瑞-
·
2024-01-04 19:40
前端
3d
javascript
three.js
: gltf模型设置发光描边
效果:代码:发光描边//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器import{EffectCompo
汉武大帝·
·
2024-01-04 12:09
three.js
javascript
开发语言
ecmascript
前端
three.js
gltf后处理颜色异常(伽马校正)
效果:应用了伽马校正,好像效果不明显代码:发光描边//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器imp
汉武大帝·
·
2024-01-04 12:34
three.js
javascript
开发语言
ecmascript
WEB 3D技术
three.js
几何体uv属性讲解与基本演示
本文我们来说说uv那么它是什么呢?首先比如我们几何体贴一个图那么为什么我们图的四个边就能正好贴到几何体的边为什么不可以图就在几何体中间呢?中心为什么能对齐它就不能偏一点吗?这是第一个问题还有我们gltf这种文件其实也是很多个三角形组件的那么我们怎么确定它每个部位的颜色?其实实现就是这样一个贴图而每个部位的颜色就是通过uv来告诉它具体贴图的哪个位置去实现的相对uv是一个二维坐标针对xy轴我们先编写代
-耿瑞-
·
2024-01-04 10:14
前端
3d
javascript
html js加载本地文件报错处理,跨域问题
我写了一个本地html文件,里面通过
three.js
加载并显示一个本地三维模型,结果报错了。
暴躁的野生猿
·
2024-01-04 08:45
前端
javascript
跨域
three.js
html
本地文件
three.js
加载全景hdr(官网案例)
three.js
加载全景hdr(官网案例)效果代码import{ref,onMounted}from"vue";import*asTHREEfrom"three";import{OrbitControls
是云呀!
·
2024-01-04 06:58
three.js
javascript
开发语言
three.js
相机按照指定路线在建筑模型中漫游(支持开始,暂停)
three.js
相机按照指定路线在模型中漫游(支持开始,暂停)关键点相机运动曲线//相机路线constpoints=[newTHREE.Vector3(0,40,300),newTHREE.Vector3
是云呀!
·
2024-01-04 06:51
three.js
javascript
vue.js
前端
Three.js
加载三维(.gbl)模型
Three.js
加载三维(.gbl)模型近期有个项目中需要实现在页面中加载出三维模型并有旋转的动画展示,毫无疑问,当谈到在Web上呈现引人入胜的三维体验时,
Three.js
是一个无可替代的工具。
bigHead-
·
2024-01-04 01:01
vue.js
three.js
3d
three.js
多通道组合
效果:代码:面与线框切换-->相关文章:http://www.taodudu.cc/news/show-4413505.html?action=onClickhttps://blog.csdn.net/webMinStudent/article/details/130786714//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/
汉武大帝·
·
2024-01-03 11:01
three.js
前端
three.js
实现点击选中模型,模型描边高亮效果
射线投射器Raycaster通过.intersectObjects()判断模型是否选中EffectComposer.js进行后期处理,添加描边高亮效果import{ref,onMounted}from"vue";import*asTHREEfrom"three";import{OrbitControls}from"three/addons/controls/OrbitControls.js";im
是云呀!
·
2024-01-03 08:53
three.js
javascript
前端
开发语言
three.js
实现点击选中模型
使用射线投射(Raycasting)来检测鼠标点击位置是否与模型相交射线的起点设置为相机的位置,鼠标点击的位置创建一条射线intersectObjects判断射线有没有与模型相交import{ref,onMounted}from"vue";import*asTHREEfrom"three";import{OrbitControls}from"three/addons/controls/OrbitC
是云呀!
·
2024-01-03 08:53
three.js
javascript
开发语言
three.js
实现模型描边高亮效果
通过EffectComposer可以实现一些后期处理效果。OutlinePass就可以给一个模型添加一个高亮发光描边1.引入EffectComposer.jsimport{EffectComposer}from'three/addons/postprocessing/EffectComposer.js';大家都知道three.jsWebGL渲染器执行渲染方法.render()会得到一张图像,如果你
是云呀!
·
2024-01-03 08:53
three.js
javascript
开发语言
three.js
给模型添加标签三种方式对比(矩形平面,精灵图,CSS2DObject)
three.js
给模型添加标签三种方式对比(矩形平面,精灵图,CSS2DObject)vue3实现,代码如下代码import{ref,onMounted}from"vue";import*asTHREEfrom"three
是云呀!
·
2024-01-03 08:46
three.js
javascript
vue.js
WEB 3D技术
three.js
补间动画(tween)
本文我们来说补间动画比如说我们有一个正方体默认在如下图位置然后我们希望一秒中之后它到达如下图位置那么我们知道终点和起点的位置从起点到终点一共需要一秒的时间需要程序自己去处理这个图形0.10.2直到1秒它都分别要达到什么位置通过开始和结束位置补出中间的动画部分这就叫补间动画补间动画库叫tween这个东西是可以单独安装的但threeJs已经包含了首先我们要在代码中通过threejs引入它//导入twe
-耿瑞-
·
2024-01-03 08:37
前端
3d
javascript
WEB 3D技术
three.js
通过光线投射 完成几何体与外界的事件交互
本文我们来说光线投射光线投射技术是用于3维空间场景中的交互事件我们先编写代码如下import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";constscene=newTHREE.Scene();constsphere1=ne
-耿瑞-
·
2024-01-01 22:23
前端
3d
javascript
three.js
开发的通俗描述
这篇文章是给第一次接触
three.js
或者看过教程但对
three.js
各种类型的封装类分不清的朋友去形象化理解
three.js
下的3D开发过程。
lorelei47
·
2024-01-01 22:28
three.js
简单画线报错
THREE.Geometryisnotaconstructor基本得引入都没问题;最后才发现newTHREE.Geometry();125版本就不再支持这个api了,如果还需要就用他的子类BufferGeometry需要更换
three.js
光影少年
·
2024-01-01 09:23
javascript
开发语言
ecmascript
three.js
GLTFLoader加载的glb/gltf色去色彩都成了黑白色 问题解决
如下代码constgltfLoader=newGLTFLoader();gltfLoader.load(//模型路径"/gltf/scene.gltf",//加较完成同调(gltf)=>{gltf.scene.traverse((child)=>{if(child.isMesh){child.frustumCulled=false;child.castShadow=true;child.mater
-耿瑞-
·
2024-01-01 06:23
javascript
前端
开发语言
three.js
绘制网波浪
无图不欢,先上图使用方法(以vue3为例)import{ref,onMounted}from'vue'importNetAnimationfrom'@/utils/netAnimation.js'letnet=ref(null)onMounted(()=>{newNetAnimation({dom:net.value,pointLightsAttr:[{},{},{}],axesHelperAtt
风舞红枫
·
2024-01-01 02:01
three
前端
three
three.js
Vue快速应用配置
Three.js
Vue快速应用配置
Three.js
前言一、引用
Three.js
二、定义全局数据三、代码部分--加载一个简单的正方体四、加载外部模型前言当前项目需要搭建一个农场的3D模型,就想到了使用
Three.js
但是
YIGE_MO
·
2023-12-31 21:22
three.js应用
vue
three.js
web
js
阿里Weex 实现页面跳转
')exportdefault{methods:{onTextClick:function(){navigator.push({url:'http://192.168.31.79:8081/dist/
three.js
暗蓝色的天空
·
2023-12-31 04:26
WEB 3D技术
three.js
雾 基础使用讲解
本文我们说一下雾在
three.js
中有一个Fog类它可以创建线性雾的一个效果她就是模仿现实世界中雾的一个效果你看到远处物体会组件模糊直到完全被雾掩盖在
three.js
中有两种雾的形式一种是线性的一种是指数的个人觉得线性的会看着自然一些他是从相机位置开始雾的颜色逐渐加深到更远的地方就看不到了指数的就是附件的东西会看着比较清晰远处突然就看着很浓的雾色了我们编写代码如下
-耿瑞-
·
2023-12-31 02:28
前端
3d
javascript
在vue中使用
three.js
切换页面后销毁,防止内存溢出
产生问题用
three.js
写了一个webgl页面,发现这个webgl页面在和普通页面来回切换多次后会导致页面卡顿。
printf_824
·
2023-12-31 02:26
vue
vue
与
three
javascript
vue.js
前端
基于vue与
three.js
,监听FPX(Stats类使用)
第一步,引入stats类并new出来importStatsfrom'three/examples/jsm/libs/stats.module.js';data(){return{stats:newStats(),}}第二步,添加dommounted(){this.init3D();this.animate();window.addEventListener("keydown",this.toggl
printf_824
·
2023-12-31 02:26
vue
与
three
javascript
vue.js
前端
基于
three.js
的室内全景3D展馆案例分享
先看效果图实现了第一人称行走,WASD点击目标画册进行预览查看位置音乐播放环绕地面镜面反光碰撞检测等等.地址在gitee上gallery:数字展馆概念的demo项目,本项目中使用的技术栈为
three.js
11eleven
·
2023-12-30 07:54
javascript
3d
开发语言
three的学习文档资源和手机端调试
1、资源链接https://www.w3cschool.cn/ehsib/ehsib-emwt3qpd.htmlthreejs文件包下载和目录简介|
Three.js
中文网2、vcosole手机端调试(1
lock cylinder
·
2023-12-30 06:20
学习
typescript
html5
webgl
WEB 3D技术
three.js
色彩空间讲解
上文WEB3D技术
three.js
设置环境贴图高光贴图场景设置光照贴图我们讲了基础材质的各种纹理但是我们的图片到了界面场景中好像绿的程度有点不太一样了这里的话涉及到我们的色彩空间他有两种一种是线性的一种是
-耿瑞-
·
2023-12-30 01:31
前端
javascript
3d
Three.js
全景图(标注偏移、显示不全的问题记录)
Three.jsVR全景图(标注偏移、显示不全的问题记录)最近在项目中利用
three.js
实现了vr全景的功能,过程中遇到了标注偏移、标注图标显示不全的问题,在此做个记录1.VR全景实现原理构建
three.js
vagabond_
·
2023-12-29 18:32
THREE.JS
javascript
vr
three.js
后期处理-FilmPass(类似电视效果)、DotScreenPass(将场景输出成点集)、GlitchPass(电磁风暴效果)-(vue中使用three.js84)
简单的后期处理通道FilmPass、DotScreenPass、GlitchPass1.demo效果2.重要知识点2.1认识后期处理2.2简单后期处理通道介绍2.2.1FilmPass通道介绍2.2.1DotScreenPass通道介绍2.2.1GlitchPass通道介绍3.实现要点3.1相关文件引入3.2创建效果组合器并添加通道3.3通道切换处理3.4render中更新通道与效果组合器4.de
点燃火柴
·
2023-12-29 18:31
vue-three.js
three.js
渲染后期处理
EffectComposer
RenderPass
FilmPass
three.js
入门超详细附带素材及源码
three.js
学习总结超详细附带素材及源码vue安装three.jsnpminstall--savethree引入three.jsimport*asTHREEfrom'three'
three.js
结构
天生我材必有用_吴用
·
2023-12-29 18:30
three.js
javascript
vue.js
前端
three.js
webgl
Three.js
解决纹理渲染后模型为黑色
文章目录前言一、图片路径错误二、TextureLoader()是异步操作,但是没有回调渲染三、渲染时机不正确四、渲染函数里没有requestAnimationFrame()五、尝试使用require引入纹理六、浏览器不能读取本地文件七、光照附-颜色color加载不出总结前言有很多种情况,我一一列举一下,因为我全都试过了…一、图片路径错误要加载的图片应该从当前js文件(即load()所在的文件)开始
白瑕
·
2023-12-29 18:00
three.js
javascript
前端
开发语言
Three.js
学习-光照和阴影(了解向)
参考:Threejs光照和阴影-知乎(zhihu.com)在ThreeJs中,物体的颜色也是通过光照叠加得到的,bling-Phong等模型在这里同样适用,ThreeJs将光照也封装成了一个对象。目录6种光照1环境光AmbientLight2点光源PointLight3聚光灯SpotLight4方向光DirectionalLight5半球光HemisphereLight6平面光RectAreaLi
九九345
·
2023-12-29 18:30
Three.js程序运用
javascript
学习
开发语言
vue中使用
three.js
加载3d模型,绑定 mouseup 和 mousedown 事件不起作用
vue中使用
three.js
加载3d模型,绑定mouseup和mousedown事件不起作用在Three场景中,如果想要对鼠标进行操作就要引入OrbitControls.js文件,在这种控制方式下,鼠标左键为旋转视角
qq_37656005
·
2023-12-29 18:29
three.js
js
vue
vue
three.js
关于从入门
three.js
到做出3d地球这件事(第二篇: 开发必备的辅助技能)
上篇我们讲解了
three.js
的基本配置代码,想看的同学可以访问这个链接:关于从入门
three.js
到做出3d地球这件事(第一篇:通
前端瓶子君
·
2023-12-29 18:28
游戏
java
javascript
vue
js
上一页
1
2
3
4
5
6
7
8
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他