three.js
关注
分享
扫一扫
文章平均质量分 70
three.js开发实战
X01动力装甲
欢迎进群（959261248）学习交流。
展开
-
Three.js PBR 物理渲染
传统的渲染技术通常使用 ad hoc 光照模型，但这种方法存在一些问题。例如，在不同的光照条件下，材料的外观可能会发生变化。PBR 算法通过使用更真实的材质属性、光照计算和环境地图来模拟材料与现实世界之间的相互作用。这使得渲染的结果更加逼真，同时也更容易管理。PBR 是 Three.js 中非常强大的功能之一。它可以让开发者创建更逼真的场景，使用户获得更好的体验。在实际操作使用 PBR 时要注意材质属性的设置，以实现你所期望的效果。原创 2024-02-01 17:14:59 · 864 阅读 · 0 评论 -
Three.js 阴影效果
在本文中，我们介绍了 Three.js 中的三种常见阴影算法，包括 Shadow Mapping、PCF Shadow Map 和 Raytraced Shadows，并讲述了如何使用 Three.js 创建阴影效果。阴影可以为 3D 场景增加真实感和可交互性，但同时也需要权衡计算量和视觉效果。通过适当地配置阴影参数和算法，我们可以在 Three.js 中轻松地创建各种高质量的阴影效果。原创 2024-01-24 10:54:31 · 906 阅读 · 0 评论 -
Three.js GLTF模型加载
在Three.js中，要加载三维模型文件，可以使用GLTF格式。GLTF是一种基于JSON的开放标准，用于3D模型的交换和运行时加载。在上述代码中，`GLTFLoader()`函数会加载'model.gltf'文件，并在加载完成后将模型添加到场景中。如果模型具有动画效果，则可以使用Three.js提供的`AnimationMixer()`和`AnimationClip()`函数控制它。3. 接着，我们需要使用`GLTFLoader()`函数加载GLTF模型，并给它提供一个回调函数来处理加载完成后的动作。原创 2023-09-01 10:48:45 · 1319 阅读 · 0 评论 -
Three.js添加阴影和简单后期处理
在Three.js中，可以使用渲染器的一些特性来实现阴影和后期处理效果。原创 2023-09-01 10:46:42 · 1929 阅读 · 0 评论 -
three.js 场景中如何彻底删除模型和性能优化
在three.js场景中，要彻底删除外部模型，需要执行以下几个步骤：从场景中移除模型你可以使用或者将模型从场景中移除。如果是多个模型，可以用循环来处理。移除所有材质和纹理模型通常会包含材质和纹理，即使你把它们从场景中移除了，它们也仍然存在于内存中，所以你需要将它们全部移除。如果模型有多个材质和纹理，同样需要使用循环来处理。释放几何体和缓冲属性在 WebGL 中，几何体和缓冲属性是直接存储在 GPU 中的，所以你需要手动释放它们以释放内存。原创 2023-09-01 10:39:21 · 3260 阅读 · 0 评论 -
three.js元宇宙开发实战
three.js开发元宇宙计划书什么是元宇宙？这不重要，重要是我们在做。你搞个网站，你说这不是网站，这是元宇宙，他就是。你搞个游戏，你说这不是游戏，这是元宇宙，他就是。你吹个牛逼，你说这不是吹牛逼，这就是元宇宙，他真的就是。我就用3D写几行代码，我说他是元宇宙，他就是！话不多说，直接开整。虽然不知道要做什么，但是不重要，重要的是我们在做。 1：新建文件夹。 2：选择框架前端就Angular吧，3D就three.js。Babylon.js也不错，作为备选方案。 3：新建项目 4: 挖原创 2021-12-09 15:36:56 · 21432 阅读 · 7 评论 -
“export ‘Geometry‘ (imported as ‘THREE‘) was not found in ‘three‘
"export ‘Geometry’ (imported as ‘THREE’) was not found in ‘three’因为three.js 在 r125版本中干掉了Geometry，全部采用BufferGeometry。~~three.js 在 r125版本中终于干掉了Geometry。~~如果你的项目升级后出现了上述的错误，就需要仔细修改了。比如之前采用了geometry.vertices.push那么就会接着报错的，找到错误按照API修改即可。TypeError: Cannot r原创 2021-04-28 16:05:44 · 5736 阅读 · 1 评论 -
three.js ‘texture‘ : function name expected
THREE.WebGLProgram: shader error: 0 35715 false gl.getProgramInfoLog No compiled fragment shader when at least one graphics shader is attached.THREE.WebGLShader: gl.getShaderInfoLog() fragmentERROR: 0???? ‘texture’ : function name expectedERROR: 0????原创 2020-12-10 11:43:59 · 2686 阅读 · 7 评论 -
three.js使用OrbitControls导致黑边问题处理
three.js使用OrbitControls导致黑边问题处理默默的看图吧！有人说在源码中注释掉这行就可以scope.domElement.focus ? scope.domElement.focus() : window.focus();相关的还有这个：scope.domElement.tabIndex其实改源码还是不怎么赞成的方法不得已就别用。问题的源头是tabindex属性造成的。网上有解释和解决方法，就会outline。通过.removeAttribute(‘tabindex原创 2020-12-02 12:07:59 · 744 阅读 · 0 评论 -
香港svg 3d地图
香港svg 3d地图效果图如下：数据以及SVG：{ 中西区:"M762 697L745 697L727 702L725 700L722 690L703 666L695 659L681 659L670 663L658 662L656 660L654 653L655 641L657 636L675 625L686 615L702 607L728 606L762 618L764 670L763 692z", 东区:"M827 697L829 677L840 675L847原创 2020-11-26 17:58:17 · 902 阅读 · 0 评论 -
d3-force-3d demo
d3-force-3d demo用d3-force-3d开发的拓扑明显感觉不对，于是又又写了一个最简单的demo来测试一下。因为是3d，所以需要一个3d的框架来测试。测试数据结构是这样，这是2d svg绘制的效果。生成的3d的样子是下面这样。当时数据没有变化的时候，每次生成的结果是一样的，结构相当稳定。下面是用three.js来绘制的3d效果。再来测试下1024个节点的效果：很快就稳定了下来，随机的数据效果还不错。核心代码：const simulation = d3d .for原创 2020-11-20 17:18:48 · 1367 阅读 · 0 评论 -
three.js118辉光导致场景透明度失效UnrealBloomPass
透明度在有的时候很重要/** * @author spidersharma / http://eduperiment.com/ */import { AdditiveBlending, Color, LinearFilter, MeshBasicMaterial, RGBAFormat, ShaderMaterial, UniformsUtils, Vector2, Vector3, WebGLRenderTarget} from "../../../build/three.原创 2020-08-18 14:55:18 · 2460 阅读 · 4 评论 -
Supplied parameters do not match any signature of call target.
Supplied parameters do not match any signature of call target.Argument of type ‘AxesHelper’ is not assignable to parameter of type ‘Object3D’.Cannot find name ‘WebGL2RenderingContext’.Error: Error at E:/scene/sense-web/node_modules/three/src/core/Buffer原创 2020-08-17 17:32:11 · 647 阅读 · 0 评论 -
Uncaught TypeError: a.raycast is not a function
Uncaught TypeError: a.raycast is not a function老司机也翻车了。原来api有两个，一个有s,一个没有s。适合拾取单个物体或者一组物体。这里是引用.intersectObject ( object : Object3D, recursive : Boolean, optionalTarget : Array )intersectObjects ( objects : Array, recursive : Boolean, optionalTarget原创 2020-05-09 17:32:27 · 523 阅读 · 0 评论 -
three.js音乐可视化
three.js音乐可视化我们直接参考这篇文章就可以了：基于Web Audio API实现音频可视化效果基本概念要从你的音频源获取数据，你需要一个 AnalyserNode节点，它可以用 AudioContext.createAnalyser() 方法创建，比如：var audioCtx = new (window.AudioContext || window.webkitAudioCo...原创 2020-04-30 14:51:22 · 791 阅读 · 0 评论 -
Web Worker在three.js中应用
Web Worker在three.js中应用阮一峰:Web Worker 使用教程W3school:HTML 5 Web Workers这两个下瞅瞅，练练手。如果有疑问，就取看API：MDN web docsWeb Workers API原创 2020-01-09 21:23:34 · 1433 阅读 · 0 评论 -
Three.js查看版本号（107版本之后）
Three.js查看版本号（107版本之后）three.js在107版本以及107版本的版本号默认会打印在控制台的，例如：THREE.WebGLRenderer 106，但是到了108版本官方居然给删掉了，对于这种跨本版api经常乱变的库来说，是要闹事情吗。此时我们想查看版本号应该怎么办？下面有三种方法可供参考：1、查看源码最简单的方式之直接打开编译后的库文件直接查看，build文件夹中t...原创 2019-12-05 11:11:06 · 4982 阅读 · 1 评论 -
echarts生成的图表在three.js中的应用
echarts生成的图表在three.js中的应用最近群里有几个人问，如何把echarts的图表贴在three.js的模型上。这个问题其实很简单，因为二者都是渲染成canvas的，直接用echarts生成的canvas当作贴图就可以了。方法确定可行，那么我们就直接开始撸代码。先搭建一个three的基本场景起来，这里不在复述。然后新建一个平面，我们把图片贴在这个平面上即可。addPlane...原创 2019-11-29 17:26:51 · 4520 阅读 · 3 评论 -
38three.js傅里叶变换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01 three.js Fourier transform</title> <script type="text/javascript" s...原创 2018-07-12 21:20:00 · 1177 阅读 · 0 评论 -
如何使用ES6开发Three.js项目（一）
如何使用ES6开发Three.js项目（一）如何使用ES6开发Three.js项目（二）配置开发环境：node.js+webpack+webpack-dev-server+babel+ES6+three.jsnode.js webpack webpack-dev-server babel ES6 three.js 1、使用npm安装three.js。注意安装命令是thr...原创 2018-08-29 20:55:00 · 6479 阅读 · 0 评论 -
physi.js
PhysijsPhysijs plugin for three.jsPhysijs brings a very easy to use interface to the three.js framework. One of the reasons three.js is so popular is because it is so incredibly easy for graphics ...原创 2018-09-05 23:48:36 · 305 阅读 · 0 评论 -
WebGL着色器和Three.js自己定义后期处理着色器
WebGL着色器和Three.js自己定义后期处理着色器为了渲染出一个网格的最终图像，开发者需要准确的定义顶点、变换、材质、光源以及相机是如何相互作用并最终生成图像的。而承担这个工作的就是着色器（shader）。着色器又称作可编程着色器，它是一段源码，它实现了将网格像素点投影到屏幕上的算法。图形硬件能够解析顶点、纹理以及其他底层的东西，但是并不能处理材质、光源、变换以及相机。这些高级的结构由着色...原创 2018-10-11 13:52:11 · 4082 阅读 · 0 评论 -
Three.js中Detector.js替换成了WebGL.js
Detector.js — WebGL.jsThree.js 源码更新，删除了Detector.js ，采用新的WebGL.js了。更新时间在2018年9月26日//使用detector.js的检测代码if ( ! Detector.webgl ) Detector.addGetWebGLMessage();//使用webgl.js的检测代码if ( WEBGL.isWebGLAva...原创 2018-09-26 18:45:37 · 3869 阅读 · 1 评论 -
THREE.ShaderMaterial
THREE.ShaderMaterialTHREE.ShaderMaterial是three.js中最通用、最复杂的材质之一。通过它可以使用自己的定义的做色漆，直接在webgl环境中运行。原创 2018-10-15 10:16:42 · 4657 阅读 · 1 评论 -
使用threejs实现地球辉光和大气层效果
使用threejs实现地球辉光和大气层效果实现原理就是使用three.js的ShaderMaterial材质。我们把辉光分为几个步骤来实现：创建两个球体，一个作为原始物体，一个略大一些作为它的辉光作为辉光的球体从内到外片元透明度逐渐减小（线性减小或是指数减小都可以）将覆盖原始物体的部分丢弃掉主要代码如下：var vertexShader = [ 'varying vec3...原创 2018-10-15 10:46:51 · 10419 阅读 · 3 评论 -
threejs基本场景
threejs基本场景自己开发中经常用到的基本测试场景，包含scene, camera, renderer, light, controls等。运行成功后会显示一个随意颜色的立方体和一个球体以及一个平面。用到的三个基本库文件。 &lt;script type="text/javascript" src="../js/three.js"&gt;&lt;/script&a原创 2018-10-18 18:18:05 · 1087 阅读 · 0 评论 -
webgl中着色器的几种嵌入写法
webgl中着色器的几种嵌入写法在webgl中着色器程序是以JavaScript字符串形式编写的。为了书写美观和调试方面，经常出现不同的嵌入方式。下面总结了几种常用的方式。方式1：var vertexShaderSource = &amp;quot;&amp;quot; + &amp;quot;attribute vec4 aPos;&amp;quot; + &amp;quot;v原创 2018-10-18 19:08:00 · 737 阅读 · 0 评论 -
three.js 点材质(PointsMaterial)
three.js 点材质(PointsMaterial)var starsGeometry = new THREE.Geometry();for ( var i = 0; i &lt; 10000; i ++ ) { var star = new THREE.Vector3(); star.x = THREE.Math.randFloatSpread( 2000 ); star.y =...原创 2018-09-30 16:27:29 · 4908 阅读 · 0 评论 -
three.js 后期处理通道postprocessing
three.js 后期处理通道postprocessingThree.js提供了很多后期通道。下面列出了官方文档中的23个通道。AdaptiveToneMappingPassAfterimagePassBloomPass：该通道可以增强场景中明亮的区域，可以模拟辉光。BokehPassClearPassCubeTexturePassDotScreenPassEffectComp...原创 2018-10-09 16:55:47 · 5995 阅读 · 3 评论 -
THREE.ShapeGeometry
ShapeGeometry从一个或多个路径形状创建一个单面多边形几何模型. 类似于 ExtrudeGeometry下面演示使用shape绘制一个二维的圆环，然后用该圆环的点来绘制出一个三维的圆。var shape = new THREE.Shape();shape.absarc(0,16,10,0,Math.PI*2,true);var points = shape.getPoints(...原创 2018-10-09 17:28:35 · 1779 阅读 · 0 评论 -
three.js创建地球带大气层、辉光、云层、凹凸、高光
文章目录three.js创建地球1、基本场景搭建2、添加地球3、添加轨道控制器4、添加云层5、添加大气层6、添加星空背景7、添加辉光效果8、添加轨道卫星9、TS重构10、打包发布three.js创建地球本教程采用three.js创建一个地球带包含材质贴图，凹凸/高光贴图，以及大气层、辉光、云层、轨道卫星、星空等效果。涉及到的知识点有：three.js基本场景纹理贴图轨道控制器Shad...原创 2018-10-23 14:35:05 · 6946 阅读 · 6 评论 -
three.js ObjectControls.js
three.js ObjectControls.jsthree.js-object-controls Control object rotation, scale。控制物体的旋转和缩放。适合的场景是物体在坐标原点，绕Y轴左右旋转，绕X轴上下旋转，所以相机必须在Z轴上。比较类似orbitcontrols，但是功能更弱。合适演示地球。使用方法加载js文件<script src="t...原创 2018-10-31 19:25:03 · 1304 阅读 · 4 评论 -
34three.js TransformControls ObjectControls.js
TransformControls.js该插件可以控制物体的移动旋转缩放等操作。使用也比较简单。引入js文件 创建控制器 设置控制模式，有translate，rotate，scale等几种模式。 添加到场景中 绑定控制对象。var transformControls = new THREE.TransformControls(camera, renderer.domElem...原创 2018-06-14 12:30:00 · 1716 阅读 · 2 评论 -
08dat.GUI和stats.js库的使用1
左边是stats.js库，用来显示帧率。右上角的是dat.GUI库的效果。用处非常多。非常方便调试。使用也非常简单。 stats库，网络下载js文件。 body中添加一个div。<div id="Stats-output"></div> js中代码 var stats = initStats(); function initStats()...原创 2018-04-11 23:09:00 · 525 阅读 · 0 评论 -
如何使用ES6开发Three.js项目（二）
标题ES6开发Three.js项目之前写过一篇文章如何使用ES6开发Three.js项目，这次再完善一下，并把代码放在GitHub上了。three.js-es6-webpack基于ES6开发的three.js演示项目项目目录：public : 打包后文件夹src : 项目文件assets : 项目资源文件夹,图片视频等mapb.jpgcss :index.css...原创 2018-11-01 15:47:23 · 1718 阅读 · 0 评论 -
THREE.ShaderMaterial 添加纹理sampler2D texture
THREE.ShaderMaterial 添加纹理 sampler2D texture研究一下ShaderMaterial，主要包含以下几个功能。给plane添加纹理用灰度图生成地形用简单的函数生成水波让水波流动起来设置多张纹理动态改变纹理的颜色用法线改变物体的颜色效果如下，场景中主要又三个物体，plane1,plane2，Sphere。plane1: 演示给plane添加...原创 2018-11-06 12:08:28 · 4580 阅读 · 0 评论 -
three.js粒子过度效果制作(二)
three.js粒子过度效果制作(二)从图片获取粒子下面演示的是粒子是从图片中获取的。采用的cpu的方式，普通geometry，单一颜色。你也可以使用彩色图片，并使用彩色粒子，效果会更好一些。步骤创建meshGeo，这个是粒子系统的载体，，它的顶点数量决定了整个粒子的数量，这里球体（1，160，160）=25442个顶点。所以从两幅图像中离子化的顶点数量要小于该值，如果大于，就会显示...原创 2018-11-09 14:25:00 · 2361 阅读 · 0 评论 -
WebGL中模型矩阵、视图矩阵和投影矩阵
three.js中模型矩阵、视图矩阵和投影矩阵在学习three.js 中 shader 的时候总是被各种矩阵所迷惑，不知所措。变换与坐标系：模型矩阵视图矩阵投影矩阵本地坐标系世界坐标系视图坐标系裁剪坐标系所以常见的定点着色器中，顶点变换过程通常用下面两种写法。gl_Position = projectionMatrix * modelViewMatrix * vec4( position...原创 2018-11-02 18:37:53 · 2674 阅读 · 0 评论 -
three.js几种旋转操作的区别
rotation和rotateX(rotateY/rotateZ)的区别orbit2.rotateY(0.01); orbit2.rotation.y += 0.01;上面的两行代码运行的结果是有区别的。解释：rotateX:Rotates the object around x axis in local space.在本地空间中围绕x轴旋转物体。rotation：Object’s l...原创 2018-11-13 09:42:23 · 6111 阅读 · 0 评论 -
three.js使用掩码MaskPass高级效果组合器
three.js使用掩码MaskPass通道为场景添加背景所需要基本插件，下面5个都需要。&amp;amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;../js/postprocessing/EffectComposer.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/scri原创 2018-11-13 14:19:24 · 2347 阅读 · 0 评论