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相关
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
学习
第二课
threejs
模型场景控制器
##>背景:创建出
threejs
3D场景后如何使用鼠标操作场景内模型元素?,如拖动,放大缩小,平移,点击触发交互等。。。
小豆包3D世界
·
2023-08-02 18:01
three.js实现vr全景图
方法:可以利用
Threejs
中的立方体或者球体实现全景图功能,把立方体或球体当成天空盒子,将无缝衔接的图片贴上,看起来就像在一个场景中,相机一般放置在中央。
拾荒旧痕
·
2023-08-02 12:49
javascript
vr
开发语言
threejs
移动摄像机围绕场景中心绕圆圈
基本原理就是计算摄像机在所围绕的圆上的坐标,这里坐标实际上是计算x和z轴的坐标。因为y轴是观测高度才使用的。绕圈实际上是x和z轴上的坐标在变化。效果图(不会截gif图,弄了个静图)正方形和圆都在旋转,所以正方形距离平板有一定高度,不然的话一旋转,就到平板下面去了。计算正方形距离地面的高度公式为Math.sqrt(5*5+5*5)/2,边长为4,线条为1,即为5。根据勾股定理a*a+b*b=c*c,
WormJan
·
2023-08-02 02:24
javascript
开发语言
Three.js之创建3D场景
参考资料【G】Three.js官方文档:https://
threejs
.org/docs/Three.js是一个流行的WebGL库,官方文档提供了详细的API参考和示例,适合学习和参考。
开心就是最好
·
2023-07-31 17:28
Web3D
weh3d
threejs
3.第一章3小节 场景动画
以下文章即Learn
Threejs
第三版英文翻译学习记录,可以到正版书店购买对应书籍。如果你想在场景种功能使用动画,那第一件要做的事情就是先找到绘制场景的时间间隔(就是已特定的周期渲染场景)。
我的名字好长好长灬
·
2023-07-30 02:21
【R3F】07. 场景设置
camera设置属性值是按照
threejs
的属性值设置,r3f中,直接在canvas节点设置camera属性即可修改相机position可以通过useFrame返回的对象集,获取camera对象,然后修改对应的属性值
seelingzheng
·
2023-07-29 02:07
Threejs
react
three.js
javascript
着色器
前端
【R3F】06.自定义Geometry
自定义Geometry创建vertex,同在
threejs
中方式一样,这里是随机生成一些点位信息,创建10个三角面使用useMemo,因为创位置信息只需要有一次就可以了constvarticesCount
seelingzheng
·
2023-07-29 02:37
Threejs
前端
javascript
react.js
Threejs
——十四、关于深度冲突、重叠、以及加载模型进度条效果实现(附完整代码)
深度冲突两个模型重叠的模型,通过浏览器旋转预览,会发现模型旋转的时候会发生闪烁。这种情况,主要是两个模型重合,电脑分不清谁在前谁在后,这种情况,可以理解为深度冲突Z-fighting。functionaddBox(){constgeometry=newTHREE.BoxGeometry(10,10,10);//材质constmaterial=newTHREE.MeshPhysicalMateria
Southern Wind
·
2023-07-28 21:57
Vue3
ThreeJS
javascript
前端
3d
three.js入门一:入门demo讲解
环境:
threejs
:129(在浏览器的控制台下输入:window.
jackletter
·
2023-07-28 04:16
javascript
javascript
前端
three.js
webgl
常用三维坐标系
二、
Threejs
和OpenGL右手坐标系参考:https://zhuanlan.z
jackletter
·
2023-07-28 04:16
其他
坐标系
三维
threejs
unreal
unity3d
three.js入门二:相机的zoom参数
环境:
threejs
:129(在浏览器的控制台下输入:window.
jackletter
·
2023-07-28 04:45
javascript
javascript
threejs
相机
zoom
gitee page发布的静态网站,无法播放目录中的mp4视频
但是试了多几次mp4均提示404,资源无法获取;找了很多方案,最后发现将视频转为ogv就可以完美适配了;mp4转ogv附
threejs
使用ogv进行环境贴图的代码://视频纹理constvideo=document.createElement
Li_Ning21
·
2023-07-27 18:52
gitee
音视频
html渲染3d模型图 成功案例
thress.js文档:https://www.techbrood.com/
threejs
/docs/html代码:Titlebody{overflow:hidden;margin:0;}varurl=
静_c540
·
2023-07-24 22:56
制作超好看的个人网站:用
ThreeJs
为你的网站打造个性的动画背景
目录一、示例二、教程1.第一步,写一个顶点着色器2.在ShaderToy上选一个自己喜欢的Shader3.添加有关变量4.将源代码改写成GLSL语言4.把材质添加在写好的
threejs
框架中一、示例先上图
糯米_chobits
·
2023-07-24 13:01
ShaderToy
ThreeJs
个人博客搭建
个性网站
Three.js分享
说一下我的理解,说到
Threejs
就不得不提到webGL,说到webGL就不得不提到openGLOpenGL:用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口(API)。
桃子Jerry
·
2023-07-24 13:01
前端
threejs
js
three.js
前端
webgl
threeJS
使用OutlinePass场景会变暗(颜色不对)
问题描述在使用OutlinePass发现场景变得很暗。this.composer=newEffectComposer(this.renderer);constrenderPass=newRenderPass(this.scene,this.camera);this.composer.addPass(renderPass);//constgammaCorrectionShader=newShader
喵喵虫
·
2023-07-23 19:00
Vue3
threeJS
webgl
vue.js
前端
ThreeJS
打造自己的人物
hello,大家好,我是better,今天为大家分享如何使用Three打造属于自己的3D人物模型。人物建模当下有很多人物建模的网站,这里给大家分享的ReadyPlayerMe-CreateaFull-Body3DAvatarFromaPhoto前往这个网址,设计出自己的一个3D人物模型。下面是我自己设计的人物,先分享给大家看看,是不是很想设计自己的人物那么下面外面开始吧建模过程选择性别首先进入网站
LKG-工
·
2023-07-23 16:12
前端
WebGL探索——抉择:实践方向(twgl.js、Filament、Claygl、BabylonJS、
ThreeJS
、LayaboxJS、SceneJS、ThinkJS、ThingJS)
WebGL探索——抉择:实践方向,twgl.js、Filament、Claygl、BabylonJS、
ThreeJS
、LayaboxJS、SceneJS、ThinkJS、ThingJS跨出第一步新的改变常见应用
iZaix
·
2023-07-20 12:37
BabylonJS
webgl
three.js学习记录(基础)
一直以来都对three.js充满向往,终于偷闲找了个借口学了起来参考资料Three.js–JavaScript3DLibraryhttps://
threejs
.org/Three.js中文网提供Three.js
渣渣灰飞
·
2023-07-20 11:40
javascript
学习
前端
three.js
Vue3+
threejs
环境搭建(遇到左键旋转无效)
最近学习
threejs
使用vue3框架搭建环境:npmithreeimport*asTHREEfrom"three"//直接引入使用在引入OrbitControls控制发现在vue3有个问题有点坑,之前旧项目的
Nithumahel
·
2023-07-20 01:17
前端
前端
javascript
html
threejs
学习
1.实现场景中调整对象位置功能先看效果核心方法使用【TransformControls】控件import{TransformControls}from"three/examples/jsm/controls/TransformControls";varcontrol2......//拖拽控件对象control2=newTransformControls(camera,renderer.domEle
Destiny辰
·
2023-07-19 07:48
学习
threejs
threejs
实例之十:汽车模型展览
{{item.name}}{{item.name}}import{ref}from'vue'import*asTHREEfrom"three"import{OrbitControls}from"three/examples/jsm/controls/OrbitControls"import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader"
sleeppingfrog
·
2023-07-17 19:29
threejs
javascript
前端
开发语言
threejs
基础案例之四:点光源,移动光源旋转的小球
import*asTHREEfrom"three"import{OrbitControls}from"three/examples/jsm/controls/OrbitControls"importDatfrom"dat.gui"import{ref}from'vue'//场景constscene=newTHREE.Scene()//相机constcamara=newTHREE.Perspecti
sleeppingfrog
·
2023-07-17 19:28
threejs
javascript
前端
vue.js
threejs
基础案例之十:模拟点击事件
注意点击时控制台的打印
threejs
最后渲染的时候是以canvas形式进行渲染的。所以在界面中如何实现点击事件实际上成了如何在canvas中如何进行点击事件。但其实这只是其一。
sleeppingfrog
·
2023-07-17 19:28
threejs
前端
javascript
html5
threejs
加载 FBX 模型
threejs
版本148.0加载FBX格式的模型无法自动加载模型自带的贴图(贴图和模型是一个文件,又分开的形式)问题一、第一次加载出来没有模型原因Mesh在children中场景中添加下网格模型mesh
小和尚敲木头
·
2023-07-16 20:33
前端
贴图
threejs
cancelAnimationFrame失效问题
在调试
threejs
时为了让模型自动旋转使用了requestAnimationFrame方法(官网文档),但是在使用cancelAnimationFrame取消时出现了问题。
小和尚敲木头
·
2023-07-16 20:33
前端
javascript
前端
vue.js
three js 做小地图
image.png做个最简单的minimap,这就是游戏中常用的小地图,研究了一圈,原来发现居然还有几个小坑,这里分享一下,希望对碰到这个问题的朋友有帮助image.png最初在试用的时候一切正常我们先引入
threejs
x1911
·
2023-07-16 14:14
THREE.Object3D.add: object not an instance of THREE.Object3D.
threejs
运行项目的时候报错原因是object3D.add(cube_1)cube_1并不是一个Object3D类型的应该THREE.Mesh一下之后在加到object里边不会报错
希望下次能记住
·
2023-07-16 09:46
探索三维世界【4】:Three.js & dat.gui & gsap 的使用
在游览
threejs
的官方文档
Modify_QmQ
·
2023-07-14 22:42
#
Three.js
javascript
前端
threejs
dat.gui
gsap
Three.js 实战【1】—— 3D全景视图开发
——高范围动态图像加载器4、HDR——高动态范围图像5、使用HDR实现3D全景视图6、直接通过图片纹理进行实现摘要在现代开发过程当中,3D开发是越来越不可或缺的一部门,在前面的文章当中简单的说明了一些
threeJs
Modify_QmQ
·
2023-07-14 22:42
#
Three.js
3d
threejs
3D视图
ThreeJS
控制相机上下,左右,旋转
import{Vector3}from"three";classRoamUtil{constructor(camera,viewcontrols,domElement){this.viewcontrols=viewcontrols;this.camera=camera;this.domElement=domElement!==undefined?domElement:document;this.m
rib-pet
·
2023-07-14 08:38
three
js
Javascript
ThreeJs
酷炫的发光特效
分享一个酷炫的发光特效效果,可见在线案例。效果组成该特效可以分成六个组成部分,一个转动的熔浆球体,一层透明气场,外发光,飞线聚集特效,内部发光,蓝色耀斑。熔浆球体和透明气场岩浆球体和透明气场是用几何球体实现,通过纹理移动(UV动画)来表达流动的岩浆和浮动的气场。constloader=newTHREE.TextureLoader();constmap=loader.load("texture.pn
sky.....
·
2023-06-23 05:51
threejs
threejs
上一页
6
7
8
9
10
11
12
13
下一页
按字母分类:
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
其他