threejs 第5页

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

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场景。我们需要了解一些基本概念，包括物理实体、碰撞、物理变换、物理世界和物理实体之间的约束等。官网：https://pmndrs.github.io/cannon-es/npm:https://www.npmjs.com/package

拾荒李·2023-11-07 03:35

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

一、渲染管线WebGL是什么WebGL(Web图形库)是一个JavaScriptAPI,可在任何兼容的Web浏览器中渲染高性能的交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGLES2.0非常一致的API来做到这一点,该API可以在HTML5元素中使用。这种一致性使API可以利用用户设备提供的硬件图形加速。WebGL发展史WebGL的发展最早要追溯到2006年,WebGL起

拾荒李·2023-11-07 03:35

three.js学习ing+日照效果

three.jsThreeJs是一款WebGL框架(在其API接口基础上又进行了一层封装)，Three.js是基于原生WebGL封装运行

西瓜味白桃汽水·2023-11-06 23:41

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

以下文章即LearnThreejs第三版英文翻译学习记录，可以到正版书店购买对应书籍。这章内容内容中，你将学到，创建场景、添加对象、添加相机。

我的名字好长好长灬·2023-11-06 17:48

（四）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

六、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

基于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

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 简单实现一个类似《七圣召唤》的掷骰子

前笔者利用业余时间自学了three.js。为了更好的了解WebGL以及更熟练的使用three，想模仿原神中的小游戏“七圣召唤”中的投掷骰子效果，作为首个练习项目~~这是坚持写技术博客的第二周，也是首篇在掘金写的文章，人生路远，仍需远行。基本工作为了方便直接用vite创建了vue项目npm下载three.js[1]和cannon-es[2]，最重要的两个库~1基本1.1创建场景直接贴代码~/***

前端瓶子君·2023-11-02 20:13

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

Threejs简介(是什么)Threejs是一个web端的3D图形引擎，能利用js创建和控制各种三维模型和场景(能用来做什么)可以用js开发各种复杂的三维场景、空间模型动画展示、各种三维小游戏(比如微信跳一跳就是

高阳很捷迅·2023-11-02 18:37

unity的navmesh生成可供threejs使用的模型数据文件

1、在unity中生成导航网格2、导出网格的顶点和索引数据这是导出数据的C#文件代码usingSystem.IO;usingUnityEditor;usingUnityEngine.SceneManagement;usingUnityEngine;usingSystem.Security.Cryptography;//navmesh导出数据publicclassNavMeshExport:Mono

dfstqaaaaaa·2023-11-02 10:20

WEBGL入门的基础介绍

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

Amesteur·2023-11-02 07: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库。它基于WebGL技术three.js有四个不同的引用资源：three.module.min.js、three.module.js、three.min.js、three.js，区别如下：

来自湖南的阿晨·2023-11-01 17:36

threejs实现简单全景看房demo

正在上传…重新上传取消各位大家好，最近一直在学习threejs，在学习过程中不断进步，在将来我会不断完善我的threejs案例库，希望能在学习路上帮到大家接下来为各位介绍的是一个全景看房的demo，我们先上地址

天空之枫·2023-11-01 17:33

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

前言当你开始思考你应该如何学习WebGL和Three.js的时候，相信你至少对相关的关键词了解过了，希望通过WebGL或Three.js实现你想要的Web3D功能，也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能，也许你是因为领导临时分配任务，还不太清楚WebGL和Three.js是什么，个人建议是不要做过多思考，先看看相关的具体技术教程，随着时间的推移你自然会明白Canva

懒人码农·2023-11-01 17:32

HDRI贴图下载及Three.js利用

最令人兴奋的项目之一是在Threejs中添加HDRI背景。HDRI图像是从房间内部或花园、丛林或山脉等开放环境等场景中以360度捕获的。你可以自己创建任何这些图像，但这不是本教程的主题。

新缸中之脑·2023-11-01 17:56

Threejs绘制圆形的源码，可以鼠标滚轮放大缩小

直接复制到html格式即可打开查看效果绘制曲线body{margin:0;overflow:hidden;/*隐藏body窗口区域滚动条*/}-->-->varscene=newTHREE.Scene();vargeometry=newTHREE.Geometry();//声明一个几何体对象Geometry//绘制圆形vararc=newTHREE.ArcCurve(0,0,100,0,2*Mat

瞳中的云·2023-11-01 11:29

波渲染以及焦散的技术原理

关于小区域水波渲染以及焦散的技术原理，推荐下面两篇资源：https://github.com/martinRenou/threejs-causticshttps://zhuanlan.zhihu.com

玄魂·2023-10-31 23:21

[threejs]让导入的gltf模型显示边框

