【WebGL】Three.js 第15页

WebGL、canvas、svg

文章目录WebGL、canvas、svg面试题canvas面试题canvas位图和svg矢量图的区别canvas的绘图原理canvas.style.width和canvas.width区别WebGL基本概念着色器获取数据的四种方式案例

nuise_·2023-11-19 05:06

使用canvas 和 webgl2制作界面系统（一）

1canvas基础2webgl2基础画如下的三角形2.1使用getcontextwebgl2webgl2必须使用webgl2字符串vargl=canvas.getContext("webgl2");if

qianbo_insist·2023-11-19 05:05

canvas 和 webgl 有什么区别？

文章目录前言渲染方式功能和复杂性编程难度总结后言前言helloworld欢迎来到前端的新世界当前文章系列专栏：前端面试‍博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)感谢大家支持！您的观看就是作者创作的动力渲染方式Canvas：Canvas使用2D渲染上下文（2Dcontext）来绘制图形和图像。它基于像素的绘图系统，通过JavaScript脚本

鋜斗·2023-11-19 04:59

cesium1.102.0及以上版本自定义GLSL报“texture2D‘ : no matching overloaded function found”错误

问题所在cesium1.102.0以上版本将不再使用webGL1进行上下文渲染版本改为webgl2版本，导致不在兼容‘texture2D’。

GIS-CL·2023-11-19 02:58

three.js相机调用reset方法复原但无法完全复原

目录一、问题二、原因三、总结一、问题需求：经过多次旋转、平移等变换后，希望恢复到初次渲染的角度、位置。结果发现：three.jsoribtControls调用一次reset方法无法完全复原;需要多次调用后才能复原。this.orbitControls.reset()二、原因1.设置了阻尼系数：注释掉阻尼系数就好了//this.cameraControls.enableDamping=true;//

琹箐·2023-11-18 23:13

cesium 隐藏entity_Cesium 上手不完全指北

产品基于WebGL技术，可以使用CesiumJS创建虚拟场景的3D地理信息平台。其目标是用于创建以基于Web的地图动态数据可视化。在提升平台的性能、准确率、虚拟化能力、易

weixin_39638623·2023-11-17 12:10

Cesium初学笔记总结

2.计算机图形学方向：WebGL深入，基于Cesium的可视化定制（视阈、水淹、水面、热力图，流

Henrik698·2023-11-17 12:04

实时云渲染与带宽探讨：解密数字新基建中的网络技术

部署方案也由最初的本地部署，发展到webGL本地+网络方式再到最新的实时云渲染技术。本文将深入探讨实时云渲染技术方案对于带宽的要求条件，解答一些读者在点量实时云渲染技术方案中关于带宽的常见疑问。

点量云实时渲染-小芹·2023-11-17 11:12

开源小游戏app源码和H5小游戏源码大全

也就是说，小程序游戏与HTML5程序游戏紧密相关，面向HTML5程序游戏开发者——很大程度上采用了WebGL、JavaScript等HTML5技术，将HTML5程序游戏转为微信小程序游戏的工作量降到最低

gdcame·2023-11-17 07:30

第七节：学习使用Geometry几何图形【Three.js整理】

Geometry几何，是three.js中3D模型的骨架，在three.js中内置了一些简单的Geometry，红框部分是本节课要讲的。

web搅拌机·2023-11-17 00:23

Three.js - 使用着色器材质绘制立方体（三十）

进一步学习后就会知道，three.js就是对GLSL语言进行了多方面的封装，下面我们就使用着色器语言来绘制一个正方体。开始绘制绘制一个有着色器材质的几何体学习import*asTHREEfrom'.

nie-ny·2023-11-16 12:27

Three.js - 着色器材质（二十七）

简介我们知道three.js是对webGL的封装，不需要我们操作复杂的着色器。有时候需求要我们实现一些十分丰富的图像，比如线条的流光动效等。

nie-ny·2023-11-16 12:26

Three.js - 着色器材质使用变量（二十八）

简介上一节我们了解了着色器材质，这节我们了解如何使用着色器。着色器变量着色器中有三种变量：Uniforms全局变量。可以传入顶点着色器，也可以传入片元着色器，在整个渲染过程中保持不变的变量。Varyings是从顶点着色器传递到片元着色器的变量。我们需要确保在两个着色器中变量的类型和命名完全一致。Attributes与每个顶点关联的变量。例如，顶点位置，法线和顶点颜色都是存储在attributes中

