【WebGL】Three.js

webGL入门（一）

渲染管线Webgl的渲染依赖底层GPU的渲染能力。所以WEBGL渲染流程和GPU内部的渲染管线是相符的。渲染管线的作用是将3D模型转换为2维图像。
火海妖·2023-11-02 07:05

WEBGL入门的基础介绍

目录WebGL基本介绍概述WebGL的特性图形硬件的介绍WebGL开发入门WebGL绘制图形抽象过程基于WebGL封装的框架WebGL坐标系基础视变换投影变换视口变换实例演示（使用ThreeJS)光照光照类型光照的原理
Amesteur·2023-11-02 07:05

webgl入门-基础三角形绘制

背景最近工作上频繁接触webgl，因为不熟悉每每看到shader中的语法总感觉脑袋大，所以打算开始从零学习一下webgl，文章只做记录学习历程，那就直接开始吧！开始可以配合着这个文章食用。
温柔先生·2023-11-02 07:34

渲染系统中MRT和RTT的应用组合(WEBGL2 GLSL ES3实现)

我的渲染系统兼容(WebGL1GLSLES2)使用方式一致，请见:渲染系统中MRT和RT
含影·2023-11-02 05:42

3D空间画线演示(这里使用webgl 所以不能设置线宽)

Demo:Rendering&Art如果直接用opengl,绘制线更方便,webgl只是使用gles的一些api，而且各个浏览器支持不一样。
含影·2023-11-02 05:41

WEBGL_draw_buffers RENDER WARNING: texture bound to texture unit 0 is not..错误解决方案

今天在调整渲染系统中的一个MRT机制，结果不小心改错了逻辑，运行报错信息：[.WebGL-00000000051B4190]RENDERWARNING:textureboundtotextureunit0isnotrenderable.Itmaybenon-power-of
含影·2023-11-02 05:11

3D引擎系统对于分布式运行时的支持

WebGL环境Demo:http://www.artvily.com/renderCase?
含影·2023-11-02 05:11

解决 Failed to execute ‘texSubImage2D‘ on ‘WebGL2RenderingContext‘: Tainted canvases may not be loaded

报这样的错误：caughtDOMException:Failedtoexecute'texSubImage2D'on'WebGL2RenderingContext':Taintedcanvasesmaynotbeloaded
含影·2023-11-02 05:40

GL_INVALID_OPERATION: Feedback loop formed between Framebuffer and active Texture 错误

Opengl/webgl(opengles)环境下FBO使用不当可能出现如下错误:GL_INVALID_OPERATION:FeedbackloopformedbetweenFramebufferandactiveTexture
含影·2023-11-02 05:10

WebGL 和 WebGPU[2] - 初始化篇

文章目录1.获取高频操作对象1.1WebGL获取上下文对象1.2WebGPU获取设备对象2.初始化参数的异同2.1WebGL2.2WebGPU分两步2.2.1GPUAdapter2.2.2GPUDevice3
岭南灯火·2023-11-02 05:05

Three.js自发光贴图 .emissiveMap

Three.js自发光贴图.emissiveMapWebGL/Threejs技术博客：查看更多文章和实战案例在Three.js材质中，和颜色贴图属性.map对应的是颜色属性.color,和高光贴图属性.
郭隆邦技术博客·2023-11-02 01:05

【js&threeJS】入门three，并实现全景看房案例，附带全码

序幕：首先附上官方文档以及案例库地址：three.jsdocsthree.jsexamples全景图切割工具：HDRItoCubeMap前置了解：Three.js是一个用于创建和渲染3D图形的JavaScript
来自湖南的阿晨·2023-11-01 17:36

Three.js贴图效果一览

纹理贴图是Three.js一个很重要的内容，掌握了纹理贴图可以让3d效果产生质的飞跃。那现在就让我们进入正题吧！go!go!go!贴图的重要性如果没有纹理贴图，我们看到的3d物体将会是很糟糕的！
柳杉前端·2023-11-01 17:04

threejs可视化快速入门指北（附3D资源导航）

前言当你开始思考你应该如何学习WebGL和Three.js的时候，相信你至少对相关的关键词了解过了，希望通过WebGL或Three.js实现你想要的Web3D功能，也许你也会去思考通过WebGL或Three.js
懒人码农·2023-11-01 17:32

React Three.js 增加hdr环境贴图和背景图片的方法

