threejs(webgl)

threejs (二) 相机

正交相机constcamera=newTHREE.OrthographicCamera(-aspect,aspect,aspect,-aspect,0.1,//进平面1000//远平面);//透视相机创建相机辅助线constcameraHelper=newTHREE.CameraHelper(this.camera);创建一个透视相机观察正交相机//创建透视相机constwatchCamera=n
小程很努力·2023-11-08 14:38

three.js点滴yan(整理后)

场景、相机和渲染器Three.js整个系统主要包含场景Scene、相机Camera和WebGL渲染器WebGLRenderer三大块，其中场景又包含模型和光源。
飘然离去·2023-11-08 11:11

使用three.js/webgl实现简易地形

在cesium等三维地球引擎，是使用Quantized-mesh瓦片来加载地形，但在小场景地图中，我们有更简便的方式来实现简易地形。本篇以mapbox地形瓦片为例，说明在three.js中使用mapbox地形瓦片的方法。一、获取地形瓦片和影像地形瓦片我使用了mapbox的mapbox.terrain-rgb服务，地形影像我使用了mapbox的mapbox_satellite服务，再根据瓦片行列号算
evomap·2023-11-07 21:26

Threejs实现酷炫3D地球技术点汇总

原文地址：Threejs实现酷炫3D地球技术点汇总在线预览：https://joy1412.cn/online/前言本篇介绍一下如何用Threejs实现一个酷炫的3D地球特效，使用到的技能点如下：星空动态背景地球模型大气层光圈卫星环绕特效经纬度坐标转成
嘟嘟MD·2023-11-07 21:24

Threejs实现3d地球记录（1）

一、基本场景配置1、创建场景constscene=newTHREE.Scene();//创建场景2、创建并配置相机参数各参数详情参考threejs官方文档//THREE.PerspectiveCamera
今天也要攒钱·2023-11-07 21:24

Threejs实现3d地球记录（2）

2、添加地球光圈地球光圈图：//地球光圈functioncreateSprite(R){vartextureLoader=newTHREE.TextureLoader();vartexture=textureLoader.load(spriteImg);//加载纹理贴图//创建精灵材质对象SpriteMaterialvarspriteMaterial=newTHREE.SpriteMaterial
今天也要攒钱·2023-11-07 21:24

Threejs实现3d地球记录（4）

三、地球信息流可视化（飞线）1、曲线介绍Three.js基础曲线函数有三种：样条曲线：在三维空间中设置5个顶点，输入三维样条曲线CatmullRomCurve3函数作为参数，然后返回更多个顶点，通过返回的顶点数据，构建一个几何体，然后绘制出来一条沿着5个顶点的光滑样条曲线。三维三次贝赛尔曲线：由起点、终点、及两个控制点定义，通过三维三次贝塞尔曲线（CubicBezierCurve3）绘制出一条平滑
今天也要攒钱·2023-11-07 21:24

使用 Threejs 从基础开始构建 3D 地球

需求threejs学习-3D地球实现：1、使用粒子效果模拟宇宙星空2、贴图、模型等资源的加载3、加载资源的监听4、效果合成器EffectComposer的初级使用5、在地球上设置坐标以及坐标涟漪动画6、
Best_卡卡·2023-11-07 21:53

unity-webgl使用Newtonsoft.Json序列化问题

使用Newtonsoft.Json序列化与反序列化1、unity2018.3.1f1的Editor环境可正常运行2、打包WebGL平台后，序列化接口（JsonConvert.SerializeObject
natrace·2023-11-07 20:17

# WebGl通过网址动态加载网络地址模型

WebGl通过网址动态加载网络地址模型前期需要准备的资源：1..gbl后缀的模型文件，其中包含了纹理、贴图等模型所依赖的文件，放在unity可以直接使用，不用在后续使用代码添加材质。
weixin_43806095·2023-11-07 08:24

Threejs进阶之五：使用CSS2DRenderer给模型添加HTML标签

这一节给场景中的模型添加标签，想实现的效果是，通过鼠标点击场景中摩托车的某个部位，则在场景中出现一个标签，并在标签上显示该部位的信息。最终的效果图如下：要实现上面的效果，需要用到CSS2D渲染器，先来了解下CSS2D渲染器CSS2DRenderer(CSS2D渲染器)CSS2DRenderer（CSS2D渲染器）可以把HTML元素作为标签标注到三维场景中，CSS2DRenderer是CSS3DRe
九仞山·2023-11-07 06:42

Threejs进阶之七：使用CSS3DRenderer渲染HTML标签

前面我们实现了通过使用CSS2DRenderer给模型添加HTML标签的效果，渲染出来后我们发现当我们缩放鼠标时，渲染的HTML标签并不会跟着场景缩放，这是因为CSS2DRenderer渲染的标签默认保持自身像素值。官方文档中也提到了，CSS2DRenderer是CSS3DRenderer（CSS3D渲染器）的简化版本，它唯一支持的变换就是位移。所以，它不支持缩放等功能。这一节我们来了解下使用CS
九仞山·2023-11-07 06:12

使用CSS2DRenderer在3D项目中创建Label标签并添加点击事件（代替鼠标射线检测）

/libs/threejs/jsm/renderers/CSS2DRenderer.js";varcamera,scene,renderer,labelRenderer;创建场景相机灯光加载模型等代码省略创建渲染器的同时创建一个
Zmikoo_zyx·2023-11-07 06:10

ThreeJs CSS2DRenderer、OrbitControls 鼠标事件问题

一、场景A：在ThreeJs3D场景中国使用CSS2DRenderer渲染Html元素，OrbitControls功能失效原因分析：CSS2DRenderer渲染器会在页面渲染出一个Div，里面包含自定义的
小卡雷尔·2023-11-07 06:09

threejs 添加 CSS2DRenderer 导致 OrbitControls 控制器不能移动

threejs添加CSS2DRenderer导致OrbitControls控制器不能移动标签渲染器CSS2DRenderer会创建出一个div元素，有时因为位置原因导致OrbitControls不能移动
超级小白猿·2023-11-07 06:38

threejs CSS3DRenderer添加标签并设置朝向摄像机

一.由于CSS3DRenderer是附加组件，必须显式导入import{CSS3DRenderer,CSS3DObject}from'three/examples/jsm/renderers/CSS3DRenderer.js';二.CSS3DRenderer特点CSS3D不面向摄像机，会跟随场景缩放，不被模型遮挡，通过DOM事件点击但是由于项目要求label时刻面向摄像机，因此需要在每次刷新更新l
给你六圆钱·2023-11-07 06:36

threejs(9)-应用物理引擎设置物体相互作用

一、认识物理引擎与cannon安装Cannon.js是一个开源的3D物理引擎，用于在WebGL中创建3D物理模拟。它提供了一个灵活的API，可以应用于许多WebGL场景。
拾荒李·2023-11-07 03:35

threejs(10)-WEBGL与GPU渲染原理（难点）后期再消化亦可

一、渲染管线WebGL是什么WebGL(Web图形库)是一个JavaScriptAPI,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件。
拾荒李·2023-11-07 03:35

three.js学习ing+日照效果

Three.js是基于原生WebGL封装运行的三维引擎webGLthree.js1.下载npm1.可旋转立方体可旋转立方体群日照webGLwebGL(web图形库)是一个中JavaScriptAPI，用于在
西瓜味白桃汽水·2023-11-06 23:41

1.第一章1小节 运行简单的例子

以下文章即LearnThreejs第三版英文翻译学习记录，可以到正版书店购买对应书籍。这章内容内容中，你将学到，创建场景、添加对象、添加相机。
我的名字好长好长灬·2023-11-06 17:48

三维技术探索-Three.js开发指南

一、场景搭建1、使用three.js搭建三维场景需要的基本要素渲染器与场景（1、）渲染器(renderer)：是三维中的基本，是three.js的主要对象constrenderer=newTHREE.WebGLRenderer
何小鹏·2023-11-06 15:44

Three.js 开发引擎的特点

1.基于WebGL：Three.js基于WebGL技术，利用GPU加速来实现高性能的三维渲染。2.跨平台：它在主要的桌面和移动浏览器上运行，实现了跨平台的兼容性。3.丰
defdsdddev·2023-11-06 14:56

（四）Threejs基础-对象的缩放、移动、旋转和动画

目录1、对象的缩放、移动和动画2、代码实现1、对象的缩放、移动和动画1）通过上节的对象、辅助坐标轴、轨道控制器的创建内容，对象的创建如下：//创建box图形形状constgeometry=newTHREE.BoxGeometry(1,1,1);//赋予基础材质constmaterial=newTHREE.MeshBasicMaterial({color:0xffff00});//基于图形形状和材质
轮回的秋·2023-11-05 23:04

（五）Threejs基础-Clock时间跟踪动画与Gsap动画库使用

目录1、Clock时间跟踪1.1对象构造1.2常用属性1.3常用方法1.4完整过程2、Gsap动画控制2.1安装依赖2.2完整过程1、Clock时间跟踪1.1对象构造//创建时间跟踪对象constclock=newTHREE.Clock();1.2常用属性//当clockstart,.getElapsedTime()or.getDelta()更新oldTime,注意查看oldTime值varold
轮回的秋·2023-11-05 23:04

（三）Threejs基础-通过帮助文档创建立方体、轨道控制器、坐标轴辅助器

目录1、文档使用、基础环境配置2、创建立方体、轨道控制器、坐标轴辅助器3、其它1、文档使用、基础环境配置1）创建本地ThreeJS文档示例环境：https://blog.csdn.net/donglaoxie
轮回的秋·2023-11-05 23:33

openlayers结合原生webgl 图像的动态绘制tin数据保持清晰度

前言：此文章的内容涉及两个部分内容，主体为webgl内容，主要提供一个思路、解决方案。相关的需求是这么回事：地图放大缩小时，图像不能失真。即：缩放有图像颜色的那一部分时，不可以失真。
liuqing0.0·2023-11-05 18:40

六、threejs学习笔记-加载外部三维模型

友情链接：threejs中文文档目录1.GLTF格式简介(Web3D领域JPG)GLTF格式信息2.加载.gltf文件(全流程)(1)引入GLTFLoader.js(2)gltf加载器newGLTFLoader
焦焦焦焦焦·2023-11-05 16:07

Three.js - JS三维模型库在Vue2中的基础教程

threejs官网:https://threejs.org/threejs案例:https://threejs.org/examples/#webgl_animation_keyframesthreejsAPI
EverGlowShan·2023-11-05 16:02

Three.js 模型加载及加载简单动画

简单介绍下Three.js吧，Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。因为使用简单，入门比较容易。
小菜花29·2023-11-05 16:56

【WebGL】简单入门教程

第1章-介绍WebGL解决了用户在页面中绘制和渲染3D图形的功能，且使用户通过页面与三维图形交互成为可能，这项技术将在下一代开发用户易用直观界面中发挥重要的作用。
小沈曰·2023-11-05 07:05

WebGL：基础练习 / 简单学习 / demo / canvas3D

一、前置内容canvas：理解canvas/基础使用/实用demo-CSDN博客WebGL：开始学习/理解WebGL/WebGL需要掌握哪些知识/应用领域/前端值得学WebGL吗_webgl培训-CSDN
snowball_li·2023-11-05 07:31

基于WebGL的10大开源框架

WebGLWebGL是基于OpenGL的JavaScriptAPI/库，允许Web浏览器在浏览器中渲染3D/2D图形，而无需安装额外的插件，桌面应用程序，任何第三方插件或浏览器扩展。
ayusong870·2023-11-05 03:27

unity 一键替换 UI上所有字体，批量替换字体（包括：Text和Text (TMP)）

前言：在开发中会遇到这种情况，开发完了，发现UI字体没有替换，特别是需要发布到WebGL端的同学，突然发现无法显示汉字了。下面一个非常方便的方法完美解决。
野区捕龙为宠·2023-11-04 19:17

Unity webgl发布微信小游戏

我是unity2019.4版本，采用插件是minigame.202212221540.unitypackage，你可以更新最新版本appid写你微信开发者上面申请的，cdn路径可以先不写，导出路径英文名称最好，小游戏包小可以选择小游戏包，游戏包大就是选择CDN，要部署服务器其他默认选项，导出项目如下这个TXT文件就是要部署到云服务器的，打开微信开发者，打开云开发选择静态网站，这个微信云服务器要提前
木槿飞卿873·2023-11-04 18:18

unity开发微信小游戏（1）-将现有工程转换微信小游戏

❤❤❤本文章目的是快速带大家转换成微信小游戏，如有其他问题，可查看其他章节《UnityWebGL微信小游戏适配方案》地址：https://github.com/wechat-miniprogram/minigame-unity-webgl-transformhttps
JacobKay·2023-11-04 17:10

Unity导出微信小游戏

打算熟悉一下流程看看微信提供的Unity转微信小游戏解决方案地址:https://developers.weixin.qq.com/minigame/dev/guide/game-engine/unity-webgl-transform.html
若风华浊世间·2023-11-04 17:09

Unity - 微信小游戏

总参考：UnityWebGL微信小游戏适配方案(公测)安装与使用下载Unity插件，并导入至游戏项目中，版本更新请查看更新日志请查阅推荐引擎版本，安装时选择WebGL组件最终选择Unity2021.2.5f1c1InstantGame
青衫磊落长歌行·2023-11-04 17:05

Unity适配微信

使用的是微信开发的插件GitHub-wechat-miniprogram/minigame-unity-webgl-transform路径相关：Unity：Application.streamingAssetsPath
Dongo2·2023-11-04 17:31

专有钉钉 常见问题

关于cesium打开报错问题，需要在右下角...处设置打开“webgl支持”。h5应用没有控制台，可以使用vconsole等插件。移动端h5应用，andro
own\·2023-11-04 14:38

SuperMap iClient3D for WebGL加载iServer转发ArcGIS REST服务的WMS并获取属性与别名

作者：kk文章目录一、iServer转发A的REST服务为WMS服务二、使用WebGL加载转发后的WMS服务三、获取到点击地图返回的信息并解析一、iServer转发A的REST服务为WMS服务步骤：快速创建服务
supermapsupport·2023-11-04 06:31

ArcGIS for JS、SuperMap for webgl、OpenLayers查询方式总结

ArcGISforJS、SupermapforWebGL+iServer和OpenLayer+Geoserver的查询方式；一、ArcGISforJSArcGISforJS查询API官方介绍得已经十分清楚
浪向往着岸·2023-11-04 06:31

四万字 | web前端面试大纲整理

更新中，以下整理于CSDN、掘金等博客以及b站视频web前端HTML1、HTML5新特性语义化标签类音视频处理canvas/webGLhistoryAPIrequestAnimationFrame地理位置
to Zero-·2023-11-04 02:12

基于ThreeJS的3D地球

第一次接触threeJS，说实话，挺脑瓜子疼的！功能：3D地球（纹理贴图），地球上添加标记点（经纬度），点击标记点弹出对应的信息框，地球入场动画，相机移动动画等。
你怎么瘦的像条狗一样·2023-11-03 20:57

vue开发案例：基于Three.js搭建三维数字化场景

gltf模型，并解析模型动画；基于worker-loader在vue中使用webworker；基于webworker动态设置模型（鸟、牛）的移动路线；基于geotiff.js与DEM生成三维地形场景；threejs
碰碰qaq·2023-11-03 20:27

VUE3+Cesium+Three项目构建

CesiumJS是一个开源、免费的三维地图开发框架，Three.js是一个也开源、免费的三维渲染框架，两者都是基于WebGL技术、使用JavaScript开发的Web前端三维可视化框架，目前在国内外的三维
HM-hhxx！·2023-11-03 20:55

unity 发送消息与web前端交互

参考文章：UnityWebGl与Web前端Html通信，互通消息_boyZhenGui的博客-CSDN博客1.创建.jslib文件在unity的Plugins文件夹下，创建.jslib文件（可先创建txt
Monkey_Xuan·2023-11-03 17:04

tauri 访问静态资源，响应头为Content-Type:‘text/html‘

index-f8291142.js:22050:15)atObject.onLoad(index-f8291142.js:22033:22)atindex-f8291142.js:19769:20使用threejs
JA+·2023-11-03 08:49

前端dxf文件结构

导出的通用看图文件,它本质上是一种ascll码文件,可以使用three-dxf(https://github.com/gdsestimating/three-dxf)先将其转换成json,three-dxf是基于threejs
千茉紫依·2023-11-02 21:50

用 ThreeJS 简单实现一个类似《七圣召唤》的掷骰子

为了更好的了解WebGL以及更熟练的使用three，想模仿原神中的小游戏“七圣召唤”中的投掷骰子效果，作为首个练习项目~~这是坚持写技术博客的第二周，也是首篇在掘金写的文章，人生路远，仍需远行。
前端瓶子君·2023-11-02 20:13

Threejs 三维开发系列之Threejs基础概念

Threejs简介(是什么)Threejs是一个web端的3D图形引擎，能利用js创建和控制各种三维模型和场景(能用来做什么)可以用js开发各种复杂的三维场景、空间模型动画展示、各种三维小游戏(比如微信跳一跳就是
高阳很捷迅·2023-11-02 18:37
上一页 15 16 17 18 19 20 21 22 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他