• 2024-11-21ThreeJs-02Threejs开发入门与调试
    这两天没有上传笔记,在解决图床的问题,主打一个白嫖,所以要费点心思,先是用了gitee的图床好不容易配好后发现居然加了防盗链,后面又转了github的咱目前来说github也是最稳定且免费的,现在搞好了图床以后上传笔记就很快了1.轨道控制器1控制物体移动前面我们创建了物体,为了让物体移动
  • 2024-11-21threejs根据接口状态更换物体颜色
    问题需求是根据接口返回的状态来修改物体A的颜色,但在实际操作中,发现物体A颜色成功修改,但物体B的颜色也变了,代码如下letmodel=XXX;//导入的物体object.sceneconstchangePumpColor=()=>{constnameNode=model.getObjectByName('xxx');setObject3DColor(nameN
  • 2024-11-12threejs实现模型切换为动态漩涡
    效果预览202411120010粒子形状初始化形状由y=ln(x)绕y轴旋转而来1、确认最大圆环数n因为最小的圆环和最大的圆环相差很多倍不适合统一一样的点数组成,而是每下一个圆环比上一个圆环多一个点,这样可以让点的分布不那么极端。这样圆环会形成一个等比数列,我规定第一个最小圆
  • 2024-11-03Threejs渲染3D字体介绍
    概述本文主要介绍如何通过Three.js生成3D文本。效果展示代码分析核心代码部分就是通过Three.js中的FontLoader和TextGeometry来加载字体并创建3D文本。核心代码如下:constloader=newFontLoader();loader.load(textFamily.value,function(font){
  • 2024-11-01学习threejs,导入OBJ格式和MTL的格式的模型
  • 2024-10-30threejs 实现灯光照射模型有阴影
    “three”:“^0.169.0”estudi_taller_carles_fontsere.glb:替换你的模型路径<template><divclass="threejs"></div></template><scriptsetup>import{onMounted}from"vue";import*asTHREEfrom"three"
  • 2024-10-29ThreeJs 中如何实现动画效果
    在ThreeJs中,动画是创建动态3D场景的重要组成部分。本文将介绍如何使用ThreeJs实现基础的动画效果,包括物体的旋转、位置变化和简单的过渡动画。一、创建基础场景在开始动画之前,首先需要创建一个基础的ThreeJs场景。以下是一个简单的场景设置:import*asTHREEfrom'
  • 2024-10-24Threejs 实现3D 地图(05)3d 地图进场动画和地图边缘动画
    3d地图进场特效以及地图边缘动画代码仓库:King/threejs-3d-map地图边缘动画核心代码:constinitBorderPoint=()=>{//获取地图边界的左边(通过https://datav.aliyun.com/portal/school/atlas/area_generator#2.51/104.299012/33.447963获取)letborderPoints3Ar
  • 2024-10-17ThreeJS入门(123):THREE.Skeleton 知识详解,示例代码
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,webgl,ThreeJS,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第123篇入门文章
  • 2024-10-16vue3简单使用threejs立方缓冲几何体(BoxGeometry)
    文章目录前言一、安装three二、使用步骤1.导入three、建立场景、相机和渲染器2.添加立方体3.渲染循环三、其他1.轨道控制器OrbitControls和坐标轴辅助对象AxesHelper2.GUI创建可交互的控件(点击全屏+退出全屏)3.监听窗口的变化执行一些重置操作四、完整代码五、效
  • 2024-10-13将threejs的官方文档部署到本地,遇到的问题及解决方法
    问题:官方文档浏览速度慢。 1.下载https://threejs.org/官网首页左侧,点击“download”下载  2.得到压缩包:three.js-master.zip解压到本地 3. 部署用VSCode打开解压后的文件夹运行命令:npminstall运行命令:npmrundev  报错:  问了一下AI,得到如何解
  • 2024-10-09ThreeJS入门(099):THREE.ArcCurve 知识详解,示例代码
    作者:还是大剑师兰特,曾为美国某知名大学计算机专业研究生,现为国内GIS领域高级前端工程师,CSDN知名博主,深耕openlayers、leaflet、mapbox、cesium,webgl,ThreeJS,canvas,echarts等技术开发,欢迎加微信(gis-dajianshi),一起交流。查看本专栏目录-本文是第100篇入门文章
  • 2024-10-08上传本地pcd文件,并用threejs渲染
    页面<template><div><inputtype="file"@change="handleFileUpload"accept=".pcd"/><inputtype="file"@change="changeFile"/><div@click="stringToFileClick&
  • 2024-09-28学习threejs,添加环境光和点光源
  • 2024-09-24threejs 使用base64编码的图片作为贴图
     使用base64作为贴图可以从接口直接传输(如果特别大需要压缩),可以省去很多操作 代码如下//纹理加载器consttexLoader=newTHREE.TextureLoader();constbase64Str="data:image/png;base64,...";texLoader.load(base64Str,(texture)=>{constaspectRa
  • 2024-09-21Threejs之看房案例(上)
    本文目录前言效果展示一、立方体模式1.1代码1.2代码解析1.3效果二、球形模式2.1代码2.2代码解析2.3效果前言Three.js是一个基于WebGL的JavaScript3D库,它允许在网页上创建和显示3D图形。在房地产行业中,Three.js常被用于实现全景看房案例,为用户提供沉浸式的
  • 2024-09-18Threejs之看房案例(下)
    本文目录前言最终效果1、点精灵1.1添加点精灵1.2点精灵效果2、添加事件2.1鼠标移动事件2.1.1效果2.2鼠标点击事件2.2.1效果2.3切换互通3.完整代码前言在Threejs之看房案例(上)这篇博客中我们已经完成了大厅的3d观看效果,但是我们
  • 2024-09-13ThreeJS Shader的效果样例光影墙、扩散面(四)
    一、实现一个光影墙1. 根据自定义坐标点,输出一个光影墙/***添加光影墙*/functionaddLightWall(){constgeometry=newTHREE.BufferGeometry();constvertices=newFloat32Array([5,0,2,3,0,5,-2,0,5,-4,0,2,-4,
  • 2024-09-13vue3+ts+threejs全景家居VR看房系统v3.0
    一、系统效果图vue3+ts+threejs全景家居VR看房系统v3.0二、系统功能:1.**360°全景自由视角**:用户可以拖拽观看房内全景和自由旋转视角,查看房间的每个角落。2.**场景切换**:用户可以通过点击房间名称热点标注,实现不同房间之间的切换,体验整个房屋的布局。3.**热点标
  • 2024-09-11Threejs之光线投射Raycaster
    本文目录前言一、简要介绍1.1定义与原理1.2构造器1.3常用属性1.4常用方法二、代码准备及效果2.1演示代码准备2.2效果三、创建射线Raycaster及效果3.1代码3.2效果四、完整代码前言Three.js中的光线投射(Raycaster)是一个功能强大的类,用于在三维场景中执行射
  • 2024-09-11Threejs之光线投射Raycaster交互
    这里写目录标题前言一、前置准备1.1代码1.2效果二、添加交互事件2.1代码2.2效果三、完整代码前言基于上篇文章Threejs之光线投射Raycaster我们知道了光线投射的基础用法,在本届我们将使用光线投射进行鼠标交互事件一、前置准备1.1代码<!DOCTYPEhtml><ht
  • 2024-09-07用Threejs搭建一个Web3D汽车展厅!
    在网页里360度展示它家新款汽车的3d模型,还要可以让用户DIY汽车部件的颜色。先看最终效果3D引擎的基本知识本文的目标是让大家看完之后可以立刻上手用起来,既然要用3d引擎,那我们理解了一些3d的基本知识后,再看threejs的API文档效率就会很高。无论什么3d引擎,都不外乎由以下几种
  • 2024-09-06ThreeJS 综合教程100+【目录】
    ThreeJS综合教程100+旨在为开发者提供两大方面的知识信息:(1)提供详细的每个api知识点的详解(2)提供实战的示例,提供源代码。在这量大系统性的知识下,给用户提供清晰的思路和示例参考,更好的服务于自己的threeJS开发项目。文章正在建设中,下面的是cesium的示例教程(暂时撑门面),随
  • 2024-09-06vue+ThreeJS:从0 到1 搭建开发环境
    文章目录一、下载安装(懒人版)二、顺序安装1,下载安装nodejs2,安装vue-cli3,创建vue-three项目。4,安装threeJS5,安装elementUI(选装)最终package.json文件如下:本系列教程是在vue2.X的基础上加载threeJS程序,来开发各种示例程序。一、下载安装(懒人版)下载vue-three系统包,n
  • 2024-09-03ThreeJs基础
    基本结构场景相机渲染场景用来放入各种网格模型。每个网格模型为独立个体,又几何体和材质组成。投影相机如同人眼,用来观察网格模型。最终利用渲染对象对相机和场景进行渲染,将3D模型渲染在页面上。 创建几何体THREE.BoxGeometry创建立方体constgeometry=newTHREE.