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
THREE实战1_代码重构点、线、面
THREE.JS
的右手坐标系右手大拇指指向X轴,食指指向Y轴,中指指向Z轴。酷!
yma16
·
2024-01-18 03:16
threejs框架
javascript
html
vue3+threejs可视化项目——引入threejs加载钢铁侠模型(第二步)
threejs框架
Three.js
是一个用于在Web浏览器上创建和显示3D
yma16
·
2024-01-18 03:15
threejs框架
vue3
typescript
three
javascript
webgl
three.js
入门
前言:
three.js
是什么?
Three.js
是一个轻量级跨浏览器JavaScript库/API,用于在Web浏览器上创建和显示动画3D计算机图形。
北乎下周
·
2024-01-17 22:13
javascript
开发语言
ecmascript
three.js
一些细节功能的实现
three.js
一些细节功能的实现1.three.js如何实现一键复原的功能说明实现完整demo2.three.js中,如何用一个新的变量复制另一个模型的坐标?是直接等于号赋值吗?
踏过山河,踏过海
·
2024-01-16 22:21
opengl
javascript
开发语言
ecmascript
如何学习
three.js
如何学习
three.js
前言1.基础概念场景(Scene):
three.js
中所有物体的容器。你可以把它想象成一个舞台,在这里添加物体、光源等。相机(Camera):决定了哪部分场景会被渲染。
踏过山河,踏过海
·
2024-01-16 22:21
opengl
学习
javascript
数码相机
Three.js
入门(四)——顶点UV坐标、纹理贴图
创建纹理贴图通过纹理贴图加载器TextureLoader的load()方法加载一张图片可以返回一个纹理对象Texture,纹理对象Texture可以作为模型材质颜色贴图.map属性的值constgeometry=newTHREE.PlaneGeometry(200,100);//纹理贴图加载器TextureLoaderconsttexLoader=newTHREE.TextureLoader();
你的南瓜呀
·
2024-01-16 14:56
知识学习
webgl
前端
【计算机图形学】入门
Three.js
,并搭建你的第一个3D场景
什么是
Three.js
?
samarua
·
2024-01-16 14:52
计算机图形学
webgl
three.js
图形学
3D场景
【
Three.js
】
Three.js
入门教程——清晰明了 好上手!
一、文档地址:中文网址:3.开发和学习环境,引入threejs|
Three.js
中文网二、
Three.js
和WebGL的关系:
Three.js
是WebGL的框架。封装和简化了WebGL的方法。
旺旺大力包
·
2024-01-16 14:22
WebGL
Three.js
webgl
前端
Three.js
基础入门介绍——
Three.js
学习五【让模型沿着轨迹移动】
流程基本流程添加模型增加运动轨迹让模型沿轨迹运动工程文件结构如下图:static:存放静态资源文件three.js-master:为官网下载的代码包,包含所有需要用到的资源包,链接:https://github.com/mrdoob/
three.js
小猪猪哟
·
2024-01-16 14:21
Three.js
前端
Web3D编程入门总结——WebGL与
Three.js
基础介绍
计划分成“webgl与
three.js
基础介绍”、“面向对象的基础3D场景框架编写”、“模型导入与简单3D游戏编写”三个部分,其他零散知识以后有机会再总结。
我爱丁丁猫
·
2024-01-16 14:51
前端
web3d
webgl
three.js
html5
canvas
glsl
Three.js
基础入门介绍——
Three.js
学习六【模型动画】
Three.js
动画系统(Animationsystem)让模型实现动画效果,需要使用Three动画系统,动画系统官方文档链接,这里稍作了修改。
小猪猪哟
·
2024-01-16 14:16
Three.js
前端
WEB 3D技术
three.js
3D贺卡(1) 搭建基本项目环境
好今天我也是在网上学的带着大家一起来做个3D贺卡首先我们要创建一个vue3的项目、先创建一个文件夹装我们的项目终端执行vuecreate项目名称例如我的名字想叫greetingCards就是vuecreategreetingcards因为这个名录里面是全部都小写的然后下面选择vue3然后按下回车等待项目创建完成目录就出来了然后我们编辑器打开新创建的项目这里我们在项目终端执行npminstallth
-耿瑞-
·
2024-01-16 08:55
前端
javascript
3d
WEB 3D技术
three.js
点光源
本文的话我们来设置一下点光源点光源其实最直观的就是可以做萤火虫也可以做星光点点的效果我们可以直接在官网中搜索Pointlight大家可以在官网这里看一下其实SpotLight聚关灯中的属性Pointlight点光源也有的我们先编写代码如下import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/exam
-耿瑞-
·
2024-01-15 04:00
前端
3d
javascript
three.js
使用 tweenjs绘制相机运动动画
效果:代码:直线运动开始圆周运动开始twwenjs库提供了onStart、onUpdate、onComplete等用于控制动画执行的回调函数。onStart:动画开始执行触发onUpdate:动画执行过程中,一直被调用执行onComplete:动画正常执行完触发//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/
汉武大帝·
·
2024-01-14 19:04
three.js
javascript
数码相机
开发语言
three.js
编辑关键帧并解析播放
帧动画:KeyframeTrackKeyframeTrack(name:String,times:Array,values:Array,interpolation:Constant)name: 轨道的名称可以指动画对象中的变形目标(morphtargets)、骨骼(bones)或可能的其他值.times:Float32Array一个Float32Array类型的值,由传入构造器中时间数组参数转化
汉武大帝·
·
2024-01-14 19:34
three.js
javascript
前端
开发语言
three.js
变形动画原理示例
效果:代码:开始//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器import{EffectCompose
汉武大帝·
·
2024-01-14 19:34
three.js
javascript
开发语言
ecmascript
three.js
: tweenjs创建threejs动画
效果:代码开始//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作器import{EffectComposer
汉武大帝·
·
2024-01-14 19:34
three.js
javascript
开发语言
ecmascript
Three.js
(十一)—— 帧动画模块
文章目录11、帧动画模块11.1编辑关键帧并解析播放创建两个用于动画的网格模型编辑关键帧播放关键帧11.2解析外部模型的帧动画关键帧数据播放模型帧动画播放设置11.3播放设置(暂停、时间段、时间点)播放/暂停(.paused属性)播放clip特定时间段定位在某个时间点快进(按钮递增时间点)滚动条拖动播放帧动画11、帧动画模块11.1编辑关键帧并解析播放创建两个用于动画的网格模型/***创建两个网格
summer_du
·
2024-01-14 19:02
Three.js
动画
javascript
前端
three.js
关键帧动画
效果:代码:循环播放播放一次保持播放结束效果结束动画暂停2倍速循环播放控制动画播放特定时间开始(2秒)播放速度播放速度动画播放(拖动任意时间状态)//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"thre
汉武大帝·
·
2024-01-14 19:00
three.js
javascript
vue.js
elementui
【开源分享】3D 照片墙
基于threejs实现的1、功能采用显示3D照片墙,共有4中样式分别如下1.1照片墙1.2水晶球1.3螺旋塔1.4展览厅2、产品特点2.1绚丽采用
Three.js
的3D样式,打破了传统照片墙单调乏味的风格
猿徕如此
·
2024-01-14 19:50
github
经验分享
three.js
讲解
文章目录一、概念二、案例三、常见问题四、优缺点五、相关链接一、概念
three.js
是一个基于WebGL的JavaScript库,用于创建和展示三维图形。
雪梅零落
·
2024-01-14 17:04
HTML/HTML5
javascript
开发语言
ecmascript
three.js
创建三维模型
安装three.jsnpminstallthree--save引入import*asTHREEfrom'three';//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from'three/addons/controls/OrbitControls.js';import{DragControls}from'three/examples/jsm/con
inkbamboo
·
2024-01-14 17:48
【Threejs】代码+图文带你快速上手
个人主页:南木元元在上篇文章中,我们已经介绍了
three.js
,并使用vite搭建了
three.js
的开发环境,实现了第一个3D场景。
南木元元
·
2024-01-14 14:49
#
three.js
three.js
3d
可视化
从
three.js
旋转动画,我了解了requestAnimationFrame
个人主页:南木元元目录
three.js
旋转动画动画前置知识屏幕刷新率与浏览器重绘次数动画是如何形成的实现动画的方式有哪些什么是requestAnimationFramesetTimeout&&setInterval
南木元元
·
2024-01-14 14:49
#
three.js
three.js
前端
动画
2024年了,是该学学
Three.js
了
个人主页:南木元元目录
Three.js
介绍
Three.js
应用场景搭建开发环境初始化项目创建文件配置命令启动服务
Three.js
的一些重要概念第一个3D场景渲染器3D场景的实现1.创建三维场景2.创建透视相机
南木元元
·
2024-01-14 14:18
#
three.js
three.js
可视化
前端
three.js
学习笔记 day1-2
如果没有场景,
Three.js
就无法渲染任何物体。其次,摄相机决定了能够在场景中看到什么,即屏幕上哪些东西需要渲染。最后,渲染器是基于摄相机的角度来计算场景对象在浏览器中会渲染成什么样子,然后调用底
github_czy
·
2024-01-14 01:40
javascript
学习
开发语言
WEB 3D技术
three.js
聚光灯
本文我们来说说点光源和聚光灯点光源就像一个电灯泡一样想四周发散光而聚光灯就像手电筒一样像一个方向射过去距离越远范围越大光越弱我们先来看一个聚光灯的效果我们可以编写代码如下import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js
-耿瑞-
·
2024-01-14 00:34
前端
3d
javascript
WEB 3D技术
three.js
阴影属性
上文WEB3D技术
three.js
光照与阴影我们说了阴影那么我们继续将阴影的属性目前我们的代码import'.
-耿瑞-
·
2024-01-13 18:24
前端
3d
javascript
three.js
加载透明贴图模型不正常显示的问题,渲染透明贴图gltf模型
概述:现在有一个从3dmax导出的gltf模型,贴图方式是透明贴图,想要用
three.js
加载显示出来,但是在gltfViewer中预览时是不支持透明贴图的,不知道是不是模型的问题,从网上查了很多文章,
acoolgiser
·
2024-01-13 11:30
three.js
three.js
透明贴图
gltf
透贴
web3d-three.js场景设计器-sprite广告牌
three.js
使用Sprite精灵实现文字或者图片广告牌1.将文字绘制到Canvas,调整对应宽高。
11eleven
·
2024-01-13 07:12
前端
three.js
javascript
Three.JS
开发指南 –第4章 使用
Three.js
的材质
1.材质的种类材质(Material)结合几何体(Geometry)可以构成网格(Mesh)。材质就是物体的皮肤,决定几何体外表的样子。MeshBasicMaterial(网格基础材质):基础材质,用于赋予几何体一种简单的颜色,或者显示几何体的线框。MeshDepthMaterial(网格深度材质):根据网格到相机的距离,决定如何给网格染色。MeshNormalMaterial(网格法向材质):简
斯特凡1899
·
2024-01-12 17:22
WEB 3D技术
three.js
光照与阴影
本文我们来说灯光与阴影之前我们有接触到光照类的知识但是阴影应该都是第一次接触那么我们先来看光首先是AmbientLight环境光你在官网中搜索AmbientLight官方是就写明了环境光是不会产生阴影的因为它没有反向然后是DirectionalLight平行光它是可以投射阴影的因为它是类似于太阳那太阳照下来自然是有阴影的还有就是PointLight点光源点光源也是可以产生阴影但它是自身为中心四处发
-耿瑞-
·
2024-01-11 13:20
前端
3d
javascript
three.js
实现渐变墙效果(电子围栏)
three.js
实现渐变墙效果(电子围栏)图例步骤两个平面几何体,添加纹理贴图平移纹理贴图代码import{ref,onMounted}from"vue";import*asTHREEfrom"three
是云呀!
·
2024-01-10 23:37
three.js
javascript
前端
vue.js
three.js
实现旋转棱锥效果
three.js
实现旋转棱锥效果图例步骤创建一个四面棱锥添加贴图render函数中旋转,修改高度代码import{ref,onMounted}from"vue";import*asTHREEfrom"three
是云呀!
·
2024-01-10 23:07
three.js
javascript
vue.js
前端
three.js
实现信号波效果
three.js
实现信号波效果图例步骤创建平面,添加贴图,平移几何体缩放代码import{ref,onMounted}from"vue";import*asTHREEfrom"three";import
是云呀!
·
2024-01-10 23:07
three.js
javascript
前端
vue.js
three.js
实现雷达扫描效果(纹理贴图)
three.js
实现雷达扫描效果(纹理贴图)图例步骤创建两个平面,分别纹理贴图,底图模型.add(光波模型)关闭材质的深度测试光波旋转代码import{ref,onMounted}from"vue";import
是云呀!
·
2024-01-10 23:37
three.js
javascript
前端
vue.js
three.js
(三)
文章目录前言坐标辅助器(就是三条xyz轴的线段)轨道控制器物体位移与父子元素欧拉角的旋转设置画布自适应大小监听全屏lil-gui工具的使用纹理贴图(搞懂了!!!)关于找图片的位置打包后找图片的位置纹理贴图(pro)纹理贴图(promax)[等我有了新的理解就在这里补充]环境贴图(没搞懂)光线投影+模型的位置+点击交互不采用constgeometry=newTHREE.SphereGeometry(
踏过山河,踏过海
·
2024-01-10 12:27
opengl
OpenGL
webGl
three.js
如何加入开源项目的翻译工作?【记第一次提PR】
前言这周在找
Three.js
的学习资料的时候发现官网手册的中英文版本不太一样。我就寻思着,反正都是要看文档的,那不如顺手帮忙翻译一下最新的吧,于是就有了这次美妙的经历。
ReBeX
·
2024-01-10 12:54
前端
如何在
three.js
中添加一个button
如何在
three.js
中添加一个button分类说明前言正文说明(心理路程)具体demo实现完整demo(只提供html的部分,js那部分你就直接加在js代码中即可)分类说明因为
three.js
属于WebGL
踏过山河,踏过海
·
2024-01-10 12:50
opengl
javascript
开发语言
ecmascript
three.js
实现扩散光圈效果
three.js
实现扩散光圈效果图例步骤创建一个平面,添加纹理贴图缩放代码import{ref,onMounted}from"vue";import*asTHREEfrom"three";import{
是云呀!
·
2024-01-10 06:44
three.js
javascript
前端
vue.js
Three.js
纹理贴图的实现
在线工具推荐:3D数字孪生场景编辑器-GLTF/GLB材质纹理编辑器-3D模型在线转换-Three.jsAI自动纹理开发包-YOLO虚幻合成数据生成器-三维模型预览图生成器-3D模型语义搜索引擎纹理贴图简介当我们创建一个网格时,比如我们不起眼的立方体,我们传入两个组件:几何体和材质。网格需要两个子组件:几何体和材料constmesh=newMesh(geometry,material);几何形状定
ygtu2018
·
2024-01-10 02:38
贴图
开发语言
three.js
3D纹理贴图
UV映射
3D材质纹理贴图
WEB 3D技术
three.js
线框几何体
本文我们说一下线框几何体想将一个几何体以线框形式展现threeJS中有两种类可以实现第一种WireframeGeometry这种几何体其实就类似于将材质中的wireframe开启这种方法之前我们也用过还有一种就是EdgesGeometry边缘几何体我们先将代码写成这样import'./style.css'import*asTHREEfrom"three";import{OrbitControls}
-耿瑞-
·
2024-01-10 00:04
前端
3d
javascript
three.js
模型 居中
物体不居中模型的几何中心位置不对,设置偏离物体实际几何中心,当设置position(0,0,0)时就会出现偏离。解决方案此处有两种解决方案建模师处理模型,将模型的几何中心移动到(0,0,0)使用代码进行模型强制居中处理//重置几何中心模型居中对group、mesh都可使用letbox=newTHREE.Box3();//box.expandByObject(this.model);box.expa
小和尚敲木头
·
2024-01-10 00:29
前端
javascript
开发语言
ecmascript
Three.JS
游戏开发入门
就在不久前,创建和部署游戏的唯一方法是选择像Unity或Unreal这样的游戏引擎,学习语言,然后打包游戏并将其部署到你选择的平台上。试图通过浏览器向用户提供游戏的想法似乎是一项不可能完成的任务。幸运的是,由于浏览器技术的进步和硬件加速在所有流行的浏览器中都可用,JavaScript性能的改进以及可用处理能力的稳步提高,为浏览器创建交互式游戏体验变得越来越普遍。在本文中,我们将了解如何使用Thre
新缸中之脑
·
2024-01-09 08:35
元宇宙
javascript
前端
开发语言
元宇宙基础-
Three.js
| 大帅老猿threejs特训营
day01作业打卡WebGL简介WebGL(全写WebGraphicsLibrary)是一种3D绘图协议,这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起,通过增加OpenGLES2.0的一个JavaScript绑定,WebGL可以为HTML5Canvas提供硬件3D加速渲染,这样在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。WebGL使用需要
qq_37787249
·
2024-01-09 08:03
javascript
开发语言
ecmascript
WEB 3D技术
three.js
多元素包围盒
本文我们说多个物体的包围盒我们先编写如下代码import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";constscene=newTHREE.Scene();constsphere1=newTHREE.Mesh(newTHR
-耿瑞-
·
2024-01-08 15:02
前端
3d
javascript
WEB 3D技术
three.js
解决几何体移动后 包围盒还留在原地问题
我们最基础方式创建的包围盒然后通过position改变物体的位置例如这里我们改它的x轴会发现我们几何体移动了但是包围盒确留在了原地我们可以通过updateMatrixWorld和applyMatrix4的世界坐标更新举证解决简单说Mesh出来的实例对象.updateMatrixWorld两个参数都为true几何体对象的boundingBox字段值.applyMatrix4参数Mesh出来的实例对象
-耿瑞-
·
2024-01-08 15:02
3d
WEB 3D技术
three.js
元素居中与获取元素中心点
本文我们来说让物体居中以及获取它的中心点我们上文留下的这个代码import'./style.css'import*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{RGBELoader}from"three/examples/jsm/loaders/RG
-耿瑞-
·
2024-01-08 15:58
前端
3d
javascript
three.js
学习笔记(学习中1.7更新) |
文章目录
three.js
学习笔记入门基础概念透视相机第一个
three.js
应用threejs画布尺寸和布局canvas画布宽高度动态变化坐标辅助器THREE.AxesHelper实现动画效果requestAnimationFrame
nuise_
·
2024-01-08 11:51
图形学
javascript
学习
笔记
Three.js
简介;
Three.js
使用与作品生成
一、
Three.js
简介1、简介:
three.js
,一个WebGL引擎,基于JavaScript,可直接运行GPU驱动游戏与图形驱动应用于浏览器。其库提供的特性与API以绘制3D场景于浏览器。
啊~哈
·
2024-01-08 01:16
javascript
开发语言
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
其他