threeJs 第4页

Threejs用官方提供的编辑器做一个简单的模型

Threejs有提供一个web端的编辑器制作3D模型，地址是https://threejs.org/editor/，这个打开就可以在线编辑，但是因为比较简陋，所以只能做一些简单的模型用于测试，实际开发中还是用

baker_zhuang·2023-11-27 17:45

threejs编辑器(3D场景编辑器)

好久没写博客了。今年似乎有点贪玩。买了吃灰四件套，滑板，吉他，运动相机，以及大疆无人机air2s。所以一直在玩。。。哎，虽然我一直想减肥，但奈何猪厂的伙食是真得太好了。因此就买了这些小玩意儿，希望自己多多走走动动。当然，初衷也不止于此。年初(2022)的时候，缘由某些事情，让我常常问自己，活着的意义是什么？如果人生只有生存，而没有生活，那真的是太无趣了。因此我也想抽出一点时间去感受一下，曾经丢失的

跃焱邵隼·2023-11-27 17:13

threejs + mapboxgl 实现炫酷动态立体墙效果

前言今天实现一个三维电子围栏效果；本例子是基于前面文章搭建的私库进行开发。在三维渲染中，有可能会遇到需要在地图上展示一个围栏效果，来展示一个区域的与众不同，或者；在预警方面常用到电子围栏来进行监控人员；本文也是借鉴maptalks中的立体墙的效果来实现的。之前在Cesium也实现过类似的效果，可以查看这个视频接下来我们实现一个动态立体墙的效果；围栏图层开发新建一个RippleWall图层，代码如下

jiegiser#·2023-11-26 07:04

WebGL/threeJS面试题扫描与总结

什么是WebGL？什么是Three.js？请解释three.js中的WebGL和Canvas的区别？WebGL(全写WebGraphicsLibrary)是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借

xyphf_和派孔明·2023-11-25 22:17

Threejs_12 物体阴影的实现

所以在Threejs的画布世界之中，一个物体有自己的影子呢？

Web阿成·2023-11-24 08:53

Threejs_13 聚光灯和点光源的使用

聚光灯就如同手电筒一样，点光源就如同一个电灯泡甚至是萤火虫那样。如何使用他们呢？我们还是一样，先做一个小球和一个平面，用来展示光线。并且加入基本的环境光。//做一个球体constSphereGeometry=newTHREE.SphereGeometry(1,20,20);//材质constmaterial=newTHREE.MeshStandardMaterial();constsphere=n

Web阿成·2023-11-24 08:53

Threejs_11 补间动画的实现

其实就是我们在threejs中移动一个物体的时候，不让他是瞬时移动，让他跟css动画的transition一样，有个过度效果，就是补间动画。补间动画如何设置呢？

Web阿成·2023-11-24 08:23

Threejs_06 多材质的实现

Threejs同一个几何体如何实现多材质呢？

Web阿成·2023-11-24 01:03

Three.js教程：透视投影相机

其他系列工具：NSDT简石数字孪生Threejs如果想把三维场景Scene渲染到web网页上，还需要定义一个虚拟相机Camera，就像你生活中想获得一张照片，需要一台用来拍照的相机。

ygtu2018·2023-11-21 23:59

Threejs 源码解析（WebGLState.js）重要

解释有什么问题，说一下，不喜勿喷，转载请注明：七岁https://blog.csdn.net/qq_25909453/article/details/82704620/***@authormrdoob/http://mrdoob.com/*/import{NotEqualDepth,GreaterDepth,GreaterEqualDepth,EqualDepth,LessEqualDepth,L

那年我七岁·2023-11-21 10:36

Threejs之后处理EffectComposer

参考资料后处理(发光描边OutlinePass)…抗锯齿后处理知识点注：基于Three.jsv0.155.0后处理(发光描边OutlinePass)：EffectComposer、RenderPass、OutlinePassOutlinePass描边样式：visibleEdgeColoredgeThicknessedgeStrengthpulsePeriodBloom发光通道：UnrealBloo

开心就是最好·2023-11-19 18:56

Threejs之射线拾取模型