nie-ny·2023-11-16 12:26

Three.js的着色器材质(ShaderMaterial)

ShaderMaterial简介：http://www.webgl3d.cn/threejs/docs/index.html#api/zh/materials/ShaderMaterialThree.js

GIS技术杂谈·2023-11-16 12:24

Three.js-着色器学习资源推荐（glsl）

目录1.TheBookofShaders2.WebGL零基础入门教程1.TheBookofShaders这是一本关于FragmentShaders（片段着色器）的入门指南，它将一步一步地带你领略其中的纷繁与抽象

HM-hhxx！·2023-11-16 12:21

threejs(13)-着色器设置点材质

着色器材质内置变量three.js着色器的内置变量，分别是gl_PointSize：在点渲染模式中，控制方形点区域渲染像素大小（注意这里是像素大小，而不是three.js单位，因此在移动相机是，所看到该点在屏幕中的大小不变

拾荒李·2023-11-16 12:49

Unity跨平台开发指南(PC/VR/Android/WebGL)

通常我在进行不同平台的设置时会基于以下几点：1：创建、开发、打包时我们通常针对Player和Quality设置进行质量的设定2：在不同平台上运行时，有不同的平台包体大小，加载方式的限定，测试、打包上的区别，帧率稳定603：代码封装上的区别，特别针对单一项目转为不同不同平台的问题4：输入系统的不同一、PCPC硬件相对比较强大，所以对于内存大小，贴图质量，模型面数的限制没有其他平台那么大，PC和其他平

Future_404·2023-11-15 18:07

Unity同项目跨平台时代码的封装

开发一个项目的多个目标平台，比如你一个项目既要开发PC，还要开发VR和移动端和WebGL，会在代码方面有一定差别，但是也有共用性，所以在开发之前需要考虑好这个问题，现在我们针对我即将做的项目来做一些分析

Future_404·2023-11-15 18:37

Arction跨平台图表控件JavaScript图表库LightningChart JS交互示例：烛台图

高性能JavascriptWebGL图表LightningChart®JS具有出色的运行性能，能同时输入十个实时数据源，极速输出10个百万点的图表。GPU加速和WebGL渲

Tech_Observer·2023-11-15 09:23

如何改进多图表展示：LightningChart JS v5

ImproveMulti-ChartDisplayPerformanceNovember14,2023LightningChartJSv5.0introducesWebGLcontextsharingtoboostperformancewhendisplayingmultiplecharts.LightningChartJSisahigh-performanceJavaScriptcharting

sdk大全·2023-11-15 09:48

cesium three性能比较_一步步带你实现web全景看房——three.js

我们直接从three.js入手。下面我们从0开始来摸索一下3d世界1.基本概念在THREEjs中，渲染一个3d世界的必要因素是场景(scene)、相机(camera)、渲染器(renderer)。

weixin_39926639·2023-11-15 04:52

cesium版本之间如何兼容_【JS】cesium与three.js 结合的栗子，结合了一下网友们的栗子，解决了three.js 高版本模型出不来的问题...

废话不多说先上图下面是源代码html>content=”width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no”>Tools-12CesiumThreejsvarthree={renderer:null,camera:null,scene:null};functionpageload()

赤衿·2023-11-15 04:52

01.Cesium和Three.js的初步认识

一、Threejs和Cesium的对比相同点：都是基于WebGL技术开发的Javascript库，用于在浏览器中创建和显示动画3D计算机图形。

杨航斌·2023-11-15 04:52

Cesium+Three.js体验：优化BIM模型展示效果

前面我们介绍了5个Cesium和Three.js结合的方案（《Cesium和Three.js结合的5个方案》），其中深度融合方案实现难度大，今天我们通过一次BIM模型展示效果调优过程，来窥探一下这个方案的具体优势

三维网格·2023-11-15 04:15

Cesium和Three.js的初步认识

一、Threejs和Cesium的对比相同点：都是基于WebGL技术开发的Javascript库，用于在浏览器中创建和显示动画3D计算机图形。

小道士写程序·2023-11-15 04:15

Vue3 + Three.js + gltf-pipeline大型园区场景渲染与3D业务

