【WebGL】Three.js

在2023年使用Unity2021从Built-in升级到Urp可行么

因为最近在做WEbgl平台，所以某些不可抗力原因，需要使用Unity2021开发，又由于不可明说原因，想用Urp，怎么办？
avi9111·2023-10-05 04:14

Three.js 剖切 clippingPlan

对模型剖切是通过设置scene或者material的clippingPlanes实现的；如果设置了材质的clippingPlanes，shader的顶点着色器和片元着色器都会加入相应逻辑的代码；1、首先在顶点着色器里加入以下代码，给vClipPosition赋值，并传入片元着色器，这里用的是相机坐标系里的值，没有用世界坐标系里的值，这可能是因为变换矩阵可能改变法线的朝向，因此要将法线和顶点都统一到
百思不得Ting姐·2023-10-03 23:42

WebGL基础学习

WebGL工作原理step1：createvertexDatastep2：createbufferandloadvertexDatatobufferconstbuffer=gl.createBuffer
Coding_Life·2023-10-03 18:59

Vue.js2+Cesium1.103.0 十一、Three.js 炸裂效果

Vue.js2+Cesium1.103.0十一、Three.js炸裂效果DemoThreeModelBoom.vue/*eslint-disableeqeqeq*//*eslint-disableno-unused-vars
liuzhenghe30265·2023-10-03 16:07

WebGPU 入门：绘制一个三角形

WebGPU的出现就是为了取代WebGL的，因为后者的API实在有些过时，无法利用好现代GP
前端西瓜哥·2023-10-03 12:48

使用react-three-fiber加载glb格式3D文件，并播放3D模型自带动画

没有任何限制，一切工作在three.js这里将无一例外地工作。生态完善。
qianlingvip·2023-10-03 00:17

使用three.js导入外部glb模型实现一个nft产品

其他的功能都好说，但藏品把玩的3D效果之前未涉及过，但有了解过可以通过three.js来实现。所以，就开始看文档调研吧。准备工作首
洋茄子炒鸡蛋·2023-10-03 00:17

基于Threejs实现glb三维模型的预览

言归正传，使用threejs进行三维模型展示，通常需要依赖以下组件：Threejs+OrbitControls+GLTFLoader+WebGL以上组件可以从threejs的官网获取，下载后的目录如下所示
夜郎king·2023-10-03 00:47

three.js 轻量化glb模型 详细全过程

因为甲方项目中的模型多数为工业模型，所以模型大，面数多，three.js场景本身的模型加载就有一定的上限，所以模型的轻量化是一个较为重要的问题。DRACOLoader，three.js本身的glb格式
BUG豆荚·2023-10-03 00:13

ThreeJS - 封装一个GLB模型展示组件（TypeScript）

一、引言最近基于Three.JS，使用class封装了一个GLB模型展示，支持TypeScript、支持不同框架使用，具有多种功能。
l煎饼果子·2023-10-03 00:43

WebGL-学习笔记（三）

image.png在利用缓冲区并在学会利用mode绘制图形动画以后，继续研究二维图形的颜色渲染以及纹理操作1.颜色渲染1.1利用步进和偏移拆分缓冲区数据利用缓冲区可以一次存储点的多个信息，继续利用这一特性，并在利用vertexAttribPointer()函数的时候，利用上stride和offset两个参数：functionmain(){constcanvas=document.querySele
Patrick浩·2023-10-02 19:29

【笔记】WebGL编程指南学习（4）

WebGL编程指南学习（4）4.最后一块拼图在学会处理顶点，包括处理顶点的坐标、Javascript和WebGL管线的数据通信、坐标变换之后，还需要处理顶点的其他数据——如颜色等。
界明城·2023-10-01 06:11

【笔记】《WebGL编程指南》学习（8）

WebGL编程指南学习（8）漫长的旅行即将到达终点……8.高级技术8.1用鼠标控制物体旋转如何实现物体的旋转？如何旋转物体？
界明城·2023-10-01 06:11

webgl shader学习笔记1

webgl裁剪坐标-NPC坐标（-1-1）-局部坐标或者世界坐标webgl会自动剔除反面，只画正面，逆时针三角形为正面纹理坐标：（2D:TEXTURE_2D3D:TEXTURE_CUBE_MAP）纹理环绕方式
初升的夕阳·2023-10-01 06:11

【《WebGL编程指南》读书笔记-绘制和变换三角形】

时隔三天，我的数据结构知识集又加厚了一点，我也该回到WebGL的学习了。我决定看这本书，一方面的原因是从理解cesium入手，另一方面就是因为这一章。
floating_heart·2023-10-01 06:10

【第二届青训营-寒假前端场】- 「WebGL基础」笔记

WhyWebGL/WhyGPU?
余cos·2023-10-01 06:10

JS笔记：15、16、17章 Canvas、HTML5编程、错误处理

除了具备基本绘图能力的2D上下文，还建议了一个名为WebGL的3D上下文。基本用法：adrawingofsomething.如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。
Gyoung阿广·2023-10-01 06:10

【《WebGL编程指南》读书笔记-光照】

本文为《WebGL编程指南》第八章读书笔记总目录链接：https://blog.csdn.net/floating_heart/article/details/124001572本文包括以下内容：介绍了点光源
floating_heart·2023-10-01 06:40

【《WebGL编程指南》读书笔记-进入三维世界（上）】

了解WebGL可视空间，采用投影矩阵对物体进行投影操作，实现盒状可视空间和正射投影。对于正射投影矩阵的数学原理进行了本书之外的补充说明
floating_heart·2023-10-01 06:39

WebGL笔记：绘制矩形面的几种方式以及封装封装多边形对象来绘制不同图形

绘制矩形面可以绘制的面只有三角面，要绘制矩形面的话，只能用两个三角形去拼1）使用三角带TRIANGLE_STRIP绘制矩形回顾一下之前的规律：第一个三角形：v0>v1>v2第偶数个三角形：以上一个三角形的第二条边+下一个点为基础，以和第二条边相反的方向绘制三角形第奇数个三角形：以上一个三角形的第三条边+下一个点为基础，以和第二条边相反的方向绘制三角形关键顶点绘制数据constvertices=ne
Wang's Blog·2023-10-01 06:09

webgl笔记-3.纹理、帧、深度检测和混合

图形学编程的几个基本问题包括实现颜色、实现纹理、实现光照、实现混合（即透明效果）；这几个问题实际上是一个问题：确定图元（像素）的在屏幕上的颜色。确定图元颜色的过程在顶点着色器和片元着色器中进行：为每一个顶点（注意这里立方体有24个顶点而不是8个）指定一种颜色（并线形内插到每个像元上）以实现颜色；为每个顶点指定从纹理中取色的坐标（并线形内插到每个像元上）以实现纹理；为每个顶点指定光线强度和方向，以此
dayuan5183·2023-10-01 06:09

WebGL笔记：使用鼠标绘制多个线条应用及绘制动感线性星座

使用鼠标绘制多个线条多个线条，肯定不是一笔画过的，而是多次画的线条既然是多线，那就需要有个容器来管理它们1）建立容器对象建立一个lineBox对象，作为承载多边形的容器//lineBox.jsexportdefaultclasslineBox{constructor(gl){this.gl=glthis.children=[]}add(obj){obj.gl=this.glthis.childre
Wang's Blog·2023-10-01 06:39

1.绘制一个点

canvas.getContext('2d')可获取画布的二维绘制对象（CanvasRenderingContext2D）；canvas.getContext('webgl')canvas.getContext
就是那个帕吉·2023-09-30 17:09

unity打包webgl局限及优化建议

->通过IL2CPP技术转换成c++->使用Emscripten编译器进行编译将脚本转换为JavaScript（但不是普通的JS，而是一种叫做asm.js的JavaScript变体）二．Unity打包webgl
weixin_43787178·2023-09-30 16:06

WebGL笔记：绘制多个点，三角形，以及画各种不同的线条，面

绘制多点1）WebGL缓冲区我们在用js定点位的时候，肯定是要建立一份顶点数据的，这份顶点数据是给着色器的，因为着色器需要这份顶点数据绘图然而，我们在js中建立顶点数据，着色器肯定是拿不到的，这是语言不通导致的为了解决这个问题
Wang's Blog·2023-09-30 11:17

three.js 后处理之OutlinePass.js 解析

//选择模型、显示外边框THREE.OutlinePass=function(resolution,scene,camera,selectedObjects){//场景、相机this.renderScene=scene;this.renderCamera=camera;//要选择的对象this.selectedObjects=selectedObjects!==undefined?selected
tianyapai·2023-09-30 07:59

webgl一些常用参数的学习

1.逐顶点和逐片元2.uniform变量3.varing变量的作用4.vertexAttribPointer的stride和offset参数（创建一个缓存区保存多种数据：坐标和尺寸）
第一最寂寞·2023-09-30 00:41

vue 访问本地文件 相对路径 文件目录 three.js 加载模型

环境：vue/cli4.5.9“three”:“^0.124.0”,“vue”:“^2.6.11”,“vue-router”:“^3.2.0”搞了一下把three.js融入vue，前面比较顺利，在加载文件时遇到了问题
emongol·2023-09-29 22:41

Three.js 更改加载的模型的位置 异步加载

进度一点点前进，外部模型这一方面已经是实现模型的加载，模型的动画的播放控制了，接下来的一步是通过代码去控制加载好的模型的“动画”，这个动画是指简单的移动、旋转、缩放之类，提前准备的时候是用了一个threejs创建的Cube，把它作为一个全局变量，在animate()直接进行修改position属性，是很简单就实现了，开始用同样的方法去给到加载好的模型，然后就出现了一个困扰了我一天多的问题，chro
emongol·2023-09-29 22:11

three.js通过CubeTexture加载环境贴图，和RGBELoader加载器加载hdr环境贴图

一、使用CubeTexture进行环境贴图1.CubeTexture使用介绍Three.js中可以通过使用CubeTexture进行环境贴图，CubeTexture需要将6张图片（正面、反面、上下左右）
jieyucx·2023-09-29 18:05

threejs tweenjs实现3D粒子模型切换

前言之前逛论坛时看到一篇利用three.js实现粒子模型切换动画的分享，具体的效果如下：也可以去预览。
无名之辈2018·2023-09-29 11:46

three.js 拖动场景中物体(原生|拖拽控制器)

非控制器版拖动场景中的物体实际上是在一个平行于窗口的平面中进行拖动，确定这个平面并确定鼠标在该平面中的位置变化，就将问题转换成简单的2d移动物体了015-拖动物体/***3D场景中进行平移，在不旋转的情况下，只看到物体跟随鼠标以平行于窗口的轨迹运动*/letrenderer,camera,scene,light,mesh,cameraControls;functioninitGui(){//声明一
御形封灵·2023-09-29 11:16

Three.js学习 - 鼠标操作三维场景（二）

引入JS:import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';添加鼠标监听OrbitControls.js控件支持鼠标左中右键操作和键盘方向键操作场景操作缩放：滚动—鼠标中键旋转：拖动—鼠标左键平移：拖动—鼠标右键varcontrols=newOrbitControls(this.camera,this.r
码代码的肥猫·2023-09-29 11:46

Three 之 three.js （webgl）鼠标/手指通过射线移动物体的简单整理封装

Three之three.js（webgl）鼠标/手指通过射线移动物体的简单整理封装目录Three之three.js（webgl）鼠标/手指通过射线移动物体的简单整理封装一、简单介绍二、实现原理三、注意事项四
仙魁XAN·2023-09-29 10:44

在three.js中实现鼠标旋转缩放预览效果

平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。OrbitControls(轨道控制器)使用Orbitcontrols（轨道控制器）可以使得相机围绕目标进行轨道运动。要使用这一功能，就像在/examples（示例）目录中的所有文件一样，您必须在HTML中包含这个文件。你可以打开课件案例源码测试下效果。旋转：拖动鼠标左键缩放：滚动鼠标中键平移：拖
前端布道人·2023-09-29 10:12

Three.js使用全景图做360°背景贴图

一、准备工作对于一张全景图，一般都具备上下左右前后6个方向，所以准备工作就是需要准备六张图片，包含六个方位（类比正方体），最好使用【全景图】来进行裁切，得到完整且流畅过度的六张图片，这里我使用的是【PTGui】软件进行全景图裁切官网下载地址：PTGui（https://ptgui.com/download.html?ps=main）具体使用流程如下：打开一张全景图选择顶部的Tools设置导出格式，
LayneTu·2023-09-29 10:19

Three.js/Shader墙体渐变透明特效

Three.js/Shader墙体渐变透明特效生成方法通过Shader实现透明墙体效果通过路径解析算法生成不规则墙体支持颜色/高度/透明度/动画配置/***创建透明墙体材质*option=>*paramsheightcoloropacityspeed
漫 漫，·2023-09-29 10:47

Three.js/Shader墙体流光特效

Three.js墙体流光效果基于ShaderMaterial，通过两张贴图实现流动效果，配置不同的贴图可以有不同效果通过使用不同的背景贴图(bgTexture)可以渲染不同墙体效果通过使用不同的流动贴图
漫 漫，·2023-09-29 10:47

Three.js星空粒子特效

效果代码只渲染固定个数与区域的粒子保证性能初始化时确定每个粒子偏移向量方向，操作帧动画时做三维向量偏移超过规定区域时还原，实现无限粒子移动Document*{margin:0;padding:0;}body{background-color:#000000;margin:0px;overflow:hidden;background-image:radial-gradient(ellipsefart
漫 漫，·2023-09-29 10:47

Three.js通过不规则路径生成墙体

Three.js通过不规则路径生成墙体在一些3D场景的搭建中，经常会遇到图中通过墙体来分割内容的效果，目前Threejs提供的Geometry类型还无法直接处理一些不规则墙体的搭建生成算法通过BufferGeometry
漫 漫，·2023-09-29 10:47

Three.js实现hover与Click选中效果

一、效果展示二、如何实现使用Three.js提供的光线投射Raycaster模块通过Raycaster将物体在场景中的位置与鼠标的位置进行对比当鼠标的平面坐标与场景中物体的平面坐标发生重叠时认为选中了物体三
漫 漫，·2023-09-29 10:17

Three.js带Depth实现分区辉光

一、效果二、如何实现1.基于EffectComposer后期渲染器。2.借助UnrealBloomPass渲染通道，实现辉光效果。3.接住ShaderPass，保此原有material。4.单帧两次渲染，分别渲染辉光部分，还原正常部分。5.相比直接分层两次渲染，修复了深度信息丢失导致的层级问题。三、代码实现Document*{margin:0;padding:0;}varyingvec2vUv;v
漫 漫，·2023-09-29 10:17

Three.js渲染Dom元素到3D场景

效果中间两个swiper部分用dom方式实现，再将其转化成为Three中的CSS3DObject对象添加到3D场景中，代码需要创建两个场景与渲染器（普通渲染器，CSS3Render）通过两个场景融合实现dom插入（这种方式会导致深度信息丢失）Document*{margin:0;padding:0;}import*asTHREEfrom"./node_modules/three/build/thr
漫 漫，·2023-09-29 10:17

Three.js加载360全景图片/视频

Three.js加载360全景图片/视频效果原理将全景图片/视频作为texture引入到three.js场景中将贴图与球形网格模型融合，将球模型当做成环境容器使用处理视频时需要以dom为载体，加载与控制视频动作每次渲染时更新当前
漫 漫，·2023-09-29 10:44

WebGL笔记：WebGL中绘制圆点，设定透明度，渲染动画

WebGL绘制圆点基于片元着色器来画圆形片元着色器在屏幕中画图是基于一个个的像素的每次画一个像素时，都会执行片元着色器中的main方法那么，我们就可以从这一堆片元中(n个像素点)找出属于圆形的部分片元的位置叫做
Wang's Blog·2023-09-29 06:40

WebGL 渲染三维图形作为纹理贴到另一个三维物体表面

目录渲染到纹理帧缓冲区对象和渲染缓冲区对象帧缓冲区对象帧缓冲区对象的结构如何实现渲染到纹理示例程序（FramebufferObject.js）创建帧缓冲区对象（gl.createFramebuffer（））gl.createFramebuffer（）规范gl.deleteFramebuffer（）规范创建纹理对象并设置其尺寸和参数创建渲染缓冲区对象（gl.createRenderbuffer（））
山楂树の·2023-09-29 04:59

01.cesium简介

它主要用于展示三维地球，通过WebGL技术来进行硬件加速，只要浏览器支持WebGL它就可以运行。cesi
阿发博客·2023-09-29 02:42

Three.js的uv坐标贴图理解

前言最近在做自定义几何体（平面）示例的时候，发现加上贴图后并没有得到想要的结果，代码是这样的：//创建几何体vargeometry=newTHREE.Geometry();varvertices=[newTHREE.Vector3(0,0,0),newTHREE.Vector3(100,0,0),newTHREE.Vector3(100,100,0),newTHREE.Vector3(0,100,
格瑞@_@·2023-09-28 20:53

threejs学习笔记-01

开源库下载地址：https://github.com/mrdoob/three.js官方文档的src目录里面包括了threejs的所有实现代码和接口文件,实际项目中可以只拷贝这个,docs目录里包含了threejs
weixin_43739821·2023-09-28 17:25

拜托，使用 Three.js 让二维图片具有 3D 效果超酷的

前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。背景逛sketchfab网站的时候我看到有很多二维平面转3D的模型例子，于是仿照他们的例子，使用Three.js+React技术栈，将二维漫画图片转化为三维视觉效果。本文包含的内容主要包括：THREE.Group层级模型
前端瓶子君·2023-09-28 17:24
上一页 20 21 22 23 24 25 26 27 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他