首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
webgl以及three.js学习记录
土豆奥利奥
创建于2023-03-15
订阅专栏
记录自己的webgl和three.js学习记录
等 13 人订阅
共19篇文章
创建于2023-03-15
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
掌握 WebGL 渲染管线:构建实时图形的核心流程
前言 今天我们将深入学习 WebGL 的渲染管线。通过这一过程,你将了解图形从数据到最终呈现的完整路径。话不多说,直接开始吧! 渲染管线的流程 1. 顶点处理 这一步主要做了两件事:几何变换和数据传递
使用webgl动态绘制多个点
前言 动态绘制多个点,相对于绘制单个点而言,只是多了个监听事件而已。下面,我们来看看,对于绘制多个点,我们是如何使用 webgl 来处理的。 方法展示 初始化 webgl,和初始化 shader 的方
使用 webgl 绘制单个点
前言 对于 webgl 的学习,我打算从头开始。从简到繁,希望可以扎实的过一遍。现在我们就从最简单的绘制单个点入手,文中涉及到的 API,我会给大家列出重点,以及在线文档地址。 步骤 引入 glMat
色彩映射方式-线性,ACES, 莱茵哈德
前言 今天主要是想学习下三种色彩映射方式是什么以及它们之间的区别。文字内容较多,关键部分会用高亮标注。 是什么 线性(Linear) :这种方式不会对图像的颜色进行任何修改,只是简单地将颜色的亮度缩放
3D 场景中的世界坐标与局部坐标
前言 今天我们来介绍下3D中的世界坐标系和局部坐标系的区别。 是什么? 任何一个模型都有自己的坐标,它的坐标又分为局部坐标和世界坐标。 什么是局部坐标? 模型自身的坐标 什么是世界坐标? 模型自身.p
vite导入glsl文件时报错问题处理
前言 最近学threeJs的时候踩到的坑,当我导入glsl文件时,一直在报语法错误,类似于 想着vec3,vec4不是系统内部定义的嘛,非常的懵逼。 解决方式 原因是vite,只需要在导入的时候,加上
THREE.JS 中如何使用物理引擎 CANNON
前言 在使用THREE.js处理物体的碰撞和变形效果时,通常需要借助物理引擎来实现,以使得碰撞等效果更加逼真。其中,我们常用的物理引擎为CANNON。接下来,让我们来学习一下如何在THREE.js中使
THREE.JS 中灯光与阴影的关系与设置
前言 在3D场景中,阴影扮演着至关重要的角色。如果没有阴影,整个场景看起来会非常不真实。因此,阴影是营造出真实感和深度感的关键因素之一。 在本文中,我们就来看看,在THREE.JS 中如何实现阴影效果
THREE.JS中UV映射及设置方法
前言 本文将介绍 Three.js 中的 UV 映射,包括 UV 映射的概念、与顶点位置的关系和区别,以及如何在 Geometry 中设置 UV 坐标。 uv映射 什么是UV映射? UV映射是一种将二
THREE.JS中如何使用光线投射(raycaster)完成3D交互效果
前言 在网页开发中,我们通常使用 DOM 事件来操作 DOM 元素。但是在 canvas 画布中,如何监听用户对画布内容的 DOM 操作呢?除了常规的事件监听器外,在 three.js 中,我们还可以
THREE.JS中不同贴图的搭配使用
前言 本文主要介绍各种贴图在 THREE.JS 中的搭配使用,并通过完成一个小 demo 来加深理解。 在 THREE.JS 中,贴图、透明度贴图、环境贴图和高光贴图等不同类型的纹理可以配合使用,以实
如何在 THREE.JS 中为立方体的不同面设置不同的材质?
前言 在日常开发中,有许多情况需要为不同的面设置不同的材质。例如,在构建游戏场景时,我们可能需要为地面、墙壁和天花板设置不同的材质,以实现更真实的效果。同样,在建筑可视化和产品展示方面,为不同的面设置
gsap 补间动画插件让动画效果更流程
在vue项目开发中,我们除了可以通过wowjs来给页面增加动画效果外,也可以通过使用gsap补间动画来让页面元素动起来。 安装依赖 使用 设置动画 从上往下动画 通过gsap实现让div从上往下移动效
管道漫游
整体思路 利用 CatmullRomCurve3 创建一个三维样条曲线 在三位样条曲线上等间距的取一系列点 相机位置按照第二步所取的点移动。 实现步骤 三位样条曲线 效果: 调整相机位置,让相机看向管
THREE.js中相机动画
本质 相机动画的本质是改变相机位置! 案例 实现相机水平移动,达到一个漫游效果 核心代码 在render方法中改变相机位置: 效果: 圆周运动,实现一种盘旋效果 核心代码 效果: 总结 相机动画的本质
做一个简单的地图轮廓
涉及到的知识点 平面填充几何体ShapeGeometry 包围盒Box3 正投影相机OrthographicCamera 目标效果 实现步骤 准备好地图数据 1. 将地图每个坐标数据包装成二维向量,并
THREE中包围盒(Box3)
什么是包围盒(Box3) 就是一个长方体空间,将模型所有顶点包围起来的最小长方体空间。 描述一个长方体包围盒需要通过xyz坐标来表示,X范围[Xmin,Xmax],Y范围[Ymin,Ymax],Z范围
THREE中canvas画布尺寸动态变化
场景 当浏览器尺寸动态变化时,canvas画布尺寸跟着变化。 要解决的问题: 如下图所示:当页面尺寸变化了,canvas渲染画布尺寸没有跟着变化,需要重新刷新。 如何解决 效果: 可以看到,canva
正投影相机(OrthographicCamera)与透视投影相机(PerspectiveCamera)
正投影相机与透视投影相机的不同 API 正投影相机(OrthographicCamera) 参数说明: 图说明: 透视投影相机(PerspectiveCamera) 参数说明: 图说明: 使用场景不同