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
进阶之使用后期处理
什么是后期处理?很多three.js应用程序是直接将三维物体渲染到屏幕上的。有时,你或许希望应用一个或多个图形效果,例如景深、发光、胶片微粒或是各种类型的抗锯齿。后期处理是一种被广泛使用、用于来实现这些效果的方式。首先,场景被渲染到一个渲染目标上,渲染目标表示的是一块在显存中的缓冲区。接下来,在图像最终被渲染到屏幕之前,一个或多个后期处理过程将滤镜和效果应用到图像缓冲区。这里three.js通过E
BinParker
·
2023-09-12 07:48
JavaScript
3D
library
javascript
前端
ui
ThreeJS
进阶之矩阵变换
ThreeJS
的矩阵变换Three.js使用matrix编码3D变换——平移(位置),旋转和缩放。Object3D的每个实例都有一个matrix,用于存储该对象的位置,旋转和比例。
BinParker
·
2023-09-12 07:48
JavaScript
3D
library
javascript
前端
开发语言
矩阵
ThreeJS
进阶之动画系统(Animation system)
ThreeJS
进阶之动画系统概述在three.js动画系统中,我们可以为模型的各种属性设置动画:SkinnedMesh(蒙皮和装配模型)的骨骼,morphtargets(变形目标),不同的材料属性(颜色
BinParker
·
2023-09-12 07:48
JavaScript
3D
library
threeJS
javascript
开发语言
前端
GitHub上的WebGL库调研
官网地址:https://
threejs
.org/GitHub地址:https://github.com/mrdoob/three.js2.phaser.js star:15.3k 更新速率:频繁
sky.....
·
2023-09-11 13:45
webgl
webgl
风机可视化效果实现
主要用
Threejs
来实现,大致效果是一个风机,从原来白色表面材质,逐渐过渡到线框效果,并且底部也有一些类似于流线浮动的效果。
sky.....
·
2023-09-11 13:13
threejs
webgl
前端
webgl
threejs
threejs
的dat.gui辅助工具的使用
threejs
的dat.gui辅助工具的使用安装使用安装npmidat.gui-S使用importdatfrom'dat.gui'constcontrolData={rotationSpeed:0.01
小菜鸟学代码··
·
2023-09-11 00:43
three
threeJS
踩坑
在官网学习的引入方法报错信息如下:Failedtoresolvemodulespecifier"three".Relativereferencesmuststartwitheither"/","./",or"../".查啦很多东西自己才疏学浅:但是大概原因我理解就是,modle下引入sdn在线资源没问题;但是OrbitControls.js文件中有impot导入;而正常html不支持语法,所以我改
Έι
·
2023-09-10 23:47
js
javascript
前端
three.js的学习
Threejs
1前言Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
Shadow Shine
·
2023-09-09 16:40
three
javascript
学习
开发语言
Threebox实现在mapbox上添加
threejs
内容
mapbox-gl-V50版本开始用户可以添加自己的WebGL代码呈现到自定义的图层。在GitHub上的功能改进中如图1显示。图1代码的更新所以我们就能在mapbox图层中添加自己需要的webGL图层了。那么如何添加呢?我们先来看一下APIMapboxGLJSAPI。其中说明了我们可以通过Map#addLayer来添加我们需要的图层。而且必须使用render方法。看到render我们应该很清楚想到
gardenlike2
·
2023-09-07 22:49
使用
threeJS
根据点的坐标绘制曲线
使用
threeJs
来绘制曲线首先可以看
threeJS
官网的的曲线示例,链接:CatmullRomCurve3//Createaclosedwaveyloopvarcurve=newTHREE.CatmullRomCurve3
fx2h
·
2023-09-05 13:08
threejs
html
javascript
threejs
得WebGLRenderer+CSS3DRenderer结合使用
文章目录概要1:CSS3DRenderer+WebGLRenderer出现鬼畜bug2:解决思路3:代码示例小结概要在使用
threejs
显示label发现,人家自带了CSS3DRenderer/CSS2DRenderer
喵喵虫
·
2023-09-05 06:05
threeJS
threejs
javascript
windowserver2008部署前端项目出现404
项目场景:在windowserver2008上面发布
threejs
模型网站问题描述:出现静态资源找不到:Failedtoloadresource:theserverrespondedwithastatusof404
喵喵虫
·
2023-09-03 12:09
threeJS
Vue3
windows
server
iis
threeJS
加载外部模型的mesh合并(提高性能)
文章目录前言
threeJS
选中模型问题geometry/bufferGeometry二者都可合并bufferGeometry:geometry:完整代码总结前言在加载gltf模型的时候,为了提高性能和单击可以选中单个楼栋想让建模人员合并成一个
喵喵虫
·
2023-09-03 12:39
threeJS
Vue
JavaScript
three.js
threejs
使用input type=file加载glb模型
项目场景:以前都是本地加载glb模型,最近在测试使用inputtype=file来输入模型。发现了一些问题。问题描述在使用LoadingManager得setURLModifier添加模型得时候会报错:THREE.GLTFLoader:Couldn’tloadtexture,但是gltf没有这个问题this.manager.setURLModifier((_url:string)=>{lethas
喵喵虫
·
2023-09-03 12:08
threeJS
vue.js
webgl
threejs
glb
threejs
加载file格式的gltf模型,使用input type=file加载gltf模型
解决方案:最后在
threejs
官网看到解决办法解决思路URL.createObjectURL(bolb/file)1:input输入文件获取constuploadInput=ref();constfiles
喵喵虫
·
2023-09-02 08:36
vue
javascript
threejs
webgl
threejs
加入精灵模型sprite时不管坐标在哪里都会被其他模型遮挡怎么回事,模型出现不停闪烁问题
最近想要在页面上某个模型上面添加一个面板,展示该模型的详细详细,不管怎么调整照相机camera,都要使面板朝向我们的显示屏,这个时候使用精灵模型sprite最为合适。vartexture=newTHREE.TextureLoader().load("/model/img/station101.png")//创建精灵材质对象SpriteMaterialvarspriteMaterial=newTHR
李奈 - Leemon
·
2023-09-01 19:31
问题
three.js
用WebGPU实现基于物理的渲染
但我还没有看到任何在WebGPU
ThreeJS
中执行此操作的教程,其他人已经实现了它,但阅读这些源代码并不容易。我很想创建一个完整的PBR指南,并提供适当的理
新缸中之脑
·
2023-09-01 02:01
webgpu
Threejs
里执行对象的多个动画
承接上文,本文讲述如何在
Threejs
里播放对象的多个动画,这也是研究了很久才解决的…一导出模型在Blender里按照File->Export,选择glTF2.0然后在弹框的右上角选择导出为glTFEmbedded
爱就是恒久忍耐
·
2023-09-01 02:27
threejs
前端
three.js 郭隆邦 笔记1
http://www.webgl3d.cn/pages/cd35b2/p3three.js下载官方文件包2023three每个月都会发布新版本
threejs
官方包所有版本:https://github.com
摇摇奶昔x
·
2023-08-31 04:34
three.js
javascript
笔记
前端
Threejs
与Connonjs实现物体碰撞
2023-08-26-20-45-27Documentimport*asTHREEfrom'three';window.THREE=THREEimportgsapfrom"gsap";import*asCANNONfrom'cannon-es'//.../****/letContainerIDDiv=document.querySelector("#ContainerID")letwidth=Co
volodyan
·
2023-08-29 15:47
前端
Threejs
ThreeJS
模型中内嵌文字
之前有过模型中内嵌html网页,地址☞
threeJS
模型中加载html页面_
threejs
加载dom元素_小菜花29的博客-CSDN博客这次是纯粹的在模型中嵌入文本信息,进行简单的文字展示展示效果图1.
小菜花29
·
2023-08-29 13:16
前端
javascript
开发语言
three.js(一):认识three.js并创建第一个3D应用
具体而言,three.js是一款运行在浏览器中的3D引擎,可以用three.js创建各种三维场景,并对其进行编辑;在three.js的官网上看到许多精彩的演示和文档three.js官网:https://
threejs
.org
我在人间贩卖青春
·
2023-08-29 01:43
three.js
javascript
three.js
threejs
特殊几何体(一:文字几何体对象)
threejs
中文字几何体通过newTextGeometry()生成,它被单独作为一个类存在于
threejs
中consttxtGeo=newTextGeometry("
threejs
",{...opts
sleeppingfrog
·
2023-08-27 22:40
threejs
前端
javascript
vue.js
threejs
纹理加载三(视频加载)
threejs
中除了能把图片作为纹理进行几何体贴图以外,还可以把视频作为纹理进行贴图设置。
sleeppingfrog
·
2023-08-24 18:09
threejs
人工智能
threejs
贴图系列(一)canvas贴图
threejs
不仅支持各种texture的导入生成贴图,还可以利用canvas绘制图片作为贴图。这就用到了CanvasTexture,它接受一个canas对象。
sleeppingfrog
·
2023-08-24 13:19
threejs
贴图
threejs
纹理加载(二)
通过
threejs
提供的加载器我们去加载一些贴图作为几何体的纹理,非常方便。
sleeppingfrog
·
2023-08-24 13:18
threejs
前端
javascript
vue.js
threejs
-自定义着色器材质
attributeuniformvarying2.精度限定关键字3.模型转换矩阵二、使用RawShaderMaterial1.顶点着色器向片元着色器传递数据2.着色器变换操作3.让着色器动起来总结前言看了这么久的
threejs
迦南giser
·
2023-08-23 19:12
THREE.JS
前端
着色器
Threejs
学习04——球缓冲几何体环境光以及直线光源
实现随机多个三角形随机位置随机颜色展示效果这是一个非常简单基础的
threejs
的学习应用!本节主要学习的是球面缓冲几何体在环境光合直线光源下的效果,可以学习到环境光和直线光源的生成效果等功能!
maker011
·
2023-08-23 08:10
Threejs
前端知识
学习
数码相机
threejs
Threejs
学习02——使用dat.gui实现主动控制立方体相关操作
使用dat.gui实现主动控制立方体相关操作这是一个非常简单基础的
threejs
的学习应用!
maker011
·
2023-08-23 08:40
前端知识
Threejs
学习
数码相机
threejs
Threejs
学习03——实现随机多个三角形随机位置随机颜色展示效果
实现随机多个三角形随机位置随机颜色展示效果这是一个非常简单基础的
threejs
的学习应用!
maker011
·
2023-08-23 08:40
Threejs
前端知识
学习
数码相机
three
Threejs
学习01——坐标轴展示立方体并实现来回移动
在三维坐标轴上展示立方体并实现来回移动这是一个非常简单基础的
threejs
的学习应用!
maker011
·
2023-08-23 08:39
前端知识
学习
数码相机
Threejs
学习05——球缓冲几何体背景贴图和环境贴图
实现随机多个三角形随机位置随机颜色展示效果这是一个非常简单基础的
threejs
的学习应用!本节主要学习的是球面缓冲几何体的贴图部分,这里有环境贴图以及背景贴图,这样可以有一种身临其境的效果!
maker011
·
2023-08-23 07:34
Threejs
前端知识
学习
贴图
数码相机
threejs
让模型始终面向相机
需求:
threejs
导入3D模型,改变相机位置的同时,让模型始终面向相机。
键盘上行走的猿
·
2023-08-22 11:41
threejs
前端
3d
javascript
vue.js
reactjs
【js&
threeJS
】入门three,并实现3D汽车展示厅,附带全码
首先放个最终效果图:三维(3D)概念:三维(3D)是一个描述物体在三个空间坐标轴上的位置和形态的概念。相比于二维(2D)只有长度和宽度的平面,三维增加了高度或深度这一维度在三维空间中,我们使用三个独立的坐标轴来描述物体的位置。通常使用笛卡尔坐标系,即X、Y和Z轴。其中,X轴表示横向,Y轴表示纵向,Z轴表示纵深或垂直方向。通过在这些轴上的不同值组合,可以确定一个点或对象在三维空间中的位置大家可以th
阿晨12138
·
2023-08-22 08:30
Javascript与ES6~
html5
&&
css3
&&
浏览器
汽车
javascript
前端
vue中的canvas插件
vue中canvas插件有vue-konva、vue-fabricjs、vue-canvas-effect、vue-chartjs和vue-
threejs
等。
忧郁的蛋~
·
2023-08-22 03:53
前端技术
vue.js
前端
javascript
1.用
threejs
创建几何体的步骤
操作流程1.模型操作生成几何体=》生成材质=》混合生成模型生成模型=》添加到场景中2.场景操作生成场景(配置参数)=》模型导入场景3.相机操作生成相机=》添加控制器4.渲染器操作生成渲染器=》场景和相机添加到渲染器中=》简历与canvas的关联5.动画模块动画连续,相机,场景的更新控制codeletwidth=window.innerWidth,height=window.innerHeightc
名刀工一品
·
2023-08-21 21:55
Three.js之几何体、高光材质、渲染器设置、gui
参考资料阵列立方体和相机适配体验
Threejs
常见几何体简介…gui.js库(可视化改变三维场景)知识点注:基于Three.jsv0.155.0长方体:oxGeometry球体:SphereGeometry
开心就是最好
·
2023-08-21 12:17
Web3D
Web3D
threejs
threejs
中FBX格式模型的加载与克隆
废话不多说,直接正题,所需脚本:threer97表示R97版本的
threejs
,这些文件在官方的demo可以找到,此处不介绍。
SheepBoy
·
2023-08-18 06:45
经纬度坐标系转
threejs
空间直角坐标系
在利用
threejs
做一些例如城市模型等3D开发时,会发现
threejs
无法直接支持经纬度坐标,例如城市模型的某个建筑,它在空间直角坐标系中的位置,可以用一个x,y,z表示,但是没法和实际世界中地球坐标系的经度
Erric_Zhang
·
2023-08-17 17:16
2.
threejs
源码阅读——math/matrix
Matrix接口与Vector接口一样,
threejs
也在Matrix3.d.ts文件中提供了一个Matrix接口,并且在Matrix3(3x3矩阵类)和Maxtrix4(4x4矩阵类)中实现了该接口。
吃货传说
·
2023-08-17 06:11
Threejs
入门之十八:GUI调试器的使用
GUI是图形用户界面(GraphicalUserInterface)的简写,为了方便我们在编写代码时对相机、灯光等对象的参数进行实时调节,
Threejs
为我们提供了GUI库,使用它,可以快速创建控制三维场景的
九仞山
·
2023-08-16 07:17
ThreeJS
javascript
html5
前端
3d
threejs
实现水面的效果
实现水波纹的效果:加入几何形状,可以将平台的几何形状constwaterGeometry=newTHREE.PlaneGeometry(10000,10000);引入水的插件,并修改水的材质。import{Water}from'three/addons/objects/Water.js';constwater=newWater(waterGeometry,{textureWidth:512,tex
姚*鸿的博客
·
2023-08-16 07:17
threejs
threejs
threejs
笔记整理
内容参考自Web3D可视化系统课程一、
threejs
基础透视投影相机//30:视场角度,width/height:Canvas画布宽高比,1:近裁截面,3000:远裁截面constcamera=newTHREE.PerspectiveCamera
焦焦焦焦焦
·
2023-08-16 07:17
js
threejs
中gui的使用
dat.gui是一个用于创建交互式调试界面的JavaScript库。下面是dat.gui的基本使用步骤:接下来,在终端中使用以下命令安装gui库(以dat.gui为例):npminstalldat.gui确保安装成功后,在你的JavaScript文件中导入gui库:import*asdatfrom'dat.gui';在你的JavaScript代码中,创建一个dat.gui实例:constgui=n
姚*鸿的博客
·
2023-08-16 07:47
threejs
threejs
第2话 Mesh对象的属性和
threejs
中的两种相机
构建一个"向场景中添加方块"的功能这主要要在dat.GUI中添加按钮以控制场景中各物体对象的属性。第2话functioninit(){varscene=newTHREE.Scene();varcamera=newTHREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000);scene.add(camera);va
seeyoumeet
·
2023-08-16 07:16
Threejs
Web3D从零开始
three.js
webgl
threejs
使用gui改变相机的参数
调节相机远近角度定义相机的配置:constcameraConfg=reactive({fov:45})gui中加入调节fov的方法constgui=newdat.GUI();constcameraFolder=gui.addFolder("相机属性设置");cameraFolder.add(cameraConfg,"fov",0,100).name("修改相机远近").onChange((num)
姚*鸿的博客
·
2023-08-16 07:46
threejs
threejs
threejs
— 12 material
import'../style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";import*asdatfrom'dat.gui'/**debug**/constgui=newdat.GUI()/**Base**///canvasconstcanva
TaiXinF
·
2023-08-16 07:46
webgl
threejs
html
前端
vue.js
npm
ThreeJS
模糊Shader
最近在研究
ThreeJS
,记录一个常用的Shader。
骚猫人战神
·
2023-08-15 19:05
ThreeJS
百度地图的MapVGL 添加自定义模型图层(
ThreeJS
)
研究
ThreeJS
也有段时间了,也能和公司业务相结合,但是涉及到地图层面的业务内容就有点菊紧,因为模型要和地图联动不知道如何实现,也就搁置下来。
骚猫人战神
·
2023-08-15 19:05
ThreeJS
ThreeJS
——在3D地球上标记中国地图板块
Threejs
3D地球标记中国地图位置先看效果用到的库TweenJS(动画库)用来做相机转场的动画Jquery(这里只用到一个each循环方法,可以使用js去写)
ThreeJS
(3D地球制作)100000
Southern Wind
·
2023-08-15 06:34
ThreeJS
3d
前端
javascript
上一页
5
6
7
8
9
10
11
12
下一页
按字母分类:
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
其他