- threejs 使用base64编码的图片作为贴图
使用base64作为贴图可以从接口直接传输(如果特别大需要压缩)，可以省去很多操作 代码如下//纹理加载器consttexLoader=newTHREE.TextureLoader();constbase64Str="data:image/png;base64,...";texLoader.load(base64Str,(texture)=>{constaspectRa......
- Threejs之看房案例（上）
本文目录前言效果展示一、立方体模式1.1代码1.2代码解析1.3效果二、球形模式2.1代码2.2代码解析2.3效果前言Three.js是一个基于WebGL的JavaScript3D库，它允许在网页上创建和显示3D图形。在房地产行业中，Three.js常被用于实现全景看房案例，为用户提供沉浸式的......
- Threejs之看房案例（下）
本文目录前言最终效果1、点精灵1.1添加点精灵1.2点精灵效果2、添加事件2.1鼠标移动事件2.1.1效果2.2鼠标点击事件2.2.1效果2.3切换互通3.完整代码前言在Threejs之看房案例（上）这篇博客中我们已经完成了大厅的3d观看效果，但是我们......
- ThreeJS Shader的效果样例光影墙、扩散面(四)
一、实现一个光影墙1. 根据自定义坐标点，输出一个光影墙/***添加光影墙*/functionaddLightWall(){constgeometry=newTHREE.BufferGeometry();constvertices=newFloat32Array([5,0,2,3,0,5,-2,0,5,-4,0,2,-4,......
- vue3+ts+threejs全景家居VR看房系统v3.0
一、系统效果图vue3+ts+threejs全景家居VR看房系统v3.0二、系统功能：1.**360°全景自由视角**：用户可以拖拽观看房内全景和自由旋转视角，查看房间的每个角落。2.**场景切换**：用户可以通过点击房间名称热点标注，实现不同房间之间的切换，体验整个房屋的布局。3.**热点标......
- Threejs之光线投射Raycaster
本文目录前言一、简要介绍1.1定义与原理1.2构造器1.3常用属性1.4常用方法二、代码准备及效果2.1演示代码准备2.2效果三、创建射线Raycaster及效果3.1代码3.2效果四、完整代码前言Three.js中的光线投射（Raycaster）是一个功能强大的类，用于在三维场景中执行射......
- Threejs之光线投射Raycaster交互
这里写目录标题前言一、前置准备1.1代码1.2效果二、添加交互事件2.1代码2.2效果三、完整代码前言基于上篇文章Threejs之光线投射Raycaster我们知道了光线投射的基础用法，在本届我们将使用光线投射进行鼠标交互事件一、前置准备1.1代码<!DOCTYPEhtml><ht......
- 用Threejs搭建一个Web3D汽车展厅！
在网页里360度展示它家新款汽车的3d模型，还要可以让用户DIY汽车部件的颜色。先看最终效果3D引擎的基本知识本文的目标是让大家看完之后可以立刻上手用起来，既然要用3d引擎，那我们理解了一些3d的基本知识后，再看threejs的API文档效率就会很高。无论什么3d引擎，都不外乎由以下几种......
- ThreeJS 综合教程100+【目录】
ThreeJS综合教程100+旨在为开发者提供两大方面的知识信息：（1）提供详细的每个api知识点的详解（2）提供实战的示例，提供源代码。在这量大系统性的知识下，给用户提供清晰的思路和示例参考，更好的服务于自己的threeJS开发项目。文章正在建设中，下面的是cesium的示例教程（暂时撑门面），随......
- vue+ThreeJS：从0 到1 搭建开发环境
文章目录一、下载安装（懒人版）二、顺序安装1，下载安装nodejs2，安装vue-cli3，创建vue-three项目。4，安装threeJS5，安装elementUI（选装）最终package.json文件如下：本系列教程是在vue2.X的基础上加载threeJS程序，来开发各种示例程序。一、下载安装（懒人版）下载vue-three系统包，n......