参考资料射线Ray…射线拾取Sprite控制场景知识点注：基于Three.jsv0.155.0射线RayRaycaster(射线拾取模型)屏幕坐标转标准设备坐标Raycaster(鼠标点击选中模型)Canvas尺寸变化(射线坐标计算)射线拾取层级模型(模型描边)射线拾取Sprite控制场景代码实现Three.js{"imports":{"three":"./js/three.module.js",

开心就是最好·2023-11-19 18:21

ThreeJS教程源码大全之如何将 3D Blender 对象作为 glTF 文件导入 Three.js 项目

项目运行效果如何将3DBlender对象作为glTF文件导入Three.js项目如何将3DBlender对象作为glTF文件导入Three.js项目实战需求如果您使用Three.js编写3D可视化，迟早您会想要超越使用库的基本原生形状，并开始使用包裹在UV贴图材质中的复杂自定义3D对象。Blender是一款出色的免费开源软件，用于创建精美的3D对象。由于Three.js放弃了对其Blender导出

iCloudEnd·2023-11-19 06:35

threejs、TWEEN、光晕效果的简单使用

依赖npmithree引包import*asTHREEfrom'three'import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'import{OBJLoader}from'three/examples/jsm/loaders/OBJLoader.js'import{FBXLoader}from'three/e

且白·2023-11-17 11:54

Three.js的着色器材质(ShaderMaterial)

ShaderMaterial简介：http://www.webgl3d.cn/threejs/docs/index.html#api/zh/materials/ShaderMaterialThree.js

GIS技术杂谈·2023-11-16 12:24

着色器应用-以threejs为例

准备内置变量threejs中的变量含义uv纹理坐标值gl_Position裁剪坐标值position模型坐标系

迦南giser·2023-11-16 12:23

threejs 着色器修改内置材质

想要修改内置材质需要在编译shader程序之前执行修改操作,我们用到material下的onBeforeCompile创建材质我们先将shader打印出来看下都有哪些内容,可以看到顶点着色器有以下内容接着去threejs

榴莲不好吃·2023-11-16 12:22

threejs(13)-着色器设置点材质

着色器材质内置变量three.js着色器的内置变量，分别是gl_PointSize：在点渲染模式中，控制方形点区域渲染像素大小（注意这里是像素大小，而不是three.js单位，因此在移动相机是，所看到该点在屏幕中的大小不变）gl_Position：控制顶点选完的位置gl_FragColor：片元的RGB颜色值gl_FragCoord：片元的坐标，同样是以像素为单位gl_PointCoord：在点渲

拾荒李·2023-11-16 12:49

threejs (四) 纹理 Texture

定义：纹理图片（或canvas/video等）映射到物体表面，或者作为反射、折射贴图，也就是物体的皮肤。1、纹理贴图分类map：颜色贴图，存储颜色信息bumpMap：凹凸贴图，性能贴图，也称为高度贴图，性能开销比较大，会移动表面纹理的可见区域，从而实现表面遮挡效果mormalMap：法线贴图，通过RGB三个分量分别表示向量的xyz三个方向，并且通过图片保留几何体表面的几何细节aoMap：环境贴图，

小程很努力·2023-11-16 09:06

ThreeJs中颜色渲染问题

ThreeJs中颜色渲染问题问题描述前言色彩空间ThreeJS色彩空间转换注意点在使用threejs构建模型场景时，经常感觉场景中模型的颜色与建模工具中看到的不太一样，而且不管怎么调灯光还是模型颜色效果还是不太理想

花海海·2023-11-15 18:02

cesium three性能比较_一步步带你实现web全景看房——three.js

下面我们从0开始来摸索一下3d世界1.基本概念在THREEjs中，渲染一个3d世界的必要因素是场景(scene)、相机(camera)、渲染器(renderer)。

weixin_39926639·2023-11-15 04:52

cesium版本之间如何兼容_【JS】cesium与three.js 结合的栗子，结合了一下网友们的栗子，解决了three.js 高版本模型出不来的问题...

”width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no”>Tools-12CesiumThreejsvarthree

赤衿·2023-11-15 04:52

01.Cesium和Three.js的初步认识

一、Threejs和Cesium的对比相同点：都是基于WebGL技术开发的Javascript库，用于在浏览器中创建和显示动画3D计算机图形。

杨航斌·2023-11-15 04:52

Cesium和Three.js的初步认识

一、Threejs和Cesium的对比相同点：都是基于WebGL技术开发的Javascript库，用于在浏览器中创建和显示动画3D计算机图形。

小道士写程序·2023-11-15 04:15

threejs太阳系（源码加相关素材）

目录前言效果预览图完整代码html部分js部分模块aa前言Three.js是一款基于原生WebGL封装通用Web3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域基本上都有three.js的身影。本篇文章简单的使用three.js写了一个太阳系，代码比较繁琐，感兴趣的可以下载源码优化一下。效果预览图完整代码html部分太阳系*{margin:0;p

小姚学前端·2023-11-14 10:10

threejs (三) 几何体

定义：用来表示物体的形状，可以定义物体的大小，可以被缩放、旋转和平移内置几何体：二维几何体：PlaneGeometry矩形平面、CircleGeometry圆形平面、RingGeometry环形平面、ShapeGeometry二维图形三维几何体：BoxGeometry立方体、TetrahedronGeometry多面体、SphereGeometry球体、ConeGeometry圆锥、Cylinde

小程很努力·2023-11-13 21:53

threejs(11)-精通着色器编程（难点）2

一、shader着色器编写高级图案小日本国旗precisionlowpfloat;varyingvec2vUv;floatstrength=step(0.5,distance(vUv,vec2(0.5))+0.25);gl_FragColor=vec4(strength,strength,strength,strength);绘制圆precisionlowpfloat;varyingvec2vUv

拾荒李·2023-11-13 04:06

threejs(12)-着色器打造烟雾水云效果

一、自己封装水波纹效果src/main/main01.jsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";importgsapfrom"gsap";import*asdatfrom"dat.gui";importvertexShaderfrom"../sha

拾荒李·2023-11-13 04:36

threejs(11)-shader着色器打造漫天飞舞孔明灯

src/main/main.jsimport*asTHREEfrom"three";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";importgsapfrom"gsap";//动画库importvertexShaderfrom"../shaders/flylight/vertex.glsl";//顶点着色器

拾荒李·2023-11-13 04:01

Three.js——基于原生WebGL封装运行的三维引擎

既然Threejs是一款WebGL三维引擎，那么它可以用来做什么想必你一定很关心。所以接下来内容会展示大量基于Threejs引擎或Threejs类似引擎开发的Web3D应用，以便

骆骆爱学习·2023-11-12 22:00

ThreeJs基础常识

作者：桑榆QQ：934440653有问题，评论留言，或qq联系前两章的尚未整理，后续整理完成，会补上。第一章场景待更新…第二章相机待更新…第三章渲染器1.参数**名称****描述**antialiasBoolean，默认为false。是否开启反锯齿。precision这个材质使用从摄像机到网格的距离来决定如何给网格上色。alphaBoolean，默认为false。是否可以设置背景色透明。premu

桑榆未晚_·2023-11-11 21:53

vue项目中使用ThreeJs加载外部的obj模型文件

1、安装three以及依赖npminstallthreenpminstallthree-orbitcontrolsnpminstallthree-obj-mtl-loader2、实现代码import*asThreefrom'three'importOrbitControlsfrom'three-orbitcontrols'import{OBJLoader}from'three-obj-mtl-lo

北辰//·2023-11-11 15:23

vue+threejs加载展示3d模型文件注意事项

前几天了解到了threejs这个库，一时间惊为天人，因为想做一个展示3d零件模型的demo，就尝试了一下，在此记录一下踩的坑首先，一定要看文档！

txlfreedom·2023-11-11 15:19

浅谈 WebVR 全景

本文将会简单探究WebVR全景的实现原理，同时也会用threejs实现两个小的demo，希望对大家以后在业务上遇到类似的场景能有所帮助。

徐小夕@趣谈前端·2023-11-11 08:15

WebGL-Vue3-TS-Threejs：基础练习 / Javascript 3D library / demo

一、理解Three.jsThree.js是一个用于WebGL渲染的JavaScript库。它提供了一组工具和类，用于创建和渲染3D图形和动画。简单理解（并不十分准确），Three.js之于WebGL，好比，jQuery.js之于JavaScript。OpenGL是一个跨平台3D/2D的绘图标准，WebGL则是OpenGL在浏览器上的一个实现。web前端开发人员可以直接用WebGL接口进行编程，但W

snowball_li·2023-11-11 08:15

threejs光源的使用

灯光是场景中非常重要的一部份，没有光源线框材质都不可见（除非使用基础材质），threejs包含大量的光源，每个光源都有特别的行为和用法，本次我们来探讨不同光源的用法。

小辛学java·2023-11-11 02:05

【 Threejs 】- Shader 着色器实例渲染教程

着色器在threejs中是一个难点，话不多说，先来看看着色器是什么？如果您已经有使用计算机绘图的经验，您就会知道在这个过程中您先画一个圆，然后画一个矩形、一条线、一些三角形，直到您组成您想要的图像。

蚂蚁二娘·2023-11-09 20:57

Threejs教程之着色器

Three.js着色器Three.js视频教程很多时候如果想写一些特效，往往需要编写着色器代码GLSL，如果你不熟悉着色器语言，自然需要学习着色器语言语法，如果你有着色器语言基础，直接使用Threejs

郭隆邦技术博客·2023-11-09 20:56

threejs -内置着色器包的使用详解

threejs提供了丰富的着色器包，搭配后处理通道使用，可以实现非常强大的效果。

凌风子夜·2023-11-09 20:26

threejs中的着色器入门一

什么是着色器？固定渲染管线：——标准的几何&光照(T&L)管线，功能是固定的，它控制着世界、视、投影变换及固定光照控制和纹理混合。T&L管线可以被渲染状态控制，矩阵，光照和采制参数。如果有了固定渲染管线，编写程序就比较容易了，因为所有的变换都是由固定渲染管线来完成的，但是缺点就是自由度低。固定渲染管线只能完成一些最基本的操作，如果想要做一些特殊的处理，就比较麻烦了。可编辑渲染管线：——WebGL中

凌风子夜·2023-11-09 20:26

threejs(11)-精通着色器编程（难点）1

一、初识着色器语言GLSL代表openGLShadingLanguage，它是着色器程序的特定标准，您将在接下来的章节中看到。根据硬件和操作系统，还有其他类型的着色器。在这里，我们将使用由KhronosGroup监管的openGL规范。了解OpenGL的历史有助于理解其大部分奇怪的约定，为此我建议您查看：https://openglbook.com/chapter-0-preface-what-i

拾荒李·2023-11-09 20:53

ThreeJS中导入的模型没有正常生成阴影解决办法

1.背景问题描述在一个Three.js项目中，我试图在场景中渲染一个导入的滑板模型，并希望它能在聚光灯下产生阴影。然而，在实际渲染时，我发现滑板并没有在地面上产生任何阴影。这是一个令人困惑的问题，因为其他对象（如基本的Three.js几何体）在同样的光照条件下可以正常产生阴影。为了更好地说明这个问题，以下是我当时的核心代码：在这段代码中，我使用了标签来渲染一个从外部文件加载的OBJ模型，并确保了标

YuZou 邹宇·2023-11-09 02:24

VUE使用threejs加载3D模型时报错404

在使用three.js加载3D模型时，路径是正确的，但是部署到服务器上时报错404，找不到obj文件。这是因为服务器IIS的MIME没有添加.obj扩展类型。如果mtl文件也出不来的话，就再加一个.mtl类型。然后就好了。

旭日之温·2023-11-09 02:24

threejs效果记录

目录1、渐变线2、导入字体3、定义几何体4、tween补间动画5、Sprite粒子（精灵材质）6、Sprite粒子（精灵材质）---下雪7、通过几何体创建点云8、使用环境贴图创建虚假的反光效果9、通过Reflector创建反光镜10、背景用background-image设置11、使用videoTexture用视频作为输出纹理12、纹理offset偏移13、形状缓冲几何体14、自定义形状（墙）15

蛋蛋的老公·2023-11-08 18:54

Threejs 开发3D地图实践总结

前段时间连续上了一个月班，加班加点完成了一个3D攻坚项目。也算是由传统web转型到webgl图形学开发中，坑不少，做了一下总结分享。1、法向量问题法线是垂直于我们想要照亮的物体表面的向量。法线代表表面的方向因此他们为光源和物体的交互建模中具有决定性作用。每一个顶点都有一个关联的法向量。如果一个顶点被多个三角形共享，共享顶点的法向量等于共享顶点在不同的三角形中的法向量的和。N=N1+N2；所以如果不

weixin_30877493·2023-11-08 18:51

threejs 判断点击的位置是否在点云中

我的点云文件格式是ply，需求是实现点云的测量，标注两个点之后连起来，计算他们的距离；展示点云首先我们需要明白展示点云必须要创建场景，相机，渲染器参考代码vue-3d-modelvue-3d-model是支持3d预览的一个插件但是这个插件并不能满足我们的需求所以我们就自己写了一个/*eslint-disable*/import{Object3D,Vector2,Vector3,Color,Scen

xiaaaa.z·2023-11-08 17:32

threejs (二) 相机

正交相机constcamera=newTHREE.OrthographicCamera(-aspect,aspect,aspect,-aspect,0.1,//进平面1000//远平面);//透视相机创建相机辅助线constcameraHelper=newTHREE.CameraHelper(this.camera);创建一个透视相机观察正交相机//创建透视相机constwatchCamera=n

小程很努力·2023-11-08 14:38

Threejs实现酷炫3D地球技术点汇总

原文地址：Threejs实现酷炫3D地球技术点汇总在线预览：https://joy1412.cn/online/前言本篇介绍一下如何用Threejs实现一个酷炫的3D地球特效，使用到的技能点如下：星空动态背景地球模型大气层光圈卫星环绕特效经纬度坐标转成

嘟嘟MD·2023-11-07 21:24

Threejs实现3d地球记录（1）

一、基本场景配置1、创建场景constscene=newTHREE.Scene();//创建场景2、创建并配置相机参数各参数详情参考threejs官方文档//THREE.PerspectiveCamera

今天也要攒钱·2023-11-07 21:24

Threejs实现3d地球记录（2）

2、添加地球光圈地球光圈图：//地球光圈functioncreateSprite(R){vartextureLoader=newTHREE.TextureLoader();vartexture=textureLoader.load(spriteImg);//加载纹理贴图//创建精灵材质对象SpriteMaterialvarspriteMaterial=newTHREE.SpriteMaterial