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
threeJs
Threejs
进阶之五:使用CSS2DRenderer给模型添加HTML标签
这一节给场景中的模型添加标签,想实现的效果是,通过鼠标点击场景中摩托车的某个部位,则在场景中出现一个标签,并在标签上显示该部位的信息。最终的效果图如下:要实现上面的效果,需要用到CSS2D渲染器,先来了解下CSS2D渲染器CSS2DRenderer(CSS2D渲染器)CSS2DRenderer(CSS2D渲染器)可以把HTML元素作为标签标注到三维场景中,CSS2DRenderer是CSS3DRe
九仞山
·
2023-11-07 06:42
ThreeJS
html
javascript
html5
前端
3d
Threejs
进阶之七:使用CSS3DRenderer渲染HTML标签
前面我们实现了通过使用CSS2DRenderer给模型添加HTML标签的效果,渲染出来后我们发现当我们缩放鼠标时,渲染的HTML标签并不会跟着场景缩放,这是因为CSS2DRenderer渲染的标签默认保持自身像素值。官方文档中也提到了,CSS2DRenderer是CSS3DRenderer(CSS3D渲染器)的简化版本,它唯一支持的变换就是位移。所以,它不支持缩放等功能。这一节我们来了解下使用CS
九仞山
·
2023-11-07 06:12
ThreeJS
前端
javascript
html5
vue
3d
使用CSS2DRenderer在3D项目中创建Label标签并添加点击事件(代替鼠标射线检测)
/libs/
threejs
/jsm/renderers/CSS2DRenderer.js";varcamera,scene,renderer,labelRenderer;创建场景相机灯光加载模型等代码省略创建渲染器的同时创建一个
Zmikoo_zyx
·
2023-11-07 06:10
3d
three.js
ThreeJs
CSS2DRenderer、OrbitControls 鼠标事件问题
一、场景A:在
ThreeJs
3D场景中国使用CSS2DRenderer渲染Html元素,OrbitControls功能失效原因分析:CSS2DRenderer渲染器会在页面渲染出一个Div,里面包含自定义的
小卡雷尔
·
2023-11-07 06:09
3D可视化
前端
3d
threejs
添加 CSS2DRenderer 导致 OrbitControls 控制器不能移动
threejs
添加CSS2DRenderer导致OrbitControls控制器不能移动标签渲染器CSS2DRenderer会创建出一个div元素,有时因为位置原因导致OrbitControls不能移动
超级小白猿
·
2023-11-07 06:38
CSS2DRenderer
three.js
threejs
CSS3DRenderer添加标签并设置朝向摄像机
一.由于CSS3DRenderer是附加组件,必须显式导入import{CSS3DRenderer,CSS3DObject}from'three/examples/jsm/renderers/CSS3DRenderer.js';二.CSS3DRenderer特点CSS3D不面向摄像机,会跟随场景缩放,不被模型遮挡,通过DOM事件点击但是由于项目要求label时刻面向摄像机,因此需要在每次刷新更新l
给你六圆钱
·
2023-11-07 06:36
three.js
前端
threejs
(9)-应用物理引擎设置物体相互作用
一、认识物理引擎与cannon安装Cannon.js是一个开源的3D物理引擎,用于在WebGL中创建3D物理模拟。它提供了一个灵活的API,可以应用于许多WebGL场景。我们需要了解一些基本概念,包括物理实体、碰撞、物理变换、物理世界和物理实体之间的约束等。官网:https://pmndrs.github.io/cannon-es/npm:https://www.npmjs.com/package
拾荒李
·
2023-11-07 03:35
材质
3d
threejs
(10)-WEBGL与GPU渲染原理(难点)后期再消化亦可
一、渲染管线WebGL是什么WebGL(Web图形库)是一个JavaScriptAPI,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGLES2.0非常一致的API来做到这一点,该API可以在HTML5元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加速。WebGL发展史WebGL的发展最早要追溯到2006年,WebGL起
拾荒李
·
2023-11-07 03:35
webgl
three.js学习ing+日照效果
three.js
ThreeJs
是一款WebGL框架(在其API接口基础上又进行了一层封装),Three.js是基于原生WebGL封装运行
西瓜味白桃汽水
·
2023-11-06 23:41
three
1.第一章1小节 运行简单的例子
以下文章即Learn
Threejs
第三版英文翻译学习记录,可以到正版书店购买对应书籍。这章内容内容中,你将学到,创建场景、添加对象、添加相机。
我的名字好长好长灬
·
2023-11-06 17:48
(四)
Threejs
基础-对象的缩放、移动、旋转和动画
目录1、对象的缩放、移动和动画2、代码实现1、对象的缩放、移动和动画1)通过上节的对象、辅助坐标轴、轨道控制器的创建内容,对象的创建如下://创建box图形形状constgeometry=newTHREE.BoxGeometry(1,1,1);//赋予基础材质constmaterial=newTHREE.MeshBasicMaterial({color:0xffff00});//基于图形形状和材质
轮回的秋
·
2023-11-05 23:04
webGL
javascript
开发语言
ecmascript
(五)
Threejs
基础-Clock时间跟踪动画与Gsap动画库使用
目录1、Clock时间跟踪1.1对象构造1.2常用属性1.3常用方法1.4完整过程2、Gsap动画控制2.1安装依赖2.2完整过程1、Clock时间跟踪1.1对象构造//创建时间跟踪对象constclock=newTHREE.Clock();1.2常用属性//当clockstart,.getElapsedTime()or.getDelta()更新oldTime,注意查看oldTime值varold
轮回的秋
·
2023-11-05 23:04
webGL
javascript
前端
开发语言
(三)
Threejs
基础-通过帮助文档创建立方体、轨道控制器、坐标轴辅助器
目录1、文档使用、基础环境配置2、创建立方体、轨道控制器、坐标轴辅助器3、其它1、文档使用、基础环境配置1)创建本地
ThreeJS
文档示例环境:https://blog.csdn.net/donglaoxie
轮回的秋
·
2023-11-05 23:33
webGL
javascript
前端
六、
threejs
学习笔记-加载外部三维模型
友情链接:
threejs
中文文档目录1.GLTF格式简介(Web3D领域JPG)GLTF格式信息2.加载.gltf文件(全流程)(1)引入GLTFLoader.js(2)gltf加载器newGLTFLoader
焦焦焦焦焦
·
2023-11-05 16:07
threejs
前端
threejs
Three.js - JS三维模型库在Vue2中的基础教程
threejs
官网:https://
threejs
.org/
threejs
案例:https://
threejs
.org/examples/#webgl_animation_keyframes
threejs
API
EverGlowShan
·
2023-11-05 16:02
three.js
可视化报表
html5
前端
html
基于
ThreeJS
的3D地球
第一次接触
threeJS
,说实话,挺脑瓜子疼的!功能:3D地球(纹理贴图),地球上添加标记点(经纬度),点击标记点弹出对应的信息框,地球入场动画,相机移动动画等。
你怎么瘦的像条狗一样
·
2023-11-03 20:57
地图
VUE
3d
前端
vue.js
vue开发案例:基于Three.js搭建三维数字化场景
gltf模型,并解析模型动画;基于worker-loader在vue中使用webworker;基于webworker动态设置模型(鸟、牛)的移动路线;基于geotiff.js与DEM生成三维地形场景;
threejs
碰碰qaq
·
2023-11-03 20:27
#
Three.js
#
Vue
#
GLTF
vue.js
javascript
前端框架
tauri 访问静态资源,响应头为Content-Type:‘text/html‘
index-f8291142.js:22050:15)atObject.onLoad(index-f8291142.js:22033:22)atindex-f8291142.js:19769:20使用
threejs
JA+
·
2023-11-03 08:49
Rust
web前端
前端
前端dxf文件结构
导出的通用看图文件,它本质上是一种ascll码文件,可以使用three-dxf(https://github.com/gdsestimating/three-dxf)先将其转换成json,three-dxf是基于
threejs
千茉紫依
·
2023-11-02 21:50
用
ThreeJS
简单实现一个类似《七圣召唤》的掷骰子
前笔者利用业余时间自学了three.js。为了更好的了解WebGL以及更熟练的使用three,想模仿原神中的小游戏“七圣召唤”中的投掷骰子效果,作为首个练习项目~~这是坚持写技术博客的第二周,也是首篇在掘金写的文章,人生路远,仍需远行。基本工作为了方便直接用vite创建了vue项目npm下载three.js[1]和cannon-es[2],最重要的两个库~1基本1.1创建场景直接贴代码~/***
前端瓶子君
·
2023-11-02 20:13
数码相机
Threejs
三维开发系列之
Threejs
基础概念
Threejs
简介(是什么)
Threejs
是一个web端的3D图形引擎,能利用js创建和控制各种三维模型和场景(能用来做什么)可以用js开发各种复杂的三维场景、空间模型动画展示、各种三维小游戏(比如微信跳一跳就是
高阳很捷迅
·
2023-11-02 18:37
前端开发
Threejs
三维开发
unity的navmesh生成可供
threejs
使用的模型数据文件
1、在unity中生成导航网格2、导出网格的顶点和索引数据这是导出数据的C#文件代码usingSystem.IO;usingUnityEditor;usingUnityEngine.SceneManagement;usingUnityEngine;usingSystem.Security.Cryptography;//navmesh导出数据publicclassNavMeshExport:Mono
dfstqaaaaaa
·
2023-11-02 10:20
mesh
unity
WEBGL入门的基础介绍
目录WebGL基本介绍概述WebGL的特性图形硬件的介绍WebGL开发入门WebGL绘制图形抽象过程基于WebGL封装的框架WebGL坐标系基础视变换投影变换视口变换实例演示(使用
ThreeJS
)光照光照类型光照的原理
Amesteur
·
2023-11-02 07:05
学习笔记
WebGL
WebGL
Three.js自发光贴图 .emissiveMap
Three.js自发光贴图.emissiveMapWebGL/
Threejs
技术博客:查看更多文章和实战案例在Three.js材质中,和颜色贴图属性.map对应的是颜色属性.color,和高光贴图属性.
郭隆邦技术博客
·
2023-11-02 01:05
【js&
threeJS
】入门three,并实现全景看房案例,附带全码
序幕:首先附上官方文档以及案例库地址:three.jsdocsthree.jsexamples全景图切割工具:HDRItoCubeMap前置了解:Three.js是一个用于创建和渲染3D图形的JavaScript库。它基于WebGL技术three.js有四个不同的引用资源:three.module.min.js、three.module.js、three.min.js、three.js,区别如下:
来自湖南的阿晨
·
2023-11-01 17:36
html5
&&
css3
&&
浏览器
Javascript与ES6~
#
浏览器
javascript
前端
开发语言
threejs
实现简单全景看房demo
正在上传…重新上传取消各位大家好,最近一直在学习
threejs
,在学习过程中不断进步,在将来我会不断完善我的
threejs
案例库,希望能在学习路上帮到大家接下来为各位介绍的是一个全景看房的demo,我们先上地址
天空之枫
·
2023-11-01 17:33
js
javascript
开发语言
ecmascript
threejs
可视化快速入门指北(附3D资源导航)
前言当你开始思考你应该如何学习WebGL和Three.js的时候,相信你至少对相关的关键词了解过了,希望通过WebGL或Three.js实现你想要的Web3D功能,也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能,也许你是因为领导临时分配任务,还不太清楚WebGL和Three.js是什么,个人建议是不要做过多思考,先看看相关的具体技术教程,随着时间的推移你自然会明白Canva
懒人码农
·
2023-11-01 17:32
three.js
javascript
Web3D
3d
javascript
前端
HDRI贴图下载及Three.js利用
最令人兴奋的项目之一是在
Threejs
中添加HDRI背景。HDRI图像是从房间内部或花园、丛林或山脉等开放环境等场景中以360度捕获的。你可以自己创建任何这些图像,但这不是本教程的主题。
新缸中之脑
·
2023-11-01 17:56
贴图
javascript
开发语言
Threejs
绘制圆形的源码,可以鼠标滚轮放大缩小
直接复制到html格式即可打开查看效果绘制曲线body{margin:0;overflow:hidden;/*隐藏body窗口区域滚动条*/}-->-->varscene=newTHREE.Scene();vargeometry=newTHREE.Geometry();//声明一个几何体对象Geometry//绘制圆形vararc=newTHREE.ArcCurve(0,0,100,0,2*Mat
瞳中的云
·
2023-11-01 11:29
波渲染以及焦散的技术原理
关于小区域水波渲染以及焦散的技术原理,推荐下面两篇资源:https://github.com/martinRenou/
threejs
-causticshttps://zhuanlan.zhihu.com
玄魂
·
2023-10-31 23:21
[
threejs
]让导入的gltf模型显示边框
边框1效果图如下:代码如下:constgltfLoader1=newGLTFLoader();gltfLoader1.load("/assets/box/1/scene.gltf",function(gltf){letmodel=gltf.scene;model.scale.set(3,3,3)//scene1.add(model);//renderer1.render(scene1,camera
bugs_more_more
·
2023-10-31 17:01
前端
javascript
开发语言
Three.js - 光源(九)
创建基本场景import*asTHREEfrom'https://
threejs
.org/build/three.module.js'import{OrbitControls}from'https://
nie-ny
·
2023-10-31 09:16
three.js
学习
前端
javascript
three.js
Three.js相机对象.up属性
Threejs
相机对象Camera的.up属性表示相机对象的上方向,如果你有一定图形学基础,你可以很好的理解,如果没有图形学基础也没关系,你可以在
threejs
代码中更改.up的属性值,查看
threejs
汉武大帝·
·
2023-10-31 09:46
three.js
Three 之 three.js (webgl)透视视角和正交视角,以及透视转正交的视角切换
透视视角和正交视角,以及透视转正交的视角切换一、简单介绍二、实现原理三、正投影和透视投影简单解释四、透视相机(PerspectiveCamera)五、正交相机(OrthographicCamera)六、
threejs
仙魁XAN
·
2023-10-31 09:44
ThreeJS
javascript
threejs
webgl
透视
正交
Three.js相机控件OrbitControls
Three.js相机控件OrbitControls通过Three.js的相机控件OrbitControls.js可以对
Threejs
的三维场景进行缩放、平移、旋转操作,本质上改变的并不是场景,而是相机的参数
郭隆邦技术博客
·
2023-10-31 09:14
Three.js
threejs
修改camera的lookAt无效怎么办
前几天想移动camera实现漫游效果,结果发现camera总是朝着原点坐标方向,然后我修改lookAt为其他坐标letv=newTHREE.Vector3(100,0,100)camera.lookAt(v)结果camera的朝向还是(0,0,0)后来在网上找到原因,原来是我在页面上使用了controls控件,影响了照相机camera的使用,我在页面上使用了DragControls和Trackba
李奈 - Leemon
·
2023-10-31 09:42
问题
three.js
添加3d动画到
threejs
并显示在mapbox上
说实在的不知道为啥
threejs
的内容出到了第3期。写出来防止大家踩坑。
threejs
可以添加我们所需要的3d动画,因为单纯的靠
threejs
本身的对象并不能真正满足我们的动画需求。
gardenlike2
·
2023-10-29 07:26
threejs
自定义引入模型进行点击获取
最近编辑点击事件时发现:
threejs
的raycaster只对mesh有感应,而引入模型类型是group,那么要对引入模型进行获取就要把raycaster.intersectObjects(children
BUG小熊手
·
2023-10-28 16:06
three.js
3D模型
three.js
threejs
的转场动画 (基于Tween实现)、平滑切换场景
一、先看看效果二、实现方法:实现思路:先获取当前相机所在位置,在使用tween.js动画将相机位置平滑切换到目标位置点//当前相机所在点位置p1={x:camera.position.x,y:camera.position.y,z
慢步者_rambler
·
2023-10-28 16:05
threejs
动画
javascript
前端
threejs
动画转场
threejs
点击获取三维坐标(Three.js获取鼠标点击的三维坐标)
一、思路绑定点击事件,通过THREE.Raycaster光线投射,用于确定鼠标点击位置上有哪些物体,raycaster.intersectObjects(scene.children)返回点击位置上所有的物体的数组;我们用varselected=intersects[0]取第一个,也就是最前面的那个物体;在通过selected.point取点坐标二、代码addClick();functionadd
慢步者_rambler
·
2023-10-28 16:35
threejs
javascript
前端
threejs
3D
webgl
threejs
将屏幕坐标转换成3d中的坐标。
将当前屏幕上的坐标转换成3d中的坐标pos是当前canvas屏幕上的坐标,targetZ是物体距离原点的距离privateget3DPosByCanvasPos(pos:THREE.Vector2,targetZ:number){letvec=newTHREE.Vector3();//createonceandreuselettarget=newTHREE.Vector3();//createon
IkeShy_Zz
·
2023-10-28 16:04
Threejs
3d
javascript
开发语言
【
THREEJS
】如何使用
THREEJS
展示车辆效果
模型导出找到一个合适的车辆模型,导入模型。当前模型是没有任何材质的。全局光照这里使用了HDR+方向光来进行灯光展示后期使用SSR进行反射使用Bloom增加整体氛围感材质不同类型物体应该对应不同物体材质。这里全部使用的是物理材质进行渲染使用PBR材质增加细节。
菜鸡饶
·
2023-10-28 16:03
webgl
demo
THREE
three.js
threejs
点击事件
实际原理为获取相机和鼠标点击时的位置,发出一条射线实现的需要用到的变量除camera外://获取鼠标坐标varmouse=newTHREE.Vector2();varraycaster=newTHREE.Raycaster();初始化中实现对点击事件的监听://点击模型window.addEventListener('click',onmodelclick);使用的函数://获取在射线上的接触点f
117sir
·
2023-10-28 16:03
threejs
javascript
three.js
Threejs
+ shader 实现的一些酷炫的效果
效果预览DEMO地址GIT地址不定期的在shadertoy上抄一些特效到实现在
threejs
中觉得可以的话请给一个小星星或者一个赞QQ群:1082834010
菜鸡饶
·
2023-10-28 16:32
Shader
webgl
THREE
javascript
前端
html5
ui
css
使用blender烘培导入Three.js中
导入模型到blender中给场景打光展uv给需要烘培的物体展uv创建烘培纹理选择物体烘培使用展开uv并且使用烘培纹理导入
threejs
场景中天空用的自带的dynamicsky展uv用的uv-packer
菜鸡饶
·
2023-10-28 16:32
webgl
demo
THREE
shader
webgl
three.js
基于
threejs
开发的3D地球大屏可视化,支持2D地图模式,飞线,涟漪,配置简单易上手
摘要基于
threejs
封装的3D可视化地球组件,开箱即用主要实现功能根据geojson格式的json文件,渲染平面2D和3D地图,地图可配置区域色,边界色支持以贴图的方式实现用户设计的个性化地图图片的3D
qq81650984
·
2023-10-28 16:02
javascript
typescript
数据可视化
大屏端
threejs
实现一个固定大小的3d标点
需求背景需要在3d模型上实现标注的功能,一开始是直接通过添加一个普通的mesh来实现的,但是这样就会有一个问题-当视图缩放的时候,标注也会跟着一起放大缩小,影响视觉效果,因此需要实现一个不会随着视图一起放大或者缩小的mesh实现思路明确方向根据需求,可以知道我们其实需要实现的就是更改模型渲染的默认方式,而模型的渲染是由模型的MVP三个矩阵来决定的再进一步分析MVP三个矩阵,Model矩阵决定模型的
Polaris_tl
·
2023-10-28 16:29
threejs
3d
基于
Threejs
开发的3D点位编辑器
简介编辑器可以让用户在3D场景中添加、编辑和删除点位,并且支持上传参考模型、多点位类型的添加、上传、编辑、下载和删除、场景视图中点位的拖拽、场景配置等功能。注:所有操作均在本地。技术栈three.js:一个用于创建3D图形的JavaScript库。Vue.js:一个流行的JavaScript框架,用于构建用户界面。功能点添加、编辑和删除点位。上传参考模型。多点位类型的添加、上传、编辑、下载和删除。
菜鸡饶
·
2023-10-28 16:28
THREE
webgl
threejs
vuejs
threejs
(8)-详解光线投射与物体交互
详解光线投射与物体交互import*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//导入动画库importgsapfrom"gsap";//导入dat.guiimport*asdatfrom"dat.gui";//目标:raycasterconstg
拾荒李
·
2023-10-28 15:33
交互
threejs
(7)-精通粒子特效
一、初识Points与点材质//设置点材质constpointsMaterial=newTHREE.PointsMaterial();import*asTHREEfrom"three";//导入轨道控制器import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";//导入动画库importgsapfrom"gsap";/
拾荒李
·
2023-10-28 15:23
3d
上一页
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
其他