threejs(webgl)

【《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

1. threejs源码阅读——math/vector

math文件夹结构math文件夹内的所有内容都是我们在threejs中非常常用的，尤其是向量、矩阵、四元数和一些基本的数学运算。所以我们第一个选择math文件夹来进行解读。
吃货传说·2023-10-17 21:17

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

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

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

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

threejs中dat.gui的使用详细介绍

一、引入vue中引入：import{GUI}from'three/examples/jsm/libs/lil-gui.module.min'二、创建实例constgui=
慢步者_rambler·2023-10-16 17:44

Threejs进阶之三：通过GUI修改gltf模型(摩托车)颜色

上一节我们对摩托车的场景进行了优化，添加了聚光灯及阴影等效果，这一节我们继续对摩托车场景进行优化，我们通过GUI来控制摩托车各个部位颜色的修改先看下修改后的最终效果引入GUI在motor3d.js中通过import引入GUI插件import{GUI}from'three/examples/jsm/libs/lil-gui.module.min.js'//引入GUImotor03.gltf的组成在对
九仞山·2023-10-16 17:42

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

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

threejs实例（三）

纹理一般是指我们常见的在一些第三方程序中创建的图像，如Photoshop或GIMP。需要做的就是创建一个TextureLoader。调用它的load方法，同时传入图像的URL，并将材质的map属性设置为该方法的返回值，而不是设置它的color属性。注意，使用的是MeshBasicMaterial，所以没有必要增加。但需要注意的是，并不是所有的几何体类型都支持多种材质。BoxGeometry和Box
prince132·2023-10-16 17:09

threejs创建GUI参数的时候，明明写了默认值，以及滑块，但不出现滑块

constgui=newGUI();letparams={far:'2000'}constfolder=gui.addFolder('相机参数');folder.add(params,'far',0,2000,10);我照着官方案例写的，但是写的时候下意识加了单引号，导致把数字类型变成了字符串类型，从而不被识别，出现了只显示2000这个数字而没有对应滑块的情况。前端编程就是这点麻烦，有很多时候出现
dalaomanzou·2023-10-16 17:07

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。1、材质Three.js中提供了两种线条材质：LineDashedMaterialconstmaterial=newTHREE.LineDashedMaterial({color:0xffffff,linewidth:1,scale:1,dashSi
天外天-亮·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来创建球体，给他贴一张地球纹理。
sky.....·2023-10-15 01:38

落地成盒？前端必收藏的干货：threeeJs插件Gui添加盒子功能

各位宝宝们,时隔这么久,终于又要继续我们的threeJs教程啦!我们这次还是学习我们threejs插件Gui。在之前教程中,我们学习了Gui的基本使用,这节课我们学习使用Gui插件添加盒子功能。
源码时代官方·2023-10-14 21:03

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

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

webGl shader的学习记录(三)：怎么样去画出来一个三角形

在这章节中我们需要绘制一个静态的三角形首先我们依旧是现需要写两个顶点着色器的素材与顶点做色器的素材。就是下面这段代码//顶点着色器letvertexShaderSource=`precisionmediumpfloat;attributevec2a_Position;voidmain(){gl_Position=vec4(a_Position,0,1);}`//片元着色器letfragmentSh
sogooday·2023-10-14 09:57

webGL编程指南 第三章 绘制四角形.helloQuadjs

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

CSS 炫酷文本过渡动画

今天分享一个炫酷的文本过渡动画效果，如下面GIF所示，曾经是否有见过这种动画呢，想想是不是感觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码，快来瞧瞧看吧
南城FE·2023-10-13 20:44

Three.js第一个小栗子以及代码结构。

这一章，是copy的WebGL中文网(为图方便，以下用中文网代替)的内容。再加上自己的一些理解，当然不是很多。
风筝啊·2023-10-13 15:10

Three.js实现光照阴影

1.renderer设置首先我们需要告诉渲染器我们需要阴影效果：renderer.shadowMap.enabled=true;更多详细内容可以查看WebGLRenderer的s
travelclover·2023-10-13 15:05

threeJS-Helper14-SpotLightHelperAndCameraHelper(聚光灯显示和相机显示助手)

博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！本章节学习的内容可以从的官方文档中找到。
webgl_谷子·2023-10-13 14:13

threeJS-Helper04-CameraHelper（相机助手）

博主的案例并不难，只是为了更好的给想入门threeJS的同学一点点经验！！！！！
webgl_谷子·2023-10-13 14:12

Three.js 从入门到精通 - 笔记总结

Three.js目录文章目录前言推荐阅读`HTML`引入`Three.js`引擎1.3D3D3D场景引入引擎案例源码立方体球体代码解释程序的结构场景-相机-渲染器对象、方法和属性WebGL封装2.旋转动画
莫兮是我·2023-10-13 13:41

Three.js入门

设置材质效果半透明效果材质常见属性材质类型光照效果设置常见光源类型顶点位置数据解析渲染自定义几何体点模型线模型顶点颜色数据插值计算渐变色之颜色插值访问几何体对象的数据几何体的旋转、缩放、平移变换参考Three.js教程(webgl3d.cn
程序员_yw·2023-10-13 13:09

THREEJS基础入门

大家好啊，又是长时间没更新，最近在学习threejs，发现很好玩，于是大概学习了一下什么是threejs，很简单，你将它理解成three+js就可以了。
Ss、、帅海·2023-10-13 13:37
上一页 19 20 21 22 23 24 25 26 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他