ThreeJS

vue+threeJS示例（001）: 不断翻转的立体箱体

作者：还是大剑师兰特，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。查看本专栏目录-本文是第001个示例文章目录一、示例效果图二、示例简介三、配置说明四、示例源代码（共88行）一、示例效果图二、示

还是大剑师兰特·2024-09-13 10:37

ThreeJS入门（001）：简介、下载安装、历史、应用场景、竞品

查看本专栏目录-本文是第001篇入门文章文章目录一、Three.js简介二、Three.js的历史与发展三、公司背景四、下载安装五、官方网站六、应用范围场景七、相关竞品一、Three.js简介Three.js是一个基于WebGL的JavaScript3D库，它使得在Web上创建和展示3D内容变得简单。Three.js提供了一系列抽象层，让开发者可以专注于设计和实现3D应用程序，而无需深入了解复杂的

还是大剑师兰特·2024-09-13 10:37

react中使用threejs小试牛刀

安装路由依赖包和threejs依赖包#tips:注意版本兼容问题npminstallreact-router@5react-router-dom@5np

cnmone·2024-09-04 07:21

【Threejs学习】材质灯光投影

一、光源分类环境光(AmbientLight)：会均匀的照亮场景中的所有物体。无方向，不能投射阴影。平行光(DirectionalLight)：沿特定方向散发的光，发出的光线都是平行的。例如太阳光，可投射阴影。点光源(PointLight)：从一个点向各个方向发散的光源。例如火柴、灯泡，可投射阴影。聚光灯(SpotLight)：光线从一个点沿一个方向射出，例如顶灯、手电筒，可投射阴影。……以下三种

Mae_cpski·2024-09-02 06:46

gui.js可视化插件的使用

但是在进行三维可视化开发时，一个好的角度和材质的取值是非常重要的，而这点用肉眼是看不出来的，最好的方法就是一点一点的在界面上去试，但是没改变一次就重启一个项目，比较麻烦，因此就需要gui.js来修改threejs

我爱吃干果·2024-08-29 18:07

threejs 创建CSS3DSprite精灵标签, 可以更新位置及内容(封装)

threejs创建CSS3DSprite精灵标签,可以更新位置及内容(封装)ThreeCss3dSprite.js工具类import{CSS3DRenderer,CSS3DSprite}from"..

zsd_666·2024-08-24 09:47

若依/vue2引入threejs展示glb/gltf模型，以及画布截图功能

需求背景：前端对glb/gltf模型进行线上管理，支持上传本地模型，每次上传后展示模型，在提交给后端的时候带上该模型的截图，具体效果不便展示，相关代码如下：1.安装依赖//"three":"^0.162.0",npminstallthree2.引入依赖，初始化画布并渲染模型//1.引入import*asTHREEfrom"three";import{OrbitControls}from"three

怎么吃不饱捏·2024-08-23 18:40

2022-04-19

fastadmintickwritingtickkoreastudythreejsstudy

Apbenz·2024-03-26 21:56

css pointer-events 多层鼠标点击事件

threejs无法滑动视角，菜单界面覆盖threejs操作事件。

小和尚敲木头·2024-02-20 10:21

three.js 3D可视化地图

threejs地图可视化地图——three.js实现this.provinceInfo=document.getElementById('provinceInfo');//渲染器this.renderer

allenjiao·2024-02-19 12:50

【Three.js】前端从零开始学习 threejs：创建第一个 threejs3D 页面

课程和学习大纲对应的课程在这里：Threejs教程、2023最新最全最详细Threejs教程、零基础Threejs最详细教程（已完结）学习知识要点思维导图：官网和文档的使用three.js官网如果无法访问

努力挣钱的小鑫·2024-02-19 12:14

从Unity到Three.js（画线组件line）

import*asTHREEfrom'three';//引入threejsconstrenderer=newTHREE.WebGLRenderer();//创建渲染器//设置渲染范围，当前撑满全屏,屏幕左上角是

chillxiaohan·2024-02-12 04:37

WebGL:BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS比较

目前3d技术发展十分迅速，最初是WebGL，这是一种3d绘图协议，它将JavaScript和OpenGLES2.0结合在一起，通过增加OpenGLES2.0的一个JavaScript绑定，WebGL可以为HTML5Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。一、BabylonJS特性：Babylon

