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
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
three.js相关
github:https://github.com/mrdoob/three.js教程:https://discover
threejs
.com/zh/book/first-steps/比较好的校园场景参考
wwmin_
·
2023-08-15 03:59
threejs
纹理的使用
实现地板的效果,需要导入3张图片,第一种样式,第二种,木板间的间隙,第三种,木板的粗细图片。先注册一个物体属性,在物体属性上加上图片,注册代码如下图:constfloorMat=newTHREE.MeshStandardMaterial({roughness:0.8,color:0xffffff,metalness:0.2,bumpScale:0.0005});样式的图片,图片:图片导入的代码:c
姚*鸿的博客
·
2023-08-14 23:06
threejs
threejs
threejs
实现模型gltf的动画效果
确保加载模型后模型有animations属性。加载完模型后,在模型中定义mixer的变量值。//4、加入加载器constloader=newGLTFLoader();loader.load("./model/gltf/RobotExpressive/RobotExpressive.glb",function(gltf){//赋值动画给mixermixer=newTHREE.AnimationMix
姚*鸿的博客
·
2023-08-14 23:06
threejs
threejs
threejs
中gltf模型出现的问题(黑色,颜色不协调,太小)和解决方案
模型一片漆黑如下图可能原因,没有灯光,加下以下代码://4、加入灯光constlightness=newTHREE.HemisphereLight(0xffffff,0x444444);lightness.position.set(0,20,0);scene.add(lightness);constshadowLight=newTHREE.DirectionalLight(0xffffff);sh
姚*鸿的博客
·
2023-08-14 23:04
threejs
threejs
threejs
入门使用
场景(Scene)import*asTHREEfrom"three";constscene=newTHREE.Scene();相机(Camera)constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000,);//3、设计相机的位置camera.position.set(0,0,10
姚*鸿的博客
·
2023-08-13 15:02
threejs
threejs
threejs
点击模型实现模型边缘高亮的选中效果--更改后提高帧率
先来个效果图之前写的那个稍微有点问题,帧率只有30,参照官方代码修改后,帧率可以达到50了,在不全屏的状态下,帧率601.首先需要导入库//用于模型边缘高亮import{EffectComposer}from"three/examples/jsm/postprocessing/EffectComposer.js"import{RenderPass}from"three/examples/jsm/p
霍志杰
·
2023-08-12 00:29
javascript
mapbox结合
threeJS
载入3d模型,并实现点击事件
https://www.jianshu.com/p/ae8f9b338f80地址参考代码如下:MapboxTHREE.jsraycastertestbody{margin:0;padding:0;}html,body,#map{height:100%;}constblankStyle={version:8,name:'BlankMap',sources:{},layers:[{id:'backgr
cwr888
·
2023-08-10 20:31
3d
mapboxgl
一个关于image访问图片跨域的问题
一、背景项目中遇到一个问题,同一个图片在dom节点中使用了标签来加载,同时由于项目使用了
ThreeJS
3D渲染引擎,在加载纹理时使用了TextureLoader来加载了同一张图片,而由于图片是在阿里云服务器上的
仰简
·
2023-08-09 12:53
threejs
遇到的坑
在js里面使用图片,我不可以直接写相对/绝对路径的正确写法importimgfrom"./Earth.png";如果想使用顶点进行着色的话、必须开启才可以letmaterial=newTHREE.PointsMaterial({vertexColors:true,//是否启用顶点着色,默认falsesize:4,});
china-yun
·
2023-08-09 03:21
json
threejs
模型点击选中
threejs
模型点击选中/***射线投射器`Raycaster`的射线拾取选中网格模型对象函数choose()*选中的网格模型变为半透明效果****/functionchoose(event){varSx
china-yun
·
2023-08-09 03:51
json
threejs
保存图片并且下载
functionsaveFile(){//创建一个超链接元素,用来下载保存数据的文件varlink=document.createElement('a');//通过超链接herf属性,设置要保存到文件中的数据varcanvas=renderer.domElement;//获取canvas对象link.href=canvas.toDataURL("image/png");link.download=
china-yun
·
2023-08-09 03:51
javascript
开发语言
ecmascript
3.
threejs
源码阅读——math/euler
欧拉旋转、四元数旋转和矩阵旋转把Euler和Quaternion放在一起是因为他们都是跟旋转相关的类(虽然Matrix也可以做旋转,不过这里我们还是把欧拉和四元数单独拿出来说)首先来回顾一下欧拉角和四元数的几个区别,这里不做详细展开,有兴趣的同学可以自己查查额外的资料:欧拉旋转定义了沿XYZ轴的三个旋转角度(逆时针方向),用到了3个值,且必须用一个额外的值规定旋转顺序。四元数旋转由一个旋转轴(一个
吃货传说
·
2023-08-09 02:19
基于
Threejs
的jQuery 3d图片旋转木马特效插件
这是一款基于
ThreeJS
的炫酷3D旋转木马图片画廊特效插件。该旋转木马特效可以设置图片预加载,带有前后导航按钮,可以使用鼠标前后旋转,并可以设置3D透视的位置。
souhugirl
·
2023-08-07 02:14
插件库
旋转木马
图片画廊
3d
jquery
JS_three.js禁用拖拽和缩放
false;//todisablerotationcontrols.enableRotate=false;//todisablepancontrols.enablePan=false;点光文档https://
threejs
.org
小歪 | 前端
·
2023-08-05 21:18
#
UNI-APP
#
JS
javascript
[
threejs
]相机与坐标
搞清相机和坐标的关系在
threejs
初期很重要,否则有可能会出现写了代码,运行时一片漆黑的现象,这种情况就有可能是因为你相机没弄对。
bugs_more_more
·
2023-08-03 06:41
threejs
threejs
修改
Threejs
里的OrbitControls右键上下移动控制视图上下移动
在原生的OrbitControls里,右键上下移动,结果是视图放大缩小,这样的结果不是我的需求。应该是右键上下移动,视图也上下移动。那么怎么修改呢?如下:修改一下panUp的方法即可,注释的部分是原来的代码。varpanUp=function(){varv=newTHREE.Vector3();returnfunctionpanUp(distance,objectMatrix){//if(scop
Naive》
·
2023-08-02 18:49
three.js
threejs
的渲染顺序
threejs
的渲染顺序有时候会对场景成像效果产生严重的影响。这一切的源头都来自于opengl的一种深度优化的工作原理。opengl会对需要渲染的对象做深度探测,也就是所谓的depthTest。
Naive》
·
2023-08-02 18:19
three.js
ThreeJs
学习之旅(十三)—Galaxy Generator(银河系建立)
颜色(Color)表示一个颜色。.lerp(color:Color,alpha:Float):Colorcolor-用于收敛的颜色。alpha-介于0到1的数字。将该颜色的RGB值线性插值到传入参数的RGB值。alpha参数可以被认为是两种颜色之间的比例值,其中0是当前颜色和1.0是第一个参数的颜色。银河系效果:银河系代码:import"./style.css";import*asTHREEfro
Florenza
·
2023-08-02 18:18
ThreeJs
学习
上一页
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
其他