【WebGL】Three.js

【笔记】《WebGL编程指南》学习-第7章进入三维世界（3-可视空间）

在下图的场景中，道路两边都有成排的树木。树应该都是差不多高的，但是在照片上，越远的树看上去越矮。同样，道路尽头的建筑物看上去比近处的树矮，但实际上那座建筑比树高很多。这种“远处的东西看上去小”的效果富裕了照片深度感，或称透视感。我们的眼睛就是这样观察世界的。有趣的是，孩童的绘画往往会忽视这一点。在正射投影的可视空间中，不管三角形与视点的距离是远是近，它由多大，那么画出来就有多大。为了打破这条限制，
努力的V崽兽·2023-10-19 08:33

【WebGL】《WebGL编程指南》读书笔记——第4章

一、前言今天继续第四章的学习内容，开始学习复合变换的知识。二、正文Example1:复合变换在书中，作者为我们封装了一套用于变换的矩阵对象：Matrix4对象。它包含以下几种方法：Matrix4.setIdentity():将Matrix4实例化为单位矩阵Matrix4.setTranslate(x,y,z):将Matrix4实例设置为平移变换矩阵，在x轴平移距离为x，在y轴平移距离为y，在z轴平
weixin_30664615·2023-10-19 08:03

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

WebGL编程指南学习（10）Thisisjusttheendofthebeginning.
界明城·2023-10-19 08:02

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

WebGL编程指南学习（6）6.光照光照使场景变得逼真~6.1从物理出发计算机图形学中着色（shading）的真正含义就是，根据光照条件重建“物体各表面明暗不一的效果”的过程两个物理上的事情需要考虑：发出光线的光源的类型物体表面如何反射光线光源平行光
界明城·2023-10-19 08:32

WebGL编程指南五：三角形动画

目标：绘制一个不停旋转的三角形基础概念为了一个三角形转动起来，你需要做的是：不断擦除和重绘三角形，并且在每次重绘时轻微的改变其角度。requestAnimationFrame(func)请求浏览器在将来某时刻回调函数func以完成重绘。我们应当在回调函数最后再次发起该请求。参数：func指定将来某时刻调用的函数。函数会接收到一个time参数，用来表明此次调用的时间戳返回值：Requestid传统习
Zmikoo_zyx·2023-10-19 08:31

webGL编程指南 第三章 平移三角形

我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助git代码地址接着上一节接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加，同时传递个给相关变量Document可以按下按键ADSW移动图形letcanvas=document.getElementById('canvas');letgl=canvas.getConte
sogooday·2023-10-19 08:00

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

《WebGL编程指南》读书笔记从事GIS开发，尤其是三维GIS开发在了解基本的GIS知识之外，还需要更多地了解计算机图形学方面的知识。
floating_heart·2023-10-19 08:30

webGL编程指南实战教程

学习路线：如果你是在校大学生，有足够的时间去学习：前端>数学（几何+线性代数）>图形学>webgl>shader>threejs>three.js源码如果你是工作中使用，需要快速出产成品：前端>threeJs
IT飞牛·2023-10-19 08:29

webGL编程指南 第三章 旋转三角形