千汇数据的老司机·2024-02-09 13:41

threejs 坐标系与三角函数的实践应用

有空的老铁关注一下我的抖音：效果：沿着圆弧批量创建多个小球//引入轨道控制器扩展库OrbitControls.jsimport{OrbitControls}from"three/examples/jsm/controls/OrbitControls.js";import{GLTFLoader}from"three/examples/jsm/loaders/GLTFLoader.js";//效果制作

汉武大帝··2024-02-08 19:30

Threejs案例-绘制3D文字

13.Threejs案例-绘制3D文字实现效果知识点FontLoader一个用于加载JSON格式的字体的类。返回font，返回值是表示字体的Shape类型的数组。

MossGrower·2024-02-06 18:56

threejs之updateWorldMatrix的实现原理

首先我们需要定义几个额外的概念，包括表示位置、旋转、和缩放的类，以及一个用于表示4x4矩阵并执行矩阵运算的类。这个函数的目的是更新一个物体在世界空间中的位置，考虑到它的局部变换（位置、旋转、缩放）以及它的父对象的世界矩阵（如果有的话）。首先，让我们定义一些基础的数学工具类，包括Vector3,Quaternion（用于表示旋转）,和Matrix4。classVector3{constructor(

Young soul2·2024-02-06 16:14

threejs之常用贴图

在三维图形和游戏开发中，高光贴图、凹凸贴图、法线贴图和环境光遮蔽贴图是常用的技术，用于增加虚拟物体表面的细节和真实感，而无需增加更多的几何体。这些技术可以帮助开发者和艺术家创造出既详细又性能高效的场景。高光贴图（SpecularMap）高光贴图用于控制物体表面的高光部分，即那些直接反射光源光线的区域。它通常是一张灰度图，其中亮部表示强反射区域，暗部表示弱反射或非反射区域。这使得材质的高光效果可以在

Young soul2·2024-02-06 16:12

vue3+threejs+koa可视化项目——模型文件上传(第四步)

文章目录⭐前言往期node系列文章threejs系列相关文章vue3+threejs系列⭐koa后端文件上传(koa-body)自动创建目录自定义目录上传apifox自测上传接口⭐vue3前端上传模型文件

yma16·2024-02-05 06:33

threeJS 使用 html2canvas截图为黑色的问题

实际错误是所有的webGL以及three的容器截图都为黑色的背景，其他元素无恙截图日志的报错为：在这个问题解决之前尝试的办法有：疑似跨域问题：修改`html2canvas`的配置，使用`{useCORS:true}`--无效意思元素样式问题修改dom样式为绝对值，去除百分比以及相对定位--无效求人之前先百度找到了一个网上教程，解决方法如下可以看到：preserveDrawingBuffer=fal

MonkeyB_B·2024-02-04 13:06

Threejs 快速入门

刚好最近在做一个活动时，就遇到了需要播放3D全景视频的需求，顺便就研究了一下Threejs，一个用于在浏览器中绘制3D图像的JS库（https://github.com/mrdoob/three.js）

stcaolei·2024-02-04 08:43

three.js为何如此奇妙

threejs可以将它理解成three+js，three表示3D的意思，js表示javascript的意思。那么合起来，three.

weixin_30527551·2024-02-04 08:43

three.js 小例子分析

https://threejs.org/examples/#webgl_geometry_extrude_shapes开头的引入js没什么好说//这是鼠标控制的工具接着分析代码varcamera,scene

今天又懒得加班·2024-02-04 08:11

Threejs 简析

Threejs快速入门现在什么都是3D，看电影3D，打游戏3D，估计3D打车，很快就会面世。那么作为前端开发的标准语言，JS和3D能不能也搞出点大新闻呢？

英灵海东青·2024-02-04 08:10

使用 React 和 Threejs 创建一个VR全景项目

最近我在学习使用React配合Three.js来搭建一个可以浏览720全景图片的项目实现的是加载一张2:1的720全景分享一下我的创建过程一、搭建框架并安装需要的插件npxcreate-react-appparano//创建一个React项目npminstall-Stypescript//安装typescript，这个是类型辅助插件，与全景项目关系不大npminstall-S@types/thre

WindyZ_34ec·2024-02-03 15:38

vue-3d-model属性介绍

vue-3d-model是一个可以解析3d模型的组件，基于threeJS和webGL；这篇文章就不介绍具体怎么引入了，可以到官网查阅一下，这里主要是记录一下这个组件的属性，方便我自己和大家查阅使用，具体支持哪些文件

喜枝儿·2024-02-03 09:39

vue-3d-model

vue-3d-model-npmGitHub-hujiulong/vue-3d-model:vue.js3Dmodelviewercomponent通过该插件降低Threejs的使用难度vue项目加载三维模型

dragonzoebai·2024-02-03 09:07

vue-3d-loader

vue-3d-loader-npmGitHub-king2088/vue-3d-loader:VueJSandthreeJS3dviewer是对vue-3d-model的改进，降低Threejs使用难度

dragonzoebai·2024-02-03 09:04

Three.js学习3：第一个Three.js页面

Three.js提供的编辑器可以在本地Three.js文档中的editor目录里访问到：http://localhost:9000/editor/如果不知道怎么做，可以参考我的这篇博文：Three.js学习1：threejs

stones4zd·2024-02-03 03:22

Threejs 地图3D可视化

大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群可以直接去githubgithub.com/1023byte/3Dmap前言threejs小练习，从头实现如何加载地理数据

傲娇的koala·2024-02-02 16:34

Threejs 开发3D可视化地图

可以直接去githubgithub.com/1023byte/3Dmap前言threejs小练习，从头实现如何加载地理数据，并将其映射到三维场景中的对象上。

zz_jesse·2024-02-02 16:34

Vue3+ThreeJS的简单使用

1.介绍Three.js是基于原生WebGL封装运行的三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。github地址three.js官网three.js中文文档2.应用场景智慧城市智慧园区大屏数据可视化3D看房小游戏3.使用3.1下载Three.js//通过CDN方式引入//使用npm下载npminstall--savethree//在要使用的页面中引入

无敌暴龙神~·2024-02-02 16:04

Threejs案例-绘制网格状圆环

10.Threejs案例-绘制网格状圆环实现效果知识点TorusGeometry(圆环缓冲几何体)一个用于生成圆环几何体的类。

MossGrower·2024-02-02 12:52

动手实践WebVR 全景

本文将会简单探究WebVR全景的实现原理，同时也会用threejs实现两个小的demo，希望对大家以后在业务上遇到类似的场景能有所帮助。

Dream_travelerly·2024-02-02 08:33

Three.js学习二——Three.js极简入门

创建一个场景渲染场景使立方体动起来结果准备开发环境1、一台可用浏览器的带文件系统的电脑；2、下载官网提供的three.js-master代码包，官方提供的示例和相关库文件都在里面，官网地址：https://threejs.org

Mr_Bobcp·2024-02-02 05:16

Three.js学习1：threejs简介及文档本地部署

华丽的分割线-------------------------github：https://github.com/mrdoob/three.js/官网：Three.js–JavaScript3DLibraryThreejs

stones4zd·2024-02-02 02:03

Threejs_07 环境、透明度、纹理、ao、光照等贴图的渲染

@老陈打码继续学习老陈threejs支持！！！！！！

Web阿成·2024-02-01 15:21

three.js和vue.js学习 -- 创建一个3d模型demo

写在开头转载链接：https://zhuanlan.zhihu.com/p/333615381https://techbrood.com/threejs/docs模型下载链接：https://sketchfab.com

深海大大·2024-02-01 15:21

Three.js高光贴图(.specularMap)

参考资料：threejs中文网threejsqq交流群：814702116Three.js高光贴图(.specularMap)本文是Three.js电子书的8.8节高光网格材质MeshPhongMaterial

Threejs可视化·2024-02-01 15:21

threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸...

这个小案例是当初我在学习的时候，小的一个小案例，代码还需要进一步优化；还请谅解~~；主要用到了threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸等这些小功能；（点击每个

bainaibei2058·2024-02-01 09:42

Threejs API——`OrbitControls`相机控件

文章目录API用法APIOrbitControls相机控制用法导入import{OrbitControls}from'three/examples/jsm/controls/OrbitControls.js'import{DRACOLoader,AmbientLight,Color,MOUSE,

博客zhu虎康·2024-02-01 09:42

Arcgisjs结合threejs做动态线图层

（案例地址）该案例仅在mapview下有效，sceneview就不显示了，下面将结合threejs对该案例进行修改，实现sceneview下的三维动态线图层。

阿卡坤·2024-02-01 04:46

ThreeJS之3D柱形图

学习threejs第二篇，3D柱形图练习，本文参考了网上的实现方式，用html方式进行了实现。

苜蓿花乐园·2024-01-31 12:08

如何解决THREEJS物体重叠问题（物体闪烁问题）

Three在使用绘制墙面得时候发现里面得物体从墙外面溢出重合了，如图：要解决这个问题我们需要了解什么是Z-Buffer、Z-FightingZ-Buffer在threejs中，使用深度缓冲（Z-Buffer

心淡然如水·2024-01-31 10:42

Threejs 展示——obj 格式模型导入

文章目录需求分析1.HTML版本2.Vue版本需求导入obj格式的模型数据分析.obj：WavefrontOBJ格式，是一种广泛使用的三维模型文件格式。预览.obj格式文件的软件可点此下载需要准备两种格式的数据，如下所示1.HTML版本html

博客zhu虎康·2024-01-31 01:09

Threejs 展示——坐标间的转换

文章目录坐标系世界坐标系（WorldCoordinateSystem）：屏幕坐标系（ScreenCoordinateSystem）：相机坐标系（CameraCoordinateSystem）：坐标系之间的转换在Three.js中，展示和坐标间的转换涉及到不同的坐标系，包括世界坐标系、屏幕坐标系和相机坐标系。下面我将简要介绍这些坐标系之间的转换关系：坐标系世界坐标系（WorldCoordinateS

博客zhu虎康·2024-01-31 00:58

Threejs in autonomous driving -（2）模型精简

在开发准备阶段建模同学都会提供一个车模,从前段考量一般来说超过100kb都算是大文件了，这个模型一般是obj+mtl文件，这两个一般都会超过MB。推动精简的话都非常都难。精简方案删减模型的顶点和面片模型压缩第一种专业性比较强，我们是搞不定的，那么就可以从第二种思路为出发点。通过万能的搜索引擎搜索我们可以找到被誉为3d业界的json格式的gltf。gltf简介。这里推荐两个工具obj2gltfhtt

土肥圆_c1ab·2024-01-30 23:18

vue3+threejs+koa可视化项目——实现登录注册（第三步）

文章目录⭐前言往期node系列文章threejs系列相关文章vue3+threejs系列⭐koa后端登录注册逻辑（jwt）koa登录注册⭐vue3前端登录注册权限控制登录页面注册页面⭐总结⭐结束⭐前言大家好

yma16·2024-01-30 22:17

ThreeJS快速入门指南

Three.js介绍Three.js是一个开源的应用级3DJavaScript库，可以让开发者在网页上创建3D体验。Three.js屏蔽了WebGL的底层调用细节，让开发者能更快速的进行3D场景效果的开发。Three.js的开发环境搭建创建目录并使用npminit-y初始化package.json使用npminstall--save-devparcel安装Web应用打包工具parcel这一步不是必

诸葛亮的芭蕉扇·2024-01-30 09:52

VUE项目搭建

vue项目搭建选择程序放置的文件夹，在路径栏中输入cmd，再按回车打开命令行窗口在命令行中输入以下内容vuecreatethreejs选择vue3默认创建完成之后的界面是这样打开创建好的工程项目，在package.json

言馨·2024-01-29 22:06

【Threejs】03缓冲区几何体

缓冲区几何体缓冲区集合体可以用来表示线、面和集合体（也就是一维、二维、三维图形）利用缓冲区几何体创建三角形创建简单的缓冲区集合体对象//创建缓冲区集合体constgeometry1=newTHREE.BufferGeometry();创建顶点向量要创建的是一个三角形图形，需要有三个点每三个值创建一个顶点//创建向量constvertices=newFloat32Array([-1.0,-1.0,0

言馨·2024-01-29 22:36

推荐频道