在非使用unity作为3D渲染方案的前提下，对与目前web开发者比较友好的除了canvas场景需要的2Dbabylon.js，fabric.js,Three.js是目前针对于jsWeb用户最直接且比较友好的

Eirice·2023-11-14 15:09

threejs太阳系（源码加相关素材）

目录前言效果预览图完整代码html部分js部分模块aa前言Three.js是一款基于原生WebGL封装通用Web3D引擎，在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS

小姚学前端·2023-11-14 10:10

uniapp 本身就是一个坑，里面还有无数的小坑

遇到的那些坑初始canvas无法获取webgl的内容，需要自己用js新建一个dom，再用这个canvas去获取webgl的内容生命周期跟闹着玩一样，有些不生效，这种不确定性简直让人抓狂：onLoado

十月ooOO·2023-11-14 03:19

Three.js——基于原生WebGL封装运行的三维引擎

文章目录前言一、什么是WebGL？

骆骆爱学习·2023-11-12 22:00

OpenGLES 入门简介

OpenGLforEmbededSystem）是OpenGL（OpenGraphicsLibrary）的精简子集，是以手持和嵌入式设备为目标的高级3D图形API，如现在火爆的智能手机，支持桌面系统，还是浏览器3D图形标准WebGL

LceChan·2023-11-12 21:18

canvas webGL SVG 比较

u010513603/article/details/80351569实际使用：https://www.cnblogs.com/best/p/6107565.html概要：Canvas位图，是需要自己画点的白板；WebGL3

NRlovestudy·2023-11-12 02:20

Three.js提供了多种类型的灯光

Three.js提供了多种类型的灯光，包括环境光、点光源、平行光源和聚光灯。这些灯光可以用来照亮场景中的物体，使其看起来更加真实。

小道士写程序·2023-11-11 18:14

Three.js之渲染器和前端UI界面

参考资料three.jsCanvas画布布局…模型加载进度条知识点注：基于Three.jsv0.155.0three.jsCanvas画布布局UI交互界面与Canvas画布叠加UI交互按钮与3D场景交互Three.js

开心就是最好·2023-11-11 15:30

vue+threejs加载展示3d模型文件注意事项

可以看郭大佬的中文教程http://www.yanhuangxueyuan.com/Three.js/千万不要把希望寄托在随便找到的野博客（我开始就是想图省事拿来人家的用，明明看着一摸一样，可就是各种奇葩报错

txlfreedom·2023-11-11 15:19

three.js加载GLTF格式模型(vue中使用three.js58)

加载GLTF格式模型1.demo效果2.实现要点2.1GLTF模型放置路径2.2GLTF格式说明2.3加载GLTF模型3.demo代码1.demo效果如上图，该demo通过GLTFLoader加载了GLTF格式的模型，并呈现在页面中2.实现要点2.1GLTF模型放置路径vue中加载文件时默认的路径为public下，所以需要加载的文件放在该路径下，同时在vue的data属性中创建变量publicPa

点燃火柴·2023-11-11 15:49

vue使用three.js加载.FBX模型文件

1.需要安装的依赖//three依赖yarnaddthree//tween.js依赖yarnadd@tweenjs/tween.js2.封装组件draw.vue放在components中import*asTHREEfrom'three';//三维import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js';//控制器

这名字真不好起·2023-11-11 15:47

Blender--》点线面操作及其面操作的详解

接下来我会在three.js专栏中分享关于3D建模知识的文章，如果学习three朋友并且想了解和学习3D建模，欢迎关注本专栏，关于这款3D建模软件blender的安装，我在前面的文章已经讲解过了，如果不了解的朋友可以去考考古

亦世凡华、·2023-11-11 11:13

WebGL-Vue3-TS-Threejs：基础练习 / Javascript 3D library / demo

一、理解Three.jsThree.js是一个用于WebGL渲染的JavaScript库。它提供了一组工具和类，用于创建和渲染3D图形和动画。

snowball_li·2023-11-11 08:15

three.js学习一

官网three.jsthree.js差不多是四个部分组成的：场景，相机，光源和物体场景：场景可以理解为一个容器，是物体、光源等元素的容器使用new函数创建场景使用add函数来向场景中添加物体varscene=newTHREE.Scene();//创建一个场景scene.add(cube);//向场景中加入名为cube的物体相机：相机可以理解为看，创建一个物体，只有在相机范围内才会显示在屏幕中，即被

