【WebGL】Three.js

threejs 形状几何体_Three.js模型几何体面积、体积计算

在工作中通过Three.js开发项目的时候，一些特定的情况下你可能需要计算一个三维模型的表面积或者体积，比如在3D打印的Web项目中，你需要计算一个三维模型的体积，然后通过体积计算打印一个三维模型所需要的
weixin_39821035·2023-09-28 14:16

WebGL实现透明物体（α混合）

目录α混合如何实现α混合1.开启混合功能：2.指定混合函数混合函数gl.blendFunc（）函数规范可以指定给src_factor和dst_factor的常量混合后颜色的计算公式加法混合半透明的三角形（LookAtBlendedTriangles.js）示例效果示例代码半透明的三维物体（BlendedCube.js）示例效果示例代码透明与不透明物体共存同时实现隐藏面消除和α混合的5个步骤1.开启
山楂树の·2023-09-28 12:34

WebGL 切换着色器

目录前言如何实现切换着色器1.准备用来绘制单色立方体的着色器2.准备用来绘制纹理立方体的着色器3.调用createProgram（）函数，利用第1步创建出的着色器，创建着色器程序对象4.调用createProgram（）函数，利用第2步创建出的着色器，创建着色器程序对象5.调用gl.useProgram（）函数，指定使用第3步创建出的着色器程序对象。6.通过缓冲区对象向着色器中传入attribut
山楂树の·2023-09-28 12:02

unity 打包web包后 出现 模型闪烁的问题

原文链接：unity打包web包后出现模型闪面的问题_unitywebgl模型闪烁_一个采集的博客-CSDN博客1.首先检查是否是模型重叠导致的闪面，如果是这种情况，那么让模型之间稍微间隔一些距离2.调整
野区捕龙为宠·2023-09-28 06:33

WebGL笔记：WebGL中的顶点着色器尺寸，颜色的修改