ReactThree.js增加hdr环境贴图和背景图片的方法：importReact,{Suspense,useEffect}from'react'import{Canvas,useThree,useLoader}from'@react-three/fiber'import*asTHREEfrom'three'import{OrbitControls}from'@react-three/drei'
VRlook·2023-11-01 17:59

HDRI贴图下载及Three.js利用

最令人兴奋的项目之一是在Threejs中添加HDRI背景。HDRI图像是从房间内部或花园、丛林或山脉等开放环境等场景中以360度捕获的。你可以自己创建任何这些图像，但这不是本教程的主题。相反，我们将从网站获取这些图像之一，并使用轨道控件，让用户能够转动物体并以360度查看所有内容。我们还可以将物体添加到场景中并赋予它们颜色或增加它们的金属度并降低它们的粗糙度以成为球形镜子。推荐：用NSDT编辑器快
新缸中之脑·2023-11-01 17:56

webGL编程指南 第五章 MultiAttributeSize_interleaved.js

我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助git代码地址：空在上一章节中我们使用的是2个buffer，向着色器中传递数据，本章节中我们学习使用一个buffer传递数据。Documentletcanvas=document.getElementById('canvas');letgl=canvas.getContext('
sogooday·2023-11-01 17:21

webGL编程指南 第五章 MultiAttributeColorjs.js

我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助git代码地址：空上一章节中只要使用了同一个buffer传递，位置与点的大小。本案例中我们将学习新的varying。次变量可以对顶点进行赋值Documentletcanvas=document.getElementById('canvas');letgl=canvas.getCo
sogooday·2023-11-01 17:21

webGL编程指南 第五章 TexturedQuad_Clamp_Mirror

我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助git代码地址：空上一章节中我们学习了如何使用varyting变量绘制图片，本章节，我们学习texParameteri的使用Document#canvas{width:100vw;height:100vw;border:1pxsolidgreenyellow;}!!!!!需要指出
sogooday·2023-11-01 17:21

webGL编程指南 第五章 TexturedQuad

我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助git代码地址：空上一章节中我们使用了varying传递，数据，这次我们绘制一张图片Document#canvas{width:100vw;height:100vw;border:1pxsolidgreenyellow;}!!!!!需要指出的是要选择当前文件夹下的sky.jpg!
sogooday·2023-11-01 17:49

unity 时间戳 相关用法

0.webGL平台时间转换DateTimenow=DateTime.Now.AddMinutes(-15);stringformattedTime=now.ToString("yyyy年M月d日HH:mm
野区捕龙为宠·2023-11-01 11:53

视频教程-WebGL 可视化3D绘图框架：Three.js 零基础上手实战-其他

WebGL可视化3D绘图框架：Three.js零基础上手实战网名风舞烟，中国科技大学计算机专业、微软认证讲师（MCE）、微软数据分析讲师。
weixin_33525450·2023-11-01 08:33

DreamTexture.js - 基于稳定扩散的3D模型自动纹理化开发包

DreamTexture.js是面向three.js开发者的3D模型纹理自动生成与设置开发包，可以为webGL应用增加3D模型的快速自动纹理化能力，官方下载地址：DreamTexture.js自动纹理化开发包
新缸中之脑·2023-11-01 08:01

和我一起学 Three.js【初级篇】：3. 掌握摄影机

《和我一起学Three.js【初级篇】：0.总论》《和我一起学Three.js【初级篇】：1.搭建3D场景》《和我一起学Three.js【初级篇】：2.掌握几何体》您
libinfs·2023-11-01 08:59

和我一起学 Three.js【初级篇】：4. 掌握纹理

本篇文章共5953字，最近更新于2023年04月19日。感谢您一路跟随我来到这里！截止目前为止，我们应该有能力搭建一个3D场景，在其中添加各种官方提供的几何体，并通过使用控制器，调整摄影机位置与几何体交互。这一切看起来都还不错，但未免有些单调。所幸本章节以及下一节的内容将让我们的3D世界变得丰富多彩。本章节我们会谈及Web3D世界一个非常常见的概念：「纹理」（Texture），它将会和下一章节的「
libinfs·2023-11-01 08:59

Three.js编辑器editor使用详解

http://t.csdn.cn/5b2dMeditor里边渲染的模型可以直接在项目中使用，可以按实际情况调整模型大小添加灯光等
printf_824·2023-11-01 08:59

three.js加vue2实现.glb渲染，旋转元素，放大缩小，以及元素点击事件

import*asTHREEfrom"three";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader";import{OrbitControls}from"three/examples/jsm/controls/OrbitControls";exportdefault{data(){return{camera:{},rende
printf_824·2023-11-01 08:28

和我一起学 Three.js【初级篇】：1. 搭建 3D 场景

《和我一起学Three.js【初级篇】：0.总论》您当前在这里《和我一起学Three.js【初级篇】：1.搭建3D场景》《和我一起学Three.js【初级篇】：2.掌
libinfs·2023-11-01 08:58

和我一起学 Three.js 【初级篇】：2. 掌握几何体

《和我一起学Three.js【初级篇】：0.总论》《和我一起学Three.js【初级篇】：1.搭建3D场景》您当前在这里《和我一起学Three.js【初级篇】：2.掌
libinfs·2023-11-01 08:58

ThingJS 和three.js对比开发太空漫游技术！3D 可视化

Three.js是更为底层的3D渲染器，提供各式各样的3D开发概念，例如材质、网格
ThingJS_小锘·2023-11-01 08:57

面向Three.js开发者的3D自动纹理化开发包

DreamTexture.js是面向three.js开发者的3D模型纹理自动生成与设置开发包，可以为webGL应用增加3D模型的快速自动纹理化能力。图一为原始模型,图二图三为贴图后的模型。
ygtu2018·2023-11-01 08:26

基于 HTML5 WebGL 的 3D 仓储管理系统

仓储管理系统（WMS）是一个实时的计算机软件系统，它能够按照运作的业务规则和运算法则，对信息、资源、行为、存货和分销运作进行更完美地管理，使其最大化满足有效产出和精确性的要求。从财务软件、进销存软件CIMS，从MRP、MRPII到ERP，代表了中国企业从粗放型管理走向集约管理的要求，竞争的激烈和对成本的要求使得管理对象表现为：整和上游、企业本身、下游一体化供应链的信息和资源。而仓库，尤其是制造业中
图扑软件·2023-11-01 05:25

图扑 Web 可视化引擎在仿真分析领域的应用

图扑软件是基于WebGL的三维可视化引擎，在WebGL基础上封装了基本的三维模型创建、呈现的API。同时还封
图扑软件·2023-11-01 05:23

基于 HTML5 WebGL 的 3D 工控裙房系统

前言工业物联网在中国的发展如火如荼，网络基础设施建设，以及工业升级的迫切需要都为工业物联网发展提供了很大的机遇。中国工业物联网企业目前呈现两种发展形式并存状况：一方面是大型通讯、IT企业的布局；一方面是传统工业软件和工业网络企业自发地延伸，由产品提供商发展为方案供应商。什么叫做裙房？裙房是指附属于主高楼并与之连成一体的低层建筑。本文的Demo是针对于裙房做的，但是在工业监控系统中有很多雷同的部分，
图扑软件·2023-11-01 05:53

基于 HTML5 + WebGL 的太阳系 3D 展示系统

前言近年来随着引力波的发现、黑洞照片的拍摄、火星上存在水的证据发现等科学上的突破，以及文学影视作品中诸如《三体》、《流浪地球》、《星际穿越》等的传播普及，宇宙空间中那些原本遥不可及的事物离我们越来越近，人们对未知文明的关注和对宇宙空间的好奇达到了前所未有的高度。站在更高的立足点上，作为人类这个物种中的一员，我们理所应当对我们生活的星球、所在的太阳系有一定的认识，对8大行星各自的运行轨道、质量、资源
图扑软件·2023-11-01 05:53

基于 HTML5 WebGL 的 3D 风机可视化系统

前言许多世纪以来，风力机同水力机械一样，作为动力源替代人力、畜力，对生产力的发展发挥过重要作用。近代机电动力的广泛应用以及二十世纪50年代中东油田的发现，使风机发电机的发展缓慢下来。70年代初期，由于“石油危机”，出现了能源紧张的问题，人们认识到常规矿物能源供应的不稳定性和有限性，于是寻求清洁的可再生能源遂成为现代世界的一个重要课题。风能作为可再生的、无污染的自然能源又重新引起了人们重视。现在我希
图扑软件·2023-11-01 05:53

WebGL2.0从入门到精通-4、着色器与渲染管线

WebGL2.0中渲染管线实质上指的是一系列的绘制过程。向程序中输入待渲染3D物体的相关描述信息数据，经过渲染管线处理后，输出的是一帧想要的图像。
碳学长·2023-11-01 03:29

WebGL

WebGLWebGL是一种JavaScriptAPI，用于在任何兼容的Web浏览器中渲染交互式2D和3D图形。
肖雨San·2023-11-01 03:55

OpenLayers入门，OpenLayers如何加载百万数据量的GeoJson点数据并叠加到webgl渲染图层上，百万海量点数据叠加不卡

入门，OpenLayers如何加载GeoJson数据并叠加到OpenLayers矢量图层上》，我们讲解了少量数据加载并叠加到OpenLayers矢量图层上，如果数量特别大，浏览器就会很卡，所以需要用到webgl
汤姆猫不是猫·2023-11-01 01:37

OpenLayers入门，使用webgl图层叠加超过一百万图片到地图，解决叠加超大数据量图片导致浏览器卡住变慢的问题

专栏目录：OpenLayers入门教程汇总目录前言上一章中OpenLayers入门，使用webgl图层叠加大量点要素，解决OpenLayers地图中叠加大量点导致浏览器卡住变慢的问题已经讲了如何地图中如何添加大量点到
汤姆猫不是猫·2023-11-01 01:04

OpenLayers入门，使用webgl图层叠加超大量Point点要素，解决叠加超过一百万数据量点位导致浏览器卡住变慢的问题

OpenLayers官方是推荐使用webgl图层方式对这种大量点渲染进行优化。当然webgl图层并不是没有缺点，使用webgl图层优点是渲染大量点很快，缺点就是style风格
汤姆猫不是猫·2023-11-01 01:33

Cesium笔记(0)：Cesium简介和本地运行

一、Cesium介绍是国外一个基于JavaScript编写的使用WebGL的地图引擎开源程序，可以免费用于商业和非商业二、特点支持3D,2D,2.5D形式的地图展示可以自行绘制图形，高亮区域，并提供良好的触摸支持支持绝大多数的浏览器和
简cere·2023-10-31 22:42

【vue2.x】新手如何快速用vue导入GLTFLoader模型

Three.js支持包括.obj、.gltf等类型的模型结构。
嚣张农民·2023-10-31 16:04

前端常用类库资源

Javascript库Particles.js — 一个用来在web中创建炫酷的浮动粒子的库Three.js — 一个用来在web中创建3d物体和3d空间的库Fullpage.js— 快速实现全屏滚动特性
代码技巧·2023-10-31 15:33

图形编程周刊(2023.001)

图形编程周刊(2023.001)key:webgpuwebgl3dwebgisthree.jscesium.js这里是力博荣(Libaro)三维可视化带来的图形编程周刊,争取每周五发布。
DSLMing·2023-10-31 14:17

Three.js - 光源（九）

光源为了模拟物体在不同情况下的样式，three.js中提供了多种光源。需要注意光源和材质是相互的，简单来说物体表面的颜色是光源和材质的乘积。在材质中的基础材质是不受灯光影响的。
nie-ny·2023-10-31 09:16

Three.js相机对象.up属性

Threejs相机对象Camera的.up属性表示相机对象的上方向，如果你有一定图形学基础，你可以很好的理解，如果没有图形学基础也没关系，你可以在threejs代码中更改.up的属性值，查看threejs渲染结果有什么变化。.up属性默认值是newTHREE.Vector3(0,1,0),沿着y轴朝上，你可以使用下面代码看渲染效果绿色y轴数值向上，你可以改变.up属性的值，查看渲染结果变化。cam
汉武大帝··2023-10-31 09:46

Vue引入three.js实现粒子波浪特效

效果实现废话不多说，直接上代码，直接复制使用。但在使用代码前，需要下载一些粒子波浪特效的库，直接执行下面命令即可。npminstallthree-Snpminstallnode-sassnpminstallsass-loader代码import*asTHREEfrom"three";//importStatsfrom"./stats.module";import{onMounted}from"vu
润火·2023-10-31 09:45

Three.js平面接收不到阴影

首先确认渲染器有无开启阴影贴图，默认是false//创建渲染器varrenderer=newTHREE.WebGLRenderer()//设置渲染物体阴影renderer.shadowMap.enabled
hongsir_12·2023-10-31 09:14

Three 之 three.js （webgl）透视视角和正交视角，以及透视转正交的视角切换

Three之three.js（webgl）透视视角和正交视角，以及透视转正交的视角切换目录Three之three.js（webgl）透视视角和正交视角，以及透视转正交的视角切换一、简单介绍二、实现原理三
仙魁XAN·2023-10-31 09:44
上一页 14 15 16 17 18 19 20 21 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他