黄丫丫001·2023-11-11 02:02

基于 HTML5 WebGL 构建智能数字化城市 3D 全景

前言自2011年我国城镇化率首次突破50%以来，《新型城镇化发展规划》将智慧城市列为我国城市发展的三大目标之一，并提出到2020年，建成一批特色鲜明的智慧城市。截至现今，全国95%的副省级以上城市、76%的地级以上城市，总计约500多个城市提出或在建智慧城市。基于这样的背景，本系统采用Hightopo的HTforWeb产品来构造轻量化的智慧城市3D可视化场景，通过三个角度的转换，更清晰让我们感知到

图扑软件·2023-11-10 13:51

WebGL智慧城市软件项目

WebGL开发智慧城市项目时，需要考虑多个方面，包括技术、隐私、安全和可持续性。以下是一些需要注意的关键问题，希望对大家有所帮助。北京木奇移动技术有限公司，专业的软件外包开发公司，欢迎交流合作。

defdsdddev·2023-11-10 13:41

一篇文章揭秘JetBrains的 AI 图形发展历程

起初主要使用基于WebGL的工具，这些工具可以在浏览器中实时随机生成所有内容，下面的图像就是用这种方式创建的。2020年，JetBrains发布了第一款基于深

界面开发小八哥·2023-11-10 11:17

Unity3D WebGL修改默认的载入进度条

首先在项目文件Assets文件夹下创建文件夹WebGLTemplates然后去C:\ProgramFiles\Unity2018.3\Editor\Data\PlaybackEngines\WebGLSupport

YuanHang66·2023-11-10 06:06

Unity3D WebGL平台使用WebSocket通信的方法和示例

之前在WebGL平台和服务端交互的时候使用的是UnityWebRequest,通过WebAPI的方式进行交互，后来发现可以用WebSocket交互后就果断换了WebSocket。

YuanHang66·2023-11-10 06:06

webGL编程指南第二章 coloredPoints.js

我会持续更新关于wegl的编程指南中的代码。git代码地址sogooday当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助在上一节的代码中是使用一个固定的颜色进行绘制clickPint.js本节中我们将使用随机的颜色进行绘制点Document画布清除点letcanvas=document.getElementById('canvas');canvas.width=400

sogooday·2023-11-10 04:15

webGL编程指南第二章 clickPint.js

我会持续更新关于wegl的编程指南中的代码。git代码地址：sogooday当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助上一节内容:helloPoint2.js。当前的工程师点击页面并且用一个固定的颜色把点击的绘制出来Document画布清除点letcanvas=document.getElementById('canvas');canvas.width=400;c

sogooday·2023-11-10 04:45

webGL编程指南第五章 MultiTexture.html

我会持续更新关于wegl的编程指南中的代码。当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助git代码地址：空上一章节中我们学习texParameteri的使用,这一章节中我们两个图片进行混合Document#canvas{width:100vw;height:100vw;border:1pxsolidgreenyellow;}!!!!!需要指出的是要选择当前文件夹下的

sogooday·2023-11-10 04:12

Three.js —— Tween.js 使用文档（补间动画）

Tween.js官网文档：tween.jsuserguide|tween.js(tweenjs.github.io)1.引入Tween.jsimportTWEENfrom"./tween.js-master/dist/tween.esm.js"2.定义基本Tween动画目的：将model模型的位置，从原来的(0,0,0)位置，经过1s移动到(20,50,30)的位置。模式一：//1设置动画cons

小道士写程序·2023-11-10 02:51

在Three.js中动画概述

在Three.js中，动画是指在场景中创建和控制对象的运动和变化。模型是指通过Three.js加载的3D对象，可以是几何体、网格或复杂的模型文件（如.obj或.gltf）。

小道士写程序·2023-11-10 02:20

Three.js 几个简单的动画

在了解了Three.js的基础概念之后也有这个想法。简单的动画可以提高Three.js初学者的学习兴趣和信心。本文会从初学者的角度出发讲解几个简单的动画，包括：平移、旋转、缩放、跳跃。

德育处主任Pro·2023-11-10 02:19

推荐频道

【WebGL】Three.js