顶点着色器尺寸修改attributevec4a_Position;attributefloata_PointSize;voidmain(){//点位gl_Position=a_Position;//尺寸gl_PointSize=a_PointSize;}voidmain(){gl_FragColor=vec4(1,1,0,1);}//这里的utils.js参考之前博文，不做重复阐述import{i
Wang's Blog·2023-09-28 01:26

Unity3d发布WebGL 部署在IIS

unity3d发布ＷｅｂＧＬ需要安装UnitySetup-WebGL-Support-for-Editor-5.3.4f1.exe在安装Unity3d时需要用UnityDownloadAssistant
Coding小宇·2023-09-27 19:56

使用three.js 集成到react项目画旋转的地球

直接看效果Konnect:Foreveryhuman上react组件EarthComponentimport{useEffect,useRef}from'react';import*asTHREEfrom'three';import{OrbitControls}from'three/addons/controls/OrbitControls.js';importsfrom"./index.modu
肥肥呀呀呀·2023-09-27 13:35

片元着色器中绘制 点(圆)

片元着色器中绘制点(圆)文章主要讲的是写片元着色器的一些算法(套路),实例代码使用的是shadertoy.所以在unity,webgl1之类的地方代码不一定能直接使用,但思路基本相同.稍作修改即可.uv
苍崎愣子·2023-09-26 22:08

Unity/WebGL打包/跨域问题/简单解决“......has been blocked by CORS policy: ......“

报错原文：AccesstoXMLHttpRequestat'file:///C:/Users/13171/My%20project%20(1)/Test/Build/test.data.gz'fromorigin'null'hasbeenblockedbyCORSpolicy:Crossoriginrequestsareonlysupportedforprotocolschemes:http,da
鬼樱G_Cher·2023-09-26 21:09

Unity发布的WebGL页面应用实现全屏/非全屏切换

Unity发布的WebGL页面应用实现全屏/非全屏切换如果是win浏览器平台，可以通过修改index.html里面，unitydiv的长宽比例实现页面内的全屏。
Lif68·2023-09-26 17:08

WebGL画圆的几种方式

需求：看了一段时间WebGL，现在想画一个圆，方式应该有很多，我现在列出自己练习的几个分析：WebGL只能画点、线、三角形，我现在要画一个圆，基本上就只能靠三角形模拟出来一个下表的图形都是通过三角形来构造的
哈哈地图·2023-09-26 02:39

WebGL学习系列-多边形绘制原理

WebGL几何图形绘制之前的篇章我们通过drawArrays这个api绘制过单个点以及多个点，然而，它的功能不仅仅如此，它也是绘制多边形的基石。先来看下面这张熟悉的图：dra
那个天真的人·2023-09-26 02:39

WebGL编程指南-32 绘制圆形的点

1.demo效果如上图绘制了一个红色圆点2.实现要点2.1绘制原理我们已经知道在绘制图形时有一个光栅化的过程，在光栅化的过程中可以在片元着色器中通过内置变量gl_FragCoord来访问片元的坐标，实际上片元着色器还提供了另一个内置变量来获取当前片元在所属点内的坐标，它就是gl_PointCoord，归纳一下这两个变量片元着色器内置变量（输入）变量类型名称描述vec4gl_FragCoord片元的
搬砖怪·2023-09-26 02:08

WebGL 中绘制文本

“在WebGL中如何绘制文本”是一个我们常见的问题。那么第一件事就是我们要问自己绘制文本的目的何在。现在有一个浏览器，浏览器用来显示文本。所以你的第一个答案应该是如何使用HTML来显示文本。
香濃泡芙·2023-09-26 02:38

webgl第二课-绘制一个点

需要源码可以Q群：828202939或者点击这里希望可以和大家一起学习、一起进步！！纯手打！！书籍是PDF电子档，也在Q群里，所有的课程源代码在我上传的资源里面，本来想设置开源，好像不行！如有错别字或有理解不到位的地方，可以留言或者加微信15250969798，在下会及时修改！！！！！本文开始涉及着色器，开始看不懂没关系，后面博客会详细讲解目前阶段你只要知道用就可以了！代码展示：绘制一个点请使用支
webgl_谷子·2023-09-26 02:37

WebGL绘制变幻光斑

由于WebGL安全方面的限制，本例中用到一张帖图仅能通过相对路径在本域调用，file协议是无法看到下图效果的，仅能看到一片移动的方形。效果图：（图1）类似效果使用Canvas2d绘图也可以实现。
weixin_30564901·2023-09-26 02:07

WebGL入门(三十七)-绘制圆形的点

绘制圆形的点1.demo效果2.实现要点2.1绘制原理2.1绘制实现3.demo代码1.demo效果如上图，绘制出了三个红色的小圆点2.实现要点2.1绘制原理我们已经知道在绘制图形时有一个光栅化的过程，在光栅化的过程中可以在片元着色器中通过内置变量gl_FragCoord来访问片元的坐标，实际上片元着色器还提供了另一个内置变量来获取当前片元在所属点内的坐标，它就是gl_PointCoord，归纳一
点燃火柴·2023-09-26 02:06

使用shader绘制矩形、矩形框、圆形、圆形框（WebGL-Shader开发基础02）

绘制矩形、矩形框、圆形、圆形框1.绘制矩形1.1使用if语句绘制1.2使用step函数绘制1.3使用step函数简化方法绘制1.4使用abs对称思想绘制1.5绘制矩形边框2.绘制圆2.1绘制圆形2.2绘制圆形框3.demo代码1.绘制矩形上一篇文章学习如何绘制线，现在学习如何绘制面，先从绘制矩形开始，其实绘制矩形的思想与绘制线的思想一样，只不过绘制线时限制的区域窄一些，绘制矩形限制的区域宽一些，先
点燃火柴·2023-09-26 02:06

WebGL

1、WebGL介绍1.1WebGL不足效果较差：较于桌面开发API：Direct3D、OpenGL、UE、Unity。开发成本：熟悉并掌握一定的数据知识，例如：线性代数。
小白啥时候能进阶成功·2023-09-26 02:35

48 WebGL绘制圆形的点

案例查看地址：点击这里为了绘制一个圆点，我们需要将原先的方点“削”成圆形的。在以前的时候说过，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元都会经过片元着色器的处理。如果直接进行绘制，画出的就是方形的点；而如果在片元着色器中稍微作改动，只绘制圆圈以内的片元，这样就可以绘制出圆形的点了。为了将矩形削成圆形，需要知道每个片元在光栅化过程中的坐标。在之前的示例程序中
暮志未晚Webgl·2023-09-26 02:05

WebGL - 示例 绘制圆形点

之前绘制的点都是正方形的，类似一个像素点，那怎么才能把方点绘制成圆点，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被光栅化为了多个片元，每一个片元都会经过片元着色器处理，直接绘制就是方形的点，要绘制圆形的点就需要把多余的片元给削去;将矩形削成圆形需要知道每个片元在光栅化过程中的坐标，在片元着色器中通过**内置变量gl_FragCoord**来访问片元的坐标，还可以通过另一个**内置变量gl
「已注销」·2023-09-26 02:04

WebGL 雾化

目录前言如何实现雾化线性雾化公式雾化因子关系图根据雾化因子计算片元颜色公式示例程序（Fog.js）代码详解编辑详解如何计算雾化因子（clamp()）详解如何计算最终片元颜色（根据雾化因子计算片元颜色公式mix()）示例效果示例程序（使用w分量代替顶点与视点的距离Fog_w.js）前言在三维图形学中，术语雾化（fog）用来描述远处的物体看上去较为模糊的现象。在现实中，任何介质中的物体都可能表现出雾化
山楂树の·2023-09-26 02:33

WebGL 绘制圆形的点

目录前言如何实现圆形的点？片元着色器内置变量（gl_FragCoord、gl_PointCoord）gl_PointCoord的含义示例程序（RoundedPoint.js）代码详解前言本文将讨论示例程序RoundedPoint，该程序绘制了圆形的点，如下图所示。如何实现圆形的点？为了绘制一个圆点，我们需要将原先的方点“削”成圆形的。之前说过，顶点着色器和片元着色器之间发生了光栅化过程，一个顶点被
山楂树の·2023-09-26 01:30

GLTF模型讲解

前言在繁忙的业务中，为了缩短设计和开发的周期，我们的H5小游戏更多的会采用2D的视觉风格，但总是一个风格是很无趣的，所以最近搞了一个3D物理游戏的需求，在开发的过程中遇到了不少问题，希望通过这篇文章将关于Three.js
默茉·2023-09-25 11:13

什么是3D模型，什么是GLTF，又如何使用GLTF文件

glb,gltf模型(webvrmodel)-gltf模型下载定制,glb模型下载定制,三维项目电商网站在线三维展示,网页VR模型下载,三维模型下载,webgl网页模型下载VR模型网（www.webvrmodel.com
qq_41347078·2023-09-25 11:13

Mars3D(含Cesium)数据及服务篇：单体小模型转为glTF格式

KhronosGroup是WebGL和COLLADA的背后财团。#1.三维模型源数据的设计要求#1.1建模设计要求无论是通过什么工具来设计建
木遥·2023-09-25 11:42

SuperMap webgl 中使用的gltf模型制作方法

当我们使用Cesium开发KML+GLTF模型表示动态的运动轨迹的时候总会用到gltf格式的模型，但是一般官方的模型库总是只有几个，不能够满足使用，这里整理了一套从数据下载到使用的全家桶套餐供各位看官享用。话不多说，上菜~目录一、下载模型二、下载安装模型转换需要的插件三、模型开始导出四、常见问题
THEDEAMON·2023-09-25 11:42

UnityWebGl与Vue通讯问题（及如何内嵌Webgl至Vue）

最近有一个需求，需要把网页的用户登录信息在unitywebgl项目启动时传进unity，试了很多方法都不成功，下面是最后的解决方案Unity定义一个jslib文件，名字随意，比如global.jslib
Angeladaddy·2023-09-24 22:34

phaser3入门教程-从零开始开发一个打砖块游戏

它使用了许多HTML5API，例如Canvas，WebGL，Audio，Gamepad等，并添加了一些有用的逻辑，例如管理游戏循环并为我们提供了物理引擎。
__豆约翰__·2023-09-24 18:21

Unity 发布WebGL平台，C#与JavaScript交互

这是一种高级的技巧，主要用于一些特殊情况，比如在WebGL项目中使用JavaScript来实现与Web页面的互操作。
watl0·2023-09-24 15:11

Three.js后期处理简明教程

在THREE.js中我们有一个包含一堆网格物体的场景。我们将该场景渲染为2D图像。
新缸中之脑·2023-09-24 12:36

前端教程-H5游戏开发

EgretEGRETIARC版本正式发布从端到云一站式区块链游戏开发工作流官网LayaAir在渲染模式上，LayaAir支持Canvas和WebGL两种方式；在工具流的支持程度上，主要是提供了LayaAirIDE
累牛满面·2023-09-24 06:01

vue中将three.js导入的3D模型中原本带有的动画进行播放

1.首先是你要确保模型中是有动画的2.在加载模型后获取动画混合器并对设置动画的物体进行播放loadModel(){//加载3D模型constloader=newGLTFLoader();loader.load('/models/donghua.glb',(gltf)=>{this.model=gltf.scenethis.scene.add(this.model);//获取动画混合器constan
祝你今天也快乐·2023-09-24 03:58

WebGL笔记：WebGL中JS与GLSL ES 语言通信，着色器间的数据传输示例：用鼠标控制点位

用鼠标控制点位attributevec4a_Position;voidmain(){//点位gl_Position=a_Position;//尺寸gl_PointSize=50.0;}voidmain(){gl_FragColor=vec4(1,1,0,1);}import{initShaders}from"./utils.js";constcanvas=document.querySelecto
Wang's Blog·2023-09-24 01:25

WebGL笔记：WebGL的基本绘图原理

同步与异步绘图如果想要画出多个点，而不是每次点击只生成一个点，这时候就需要保存点击的痕迹但是如果代码中，有异步去绘制webgl的点，则会出现问题，如下关键代码//修改attribute变量gl.vertexAttrib2f
Wang's Blog·2023-09-24 01:54

vue项目中使用腾讯美颜SDK

步骤一、阅读腾讯特效SDK官方文档直接看SDK接入>Web端接入步骤二、安装依赖npminstalltencentcloud-webar创建美颜工具函数import{ArSdk,isWebGLSupported
·半傻半呆半疯癫·2023-09-23 23:48

three.js内存释放问题

问题描述在使用three.js渲染3D模型时，经常性的会遇到在连续添加模型后，导致浏览器崩溃的问题，经过排查，发现是浏览器占用了太多的内存，但是却一直没有释放，导致内存被耗尽而崩溃。
朋_朋·2023-09-23 23:19

Three.js所有材质的属性及实例应用

材质（texture）所有材质：材质的共有属性融合属性THREE.MeshBasicMaterial简介属性实例应用THREE.MeshDepthMaterial简介属性实例应用联合材质简介实例应用THREE.MeshNormalMaterial简介属性实例应用在单几何体上使用多种材质实例应用THREE.MeshLambertMaterial简介属性创建实例应用THREE.MeshPhongMat
请往我的生活里加满快乐·2023-09-23 17:39

WebGL绘制带箭头的线

最近公司项目要求根据指定的经纬度绘制一个带箭头的线指向某个点额外还提供了距离和角度因为常用的技术栈为mapbox和leaflet，对比了一下两种的方法，还是选择mapbox来绘制该效果，其实leaflet也是跟mapbox相似，改一下对应的方法就行。对于实现的第一反应是用图片，毕竟简单速度还很快,但是这个也是问题最多的一个情况，缩放级别比较小的情况下还是ok的，毕竟很多信息看不到，但是一旦放大，很
黄坏坏·2023-09-23 14:57

three.js——几何体划分顶点添加不同的材质

几何体划分顶点添加不同的材质前言效果图.addGroup('顶点的下标','获取几个顶点','选择材质的下标')在vue中使用前言上篇文章讲解了怎样通过索引划分顶点，通过顶点绘制图形,本章通过addGroup方法讲解根据划分的顶点来添加不同的材质效果图.addGroup(‘顶点的下标’,‘获取几个顶点’,‘选择材质的下标’)在vue中使用//创建几何图形constgeomentryBuff=new
冯浩(grow up)·2023-09-23 12:45

THREE.JS 3D模型服务器报404问题（VUE fbx文件在本地能显示 服务器上不显示报404）

问题：作为新手，新建立的threeJS模型，本地运行模型是可以显示的，但服务器模型却报404写法：fbxloader("TR7007Q").then((tree)=>{tree.position.set(-1080,-20,0);this.$refs.draw.scene.add(tree);});封装好的方法：//加载fbx文件exportfunctionfbxloader(path){retu
月下脆竹書閣·2023-09-23 11:24

vue项目中使用three.js加载gltf文件时提示Unexpected token ‘＜‘, “＜!DOCTYPE “... is not valid JSON的解决办法

解决方式：将gltf文件放在public文件夹下constloader=newGLTFLoader();letthat=this;loader.load('/models/gltf/scene.gltf',gltf=>{console.log('geggegeg',gltf);varmodel=gltf.scene;that.scene.add(model);})
汉武大帝··2023-09-23 10:22

three.js加载gltf文件过程以及遇到的问题

说明：在vue项目中使用的threejs;刚开始，我是从网上下载的gltf文件，将.gltf文件放在了src/assets/xxx.gltf,对gltf格式的文件并不了解，使用如下方式加载gltf文件时，//创建gltf加载器对象constloader=newGLTFLoader();letthat=this;loader.load("/models/gltf/box.gltf",(gltf)=>
汉武大帝··2023-09-23 10:50

基于 Three.js 的图形操纵控件

一、背景Three.js是一个前端三维图形展示库。它自带了一个三维图形控件，OrbitControls.js，可以控制三维图形的平移、缩放、旋转。
前端小芬芬·2023-09-23 10:45

Unity fbx动画压缩自动化

应用场景：UnityWebGl项目，原先的动画压缩后也有20到30M，导致用户进入网页加载太慢。需求是在不对动画精确度造成影响的前提下，影响尽可能地压缩动画。
晦渊子·2023-09-23 10:00

【vue使用three.js时报Unexpected token ＜ in JSON at position 0错误】

vue使用three.js时报Unexpectedtoken<inJSONatposition0错误只要把模型文件放到public文件夹或者static文件夹下调用就可以了，不能放在src文件夹里面
[廾匸]·2023-09-23 05:42

WebGIS开发教程：三维数据格式

下面是Cesium中常用的几种三维数据格式：1.glTF：glTF（GLTransmissionFormat）是⼀种用于在WebGL、OpenGLES和OpenXR等图形API中传输和加载3D动态场景的开放标准
GIS学姐嘉欣·2023-09-23 02:46

0基础学three.js前言（1）

从今天开始，我将更新0基础学three.js系列。
智商偏低·2023-09-23 02:34

0基础学three.js环境搭建(2)

这是0基础学three.js系列中的第二篇，在这篇里面我会带着大家把开发环境搭建起来，关于开发环境，方式很多，如果你没有基础，就跟着我的步骤一步一步来，保你不出错。
智商偏低·2023-09-23 02:31

unity发布webgl和html,Unity WebGL打包发布报错

UnityWebGL打包发布时在BuildingnativebinarywithIL2CPP...报错：FailedrunningD:DownloadAppsUnity2019.4.8f1EditorDatail2cpp
weixin_36444911·2023-09-23 02:20
上一页 21 22 23 24 25 26 27 28 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他