边框1效果图如下：代码如下：constgltfLoader1=newGLTFLoader();gltfLoader1.load("/assets/box/1/scene.gltf",function(gltf){letmodel=gltf.scene;model.scale.set(3,3,3)//scene1.add(model);//renderer1.render(scene1,camera

bugs_more_more·2023-10-31 17:01

Three.js - 光源（九）

创建基本场景import*asTHREEfrom'https://threejs.org/build/three.module.js'import{OrbitControls}from'https://

nie-ny·2023-10-31 09:16

Three.js相机对象.up属性

Threejs相机对象Camera的.up属性表示相机对象的上方向，如果你有一定图形学基础，你可以很好的理解，如果没有图形学基础也没关系，你可以在threejs代码中更改.up的属性值，查看threejs

汉武大帝··2023-10-31 09:46

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

透视视角和正交视角，以及透视转正交的视角切换一、简单介绍二、实现原理三、正投影和透视投影简单解释四、透视相机（PerspectiveCamera）五、正交相机（OrthographicCamera）六、threejs

仙魁XAN·2023-10-31 09:44

Three.js相机控件OrbitControls

Three.js相机控件OrbitControls通过Three.js的相机控件OrbitControls.js可以对Threejs的三维场景进行缩放、平移、旋转操作，本质上改变的并不是场景，而是相机的参数

郭隆邦技术博客·2023-10-31 09:14

threejs修改camera的lookAt无效怎么办

前几天想移动camera实现漫游效果，结果发现camera总是朝着原点坐标方向，然后我修改lookAt为其他坐标letv=newTHREE.Vector3(100,0,100)camera.lookAt(v)结果camera的朝向还是（0,0,0）后来在网上找到原因，原来是我在页面上使用了controls控件，影响了照相机camera的使用，我在页面上使用了DragControls和Trackba

李奈 - Leemon·2023-10-31 09:42

添加3d动画到threejs并显示在mapbox上

说实在的不知道为啥threejs的内容出到了第3期。写出来防止大家踩坑。threejs可以添加我们所需要的3d动画，因为单纯的靠threejs本身的对象并不能真正满足我们的动画需求。

gardenlike2·2023-10-29 07:26

threejs自定义引入模型进行点击获取

最近编辑点击事件时发现：threejs的raycaster只对mesh有感应，而引入模型类型是group，那么要对引入模型进行获取就要把raycaster.intersectObjects（children

BUG小熊手·2023-10-28 16:06

threejs的转场动画 (基于Tween实现)、平滑切换场景

一、先看看效果二、实现方法：实现思路：先获取当前相机所在位置，在使用tween.js动画将相机位置平滑切换到目标位置点//当前相机所在点位置p1={x:camera.position.x,y:camera.position.y,z

慢步者_rambler·2023-10-28 16:05

threejs点击获取三维坐标(Three.js获取鼠标点击的三维坐标)

一、思路绑定点击事件，通过THREE.Raycaster光线投射，用于确定鼠标点击位置上有哪些物体，raycaster.intersectObjects(scene.children)返回点击位置上所有的物体的数组；我们用varselected=intersects[0]取第一个，也就是最前面的那个物体；在通过selected.point取点坐标二、代码addClick();functionadd

慢步者_rambler·2023-10-28 16:35

threejs 将屏幕坐标转换成3d中的坐标。

将当前屏幕上的坐标转换成3d中的坐标pos是当前canvas屏幕上的坐标，targetZ是物体距离原点的距离privateget3DPosByCanvasPos(pos:THREE.Vector2,targetZ:number){letvec=newTHREE.Vector3();//createonceandreuselettarget=newTHREE.Vector3();//createon

IkeShy_Zz·2023-10-28 16:04

【THREEJS】如何使用THREEJS展示车辆效果

模型导出找到一个合适的车辆模型，导入模型。当前模型是没有任何材质的。全局光照这里使用了HDR+方向光来进行灯光展示后期使用SSR进行反射使用Bloom增加整体氛围感材质不同类型物体应该对应不同物体材质。这里全部使用的是物理材质进行渲染使用PBR材质增加细节。

菜鸡饶·2023-10-28 16:03

threejs点击事件

实际原理为获取相机和鼠标点击时的位置，发出一条射线实现的需要用到的变量除camera外：//获取鼠标坐标varmouse=newTHREE.Vector2();varraycaster=newTHREE.Raycaster();初始化中实现对点击事件的监听://点击模型window.addEventListener('click',onmodelclick);使用的函数：//获取在射线上的接触点f

117sir·2023-10-28 16:03

Threejs + shader 实现的一些酷炫的效果

效果预览DEMO地址GIT地址不定期的在shadertoy上抄一些特效到实现在threejs中觉得可以的话请给一个小星星或者一个赞QQ群:1082834010

菜鸡饶·2023-10-28 16:32

使用blender烘培导入Three.js中

导入模型到blender中给场景打光展uv给需要烘培的物体展uv创建烘培纹理选择物体烘培使用展开uv并且使用烘培纹理导入threejs场景中天空用的自带的dynamicsky展uv用的uv-packer