本案例是三角形的旋转Document可以按下按键ADSW旋转的角度：letcanvas=document.getElementById('canvas');letgl=canvas.getContext('webgl
sogooday·2023-10-19 08:26

cocoscreator 2.4.x解决图片 有锯齿

新建一个antiAlias.js插件文件写入内容cc.macro.ENABLE_WEBGL_ANTIALIAS=true;把纹理的过滤模式设置成biliner然后,把这个文件设置为插件脚本
亮亮同学·2023-10-18 23:41

Unity 发布WebGL 异常 : Uncaught ReferenceError: unityFramework is not defined

浏览器Console报错信息:Unity2020.2.2f1c1编译WebGL版本后浏览器运行卡住.Console里有报错UncaughtReferenceError:unityFrameworkisnotdefined
xxxxxue·2023-10-18 21:46

计算机图形学笔记：从 WebGL 到 WebGPU

WebGL与WebGPUWebGL的基础是OpenGL。OpenGL的初始版本可以追溯到1992年，整个OpenGL的设计是基于状态机模型。状态驱动的OpenGL难以利用今
谷雨の梦·2023-10-18 21:13

WebGL笔记：图形转面的原理与实现

1）回顾WebGL三种面的适应场景TRIANGLES单独三角形TRIANGLE_STRIP三角带TRIANGLE_FAN三角扇备注在实际的引擎开发中，TRIANGLES是用得最多的TRIANGLES的优势是可以绘制任意模型
Wang's Blog·2023-10-18 21:37

Three.js - 实现一个3D地球可视化

3D地球可视化效果3D地球的开发并不复杂，对球形物体进行贴图操作，完成球体自转和月球公转，太阳场景设置等即可上代码{{loadingProcess}}%import{onBeforeUnmount,onMounted,nextTick,ref}from"vue"importmodulesfrom"./modules/index.js";importAnimationsfrom'./utils/an
Li_Ning21·2023-10-18 20:42

three.js学习-智慧城市

前言在前面基础知识（摄像机，渲染器，轨道控制器，坐标轴，场景适配，渲染循环、几何体、材质、光等）有了基础了解后，还需要对着色器（坐标）有一定的学习了解然后就可以做智慧城市的项目了技术：vite+js以下是项目预览1697009690667050页面下面附有git项目地址，自取1.需求实现智慧城市，对城市数据实时监控，对建筑动效标注和预览1、城市模型处理（材质颜色、边线效果、着色器白膜效果、水波纹倒
Best_卡卡·2023-10-18 11:03

vue中使用three.js

首先在html页面中引入页面中exportdefault{data(){return{mesh:null,renderer:null,scene:null,camera:null,};},mounted(){this.init();},methods:{init(){//创建场景this.scene=newTHREE.Scene();//创建相机（第一个参数视野夹角0~180°，第二参数相机大小，
hanhan丶·2023-10-17 19:06

html显示fps,Three.js - 使用stats.js库显示帧数（以及画面渲染时间）

1，stats.js介绍(1)stats.js是一个Three.js开发的辅助库，这个库同样也是Three.js作者开发的。(2)stats.js主要用于检测动画运行时的帧数。
岑秋苑·2023-10-17 13:22

unity（WebGL） 截图拼接并保存本地，下载PDF

截图参考：Unity3D局部截图、全屏截图、带UI截图三种方法_unity截图_野区捕龙为宠的博客-CSDN博客文档下载：UnityWebGL生成doc保存到本地电脑_unitywebgl保存文件_野区捕龙为宠的博客
野区捕龙为宠·2023-10-17 10:53

three.js 模型一面消失和条纹阴影问题

1.在three.js开发中，发现模型从上面看是正常显示，从下面向上看就消失了，通过查找是.side属性影响，代码如下：newFBXLoader().load("xxx.fbx",(object)=>{
daozun·2023-10-17 10:51

WEB 3D框架

http://www.cnblogs.com/dxy1982/archive/2012/08/01/2609582.htmlWebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容
itproject-manager·2023-10-17 06:21

突袭HTML5之WebGL 3D概述

WebGL开启了网页3D渲染的新时代，它允许在canvas中直接渲染3D的内容，而不借助任何插件。
dicang4263·2023-10-17 06:16

MAPTALKS加载I3S

MapTalks介绍MapTalks是由国人独立研发的WebGL三维地图。优点：独立的底层实现保证了拥有更多的性能优化手段;基于PBR的材质系统，让三维地图
polong·2023-10-17 05:48

bim 模型web页面展示_基于HTML5/WebGL技术的BIM模型轻量化Web浏览解决方案

尤其是HTML5/WebGL技术的发展更是在各个行业内引起颠覆性的变化，大家感受最深刻的可能是游戏、电商、O2O等和我们生活息息相关的行业，但这次我想讲一下不受普通人关注但又人人都离不开的建筑业在互联网大潮冲击下的变革
weixin_39889214·2023-10-17 04:36

bim 模型web页面展示_HTML5/WebGL技术BIM模型轻量化Web浏览解决方案

原标题：HTML5/WebGL技术BIM模型轻量化Web浏览解决方案互联网技术的兴起极大地改变了我们的娱乐、生活和生产方式。
weixin_39557199·2023-10-17 04:06

vue中集成cesium和threejs

threejs1.cesium和threejs结合2.vue中集成cesium和threejs2.1vue中集成cesium2.2引入threejs2.3实现效果2.4完整代码1.cesium和threejs结合Three.js
南木元元·2023-10-16 23:33

Three.js - 图形界面工具（lil-gui）（四）

lil-gui为了能够快速地搭建three.js的交互UI，社区就出现了各种UI库，其中lil-gui是three.js社区中非常流行的UI库。选择它是因为语法简单，上手快。
nie-ny·2023-10-16 17:48

Three.js教程：gui.js库(可视化改变三维场景)

推荐：将NSDT场景编辑器加入你的3D工具链其他系列工具：NSDT简石数字孪生gui.js库(可视化改变三维场景)gui.js库(可视化改变三维场景)dat.gui.js说白了就是一个前端js库，对HTML、CSS和JavaScript进行了封装，学习开发的时候，借助dat.gui.js可以快速创建控制三维场景的UI交互界面，你打开课件中案例源码体验一下就能感受到。课程学习dat.gui.js也不
ygtu2018·2023-10-16 17:47

初见物理引擎库Cannon.js：使用dat.gui修改物体属性

1dat.gui简介熟悉Three.js的读者肯定对dat.gui不陌生，通过该工具能够创建一个小型的菜单，如下图，在菜单中能够实时的修改一些变量或执行一些操作：在Three.js官方案例中，也大量的使用了此类工具
syzdev·2023-10-16 17:12

Three.js - 图形界面工具（lil-gui）使用

Three.js-图形界面工具（lil-gui）https://lil-gui.georgealways.com/
林强17726013916·2023-10-16 17:39

【Three.js】第十章 Debug UI 调试界面

10.DebugUI调试界面介绍每个创意项目的一个重要方面是使调试变得容易并调整您的代码。开发人员（您）和从事该项目的其他参与者（如设计师甚至客户）必须能够更改尽可能多的参数。你必须考虑到这一点，以便他们找到完美的颜色、速度、数量等，以获得最佳体验。您甚至可能会得到看起来很棒的意想不到的结果。首先，我们需要一个调试UI。虽然您可以使用HTML/CSS/JS创建自己的调试UI，但已经有多个现成的库：
顽皮宝·2023-10-16 17:09

three.js入门到实战

学习之前示例演示参考资料api查询：http://www.webgl3d.cn/threejs/docs/index.html#代码地址：https://github.com/mrdoob/three.js
我们一起学前端·2023-10-16 11:08

ThreeJS-3D教学十-有宽度的line

webgl中线是没有宽度的，现实的应用中一般做法都是将线拓宽成面来绘制。默认threejs的线宽是无法调节的，需要用有厚度的线THREE.Line2。
天外天-亮·2023-10-16 11:58

ThreeJS-3D教学九-line的绘制

three.js画线比较繁琐一些，我们先展示正常的操作，先看效果图：本案例用到的方法是：LineBasicMaterial和LineSegments。
天外天-亮·2023-10-16 02:32

Unity发布WebGL后跳转页面的问题

Unity发布WebGL后跳转页面的问题最近在做的一个实验平台的项目，需要自己写一个在线的编译器，但是由于WebGL的特殊性，无法在Unity内部实现这个编译器，然后只能房子啊另一个页面上，用页面跳转来实现
Yekura·2023-10-15 23:04

视图平截锥体（view frustum）几何体渲染 -ThreeJS camera例子

视图平截锥体（viewfrustum）几何体渲染threejs中webgl_camera例子中渲染出了视图平截锥体的形状，其实现了frustumgeometry对象用于专门负责viewfrustum几何体数据的生成
绿风烟·2023-10-15 08:07

用 Three.js 创建一个酷炫且真实的地球

接下来我会分步骤讲解，在线示例在数字孪生平台。先添加一个球体我们用threejs中的SphereGeometry来创建球体，给他贴一张地球纹理。letearthGeo=newTHREE.SphereGeometry(10,64,64)letearthMat=newTHREE.MeshStandardMaterial({map:albedoMap,})this.earth=newTHREE.Mesh
sky.....·2023-10-15 01:38

Unity AVPro Video使用和WebGL播放视频流

1.创建MediaPlayer对象。在Hierarchy视图右击Video->MediaPlayer或者选择菜单栏的GameObject菜单，然后选择Video->MediaPlayer。2.创建DisplayuGui对象。在Hierarchy视图右击UI->DisplayuGui或者选择菜单栏的Component菜单AVProVideo->DisplayuGui。3.给DisplayuGui指定
人生不过一瞬间·2023-10-14 20:30

WebGL进阶——走进图形噪声

导语：大自然蕴含着各式各样的纹理，小到细胞菌落分布，大到宇宙星球表面。运用图形噪声，我们可以在3d场景中模拟它们，本文就带大家一起走进万能的图形噪声。概述图形噪声，是计算机图形学中一类随机算法，经常用来模拟自然界中的各种纹理材质，如下图的云、山脉等，都是通过噪声算法模拟出来的。通过不同的噪声算法，作用在物体纹理和材质细节，我们可以模拟不同类型的材质。基础噪声算法一个基础的噪声函数的入参通常是一个点
YoneChen·2023-10-14 14:44

Openlayers加载海量数据之WebGL

Openlayers加载海量数据之WebGLOpenlayers6及以上版本，地图的每个图层都是单独进行渲染的。也就是说有的图层可用Canvas2D渲染，有的图层可以用WebGL渲染。
Aiences·2023-10-14 14:30

three.js项目--在线选车

需求知识点：在上一个项目基础上，在学习光源、材质、gsap、精灵与css2D、坐标需求：1、车身颜色修改2、磨砂、高光切换、同时价格切换3、室内室外切换4、驾驶位、副驾驶、外观多角度观察5、车门的开启、关闭编码：面向对象编程思想单例模式订阅发布模式ps:方便代码迁移复用（技术vite+js）1697008817819086git项目地址https://github.com/geyixia/Onli
Best_卡卡·2023-10-14 09:21

webGl shader的学习记录(二)js 与(glsl语言) OpenGL ES之间如何进行交互？及其如何在js中对vertexShader与fragmentShader进行赋值

再上一个的章节之中我们知道，着色的书写分两个着色器（顶点着色器与片元着色器），从而结合成为一个可以使用的单独使用的着色器的程序。下面我们将会接触到的是，如何使用js与(glsl语言)OpenGLES之间进行交互。在了解两者之间如何通讯的时候，我们需要了解一些定义。这些定义出来的数据，可以是的glsl与js进行交互。attribute变量：attribute变量是只能在vertexShader中使用
sogooday·2023-10-14 09:59

webGL编程指南 第三章 绘制四角形.helloQuadjs（加餐）

我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助git代码地址接着上一节接着做使用缓冲区赋值。本节中我们还是使用4个顶点，放在一个数组中。然后去获取缓冲区中的数据，同时绘制矩形在绘制的时候我们给它添加上颜色。下面是代码Documentletcanvas=document.getElementById('canvas');let
sogooday·2023-10-14 09:29

webGl shader的学习记录(一) 在canvas的中心画出一个红点 点图元

笔者也在学习如何写出shader下面是自己的想法希望对大家有用其实在webGl写shader的时候，我们可以分将整体分为几个部分第一部分是顶点着色器1，建立顶点着色的相关代码，2，创建顶点着色器，并将顶点着色器的代码
sogooday·2023-10-14 09:29

webGL编程指南 第二章 helloPint.js

我会持续更新关于wegl的编程指南中的代码。git代码地址：sogooday当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助效果如下下面是代码Document/*在这里需要注意的是在写vertexShaderSource与fragmentShaderSource因为是没有文本提示的，很容易写错的*///订单着色器letvertexShaderSource=`voidma
sogooday·2023-10-14 09:58

WebGL编程指南学习中整体的理解

在学习webgl的时候，我们大概可以将代码分为5各部分写opengles的代码顶点着色器与片元着色器（主要处理的部分）使用webgl的api将顶点着色器与片元着色器传递给opengles使用js作为桥梁
sogooday·2023-10-14 09:58

webGL编程指南 第三章 multiPoints.js

希望能给后来学习的一些帮助git代码地址https://github.com/soGooday/webPlan/blob/main/webGL/webGl%E7%BC%96%E7%A8%8B%E6%8C
sogooday·2023-10-14 09:58

关于webl中TRIANGLES_STRIP

webgl中的三角形的绘制有三种方法分别是:TRIANGLES：每三个定点决定一个三角形例如[012][3,4,5][5,6,7]顶点数与三角形是n:n/3的关系TRIANGLES_FAN：第0个定点是多所有三角形共享的
sogooday·2023-10-14 09:58

webGl shader的学习记录(五)：如何画线段

今天学习一下如何使用webgl画一条线段letvertexShaderSource=`//浮点数设置为中等精度precisionmediumpfloat;//接收JavaScript传递过来的点的坐标（
sogooday·2023-10-14 09:28

webGl shader的学习记录(六)：如何画出一个渐变色填充的矩形

其实将两个两个三角形合并一下，就出现了。一个矩形使用两种方式一个是两个buffer一个是单一的bufferglcl代码//浮点数设置为中等精度precisionmediumpfloat;//接收JavaScript传递过来的点的坐标（X,Y）attributevec2a_Position;//接收canvas的尺寸。attributevec2a_Screen_Size;//接收JavaScript
sogooday·2023-10-14 09:28

webGl shader的学习记录(四)：如何与人互动绘制多个三角形。

正在这一章节中我们将会学习到如何使用鼠标创造多个三角形，从而实现互动老规矩首先我们需要先处理一下顶点着色器与片元着色器letvertexShaderSource=`//设置浮点数精度为中等精度precisionmediumpfloat;//接收顶点坐标(x,y)attributevec2a_Position;//接收canvas的尺寸(width,height)attributevec2a_Scr
sogooday·2023-10-14 09:27
上一页 17 18 19 20 21 22 23 24 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他