Three
three.js 入门学习(一)
webGl和three.js http://webgl3d.cn/pages/aac9ab/ 图形学算法 Web3D WebGPU 下载 yarn add three @types/three 使用 import * as THREE from 'three'; onst scene = new T ......
Three.js#04#Responsive Design&Scenegraph
参考https://threejs.org/manual/#en/responsive和https://threejs.org/manual/#en/scenegraph 前者主要是说怎样创建一个响应式的three.js应用，就是在变化屏幕大小的时候，画面不会畸形。后者是再说，怎么组合小的组件变成一 ......
Three.js教程：Face3对象定义Geometry的三角形面
推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 Face3对象定义Geometry的三角形面 几何体Geometry的三角面属性geometry.faces和缓冲类型几何体BufferGeometry顶点索引属性BufferGeometry.index类似都是顶点位 ......
Three.js教程：设置Geometry顶点位置、顶点颜色数据
推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 前面几篇文章通过缓冲类型几何体BufferGeometry给大家讲解了顶点位置、颜色、法向量、索引数据，本节课给大家引入一个新的threejs几何体APIGeometry。几何体Geometry和缓冲类型几何体Buff ......
CF1699A The Third Three Number Problem
###题意简述 构造出一个三元组a,b,c使得(a ⊕ b)+(a ⊕ c)+(b ⊕ c) = n,若无解输出-1。 符号 ⊕ 的意思为异或 ###个人分析 首先要了解异或符号的性质： 1,x⊕0=x 2,x⊕x=x 根据异或符号的性质可以得到一下构造： a=b=0,c=n/2 c=0,a=b=n ......
THREE
@(THREE.js + 语音识别控制) 概述 如有不明白的可以加QQ：2354528292；wx: aichitudousien 更多教学视频请访问：https://space.bilibili.com/236087412 使用aframe加载模型，然后使用语音识别功能对模型进行控制，模型可做起跳 ......
Three 解决加载模型闪烁
@(Three 解决加载模型闪烁) 概述 在一次使用 three加载模型中遇到模型闪烁严重的问题，相机拉得越远模型闪烁越厉害，出现此问题的原因是因为出现了深度问题，以下记录解决办法 解决方法 WebGLRenderer开启logarithmicDepthBuffer logarithmicDepth ......
AR人脸识别 Three
@(AR人脸识别 Three.js + tensorflow.js（一）) 概述 如有不明白的可以加QQ：2354528292；wx: aichitudousien 更多教学视频请访问：https://space.bilibili.com/236087412 源码获取：https://item.ta ......
AR室内导航-Three
@(AR室内导航-Three.js) 概述 如有不明白的可以加QQ：2354528292；wx: aichitudousien 更多教学视频请访问：https://space.bilibili.com/236087412 源码获取：https://item.taobao.com/item.htm?s ......
maptalks+three实战项目 智慧城市项目
@(maptalks+three实战项目 智慧城市项目) 概述 如有不明白的可以加QQ：2354528292；wx: aichitudousien 更多教学视频请访问：https://space.bilibili.com/236087412 源码获取： https://item.taobao.com ......
Three.js教程：顶点索引复用顶点数据
推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 顶点索引复用顶点数据 通过几何体BufferGeometry的顶点索引属性BufferGeometry.index可以设置几何体顶点索引数据，如果你有WebGL基础很容易理解顶点索引的概念，如果没有也没有关系，下面会通过 ......
Three.js教程：Face3对象定义Geometry的三角形面
推荐：将NSDT场景编辑器加入你的3D工具链 其他系列工具：NSDT简石数字孪生 Face3对象定义Geometry的三角形面 几何体Geometry的三角面属性geometry.faces和缓冲类型几何体BufferGeometry顶点索引属性BufferGeometry.index类似都是顶点位 ......
Three.js教程：顶点位置数据解析渲染
推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 顶点位置数据解析渲染 如果你没有WebGL基础，可以先不用记忆每个的threejs 具体内容，有一个大致印象即可，学习本节课的重点是建立顶点的概念。如果你建立了顶点的概念，那么对于你深入理解学习Three.js很有帮助。 ......
Three.js 中的 Reflector 类
说明 Reflector 是 three.js 中的一个类，用于创建反射效果的对象。它继承自 Mesh，可以添加到场景中作为一个可渲染的物体。 Reflector 的构造函数如下： constructor(geometry?: BufferGeometry, options?: ReflectorO ......
Three.js#03#Three.js Fundamentals starting lesson（笔记）
Three.js Fundamentals starting lesson 基础 注意，在图中，相机一半在镜头外，一半在镜头内。这是为了表示，在three.js中，与其他对象不同，相机不必在场景中发挥作用。就像其他对象一样，Camera作为其他对象的子对象，将相对于其父对象移动和定向。在关于场景的文 ......
Three.js#02#Next Steps
以下内容由GPT辅助生成。 Disposing resources 这段内容主要讲解了在Three.js中如何释放不再使用的对象，以提高性能并避免内存泄漏。 重要的是要注意，Three.js无法自动释放一些与WebGL相关的资源，如缓冲区、着色器程序等。你需要通过特定的API来释放这些资源。 几何体 ......
Three.js教程：材质效果
推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 材质效果 前面案例中几何体对应网格模型材质只是设置了一个颜色，实际渲染的时候往往会设置其他的参数，比如实现玻璃效果要设置材质透明度，一些光亮的表面要添加高光效果。 半透明效果 更改场景中的球体材质对象构造函数THREE. ......
Three.js#01#入门
环境搭建 根据官方教程搭建开发环境。 项目根目录有index.html、main.js、public/三个文件（夹） 然后把nodejs16x卸载了，因为官方貌似今年底即将停止维护，换成了nodejs18x并且设置镜像： npm install -g cnpm --registry=https:// ......
使用js对tensorspace/three.js/webgl进行截图
使用js对tensorspace/three.js/webgl进行截图 问题分析 场景：在右侧，是 tensorspace库 使用three.js 调用webgl 对模型进行渲染的画面。我需要使用js对右侧画面进行截图，并保存至本地用于分析。 问题：对webgl进行截图需要进行一些特别的操作，使用h ......
Three.js 进阶之旅：全景漫游-高阶版在线看房 🏡
Three.js 进阶之旅：全景漫游-高阶版在线看房 🏡 声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。 摘要 专栏上篇文章《Three.js 进阶之旅：全景漫游-初阶移动相机版》中通过创建多个球体全景场景并移动相机和控制器的 ......
Three.js教程：3D场景中插入新的几何体
推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 3D场景中插入新的几何体 前面课程绘制了一个立方体效果，下面通过three.js的球体构造函数SphereGeometry()在三维场景中添加一个球几何体。 SphereGeometry构造函数 SphereGeomet ......
Three.js教程：鼠标操作三维场景
推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 为了使用鼠标操作三维场景，可以借助three.js众多控件之一OrbitControls.js，可以在下载的three.js-master文件中找到(three.js-master\examples\js\control ......
Three.js教程：旋转动画、requestAnimationFrame周期性渲染
推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：NSDT简石数字孪生 基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画，初步了解three.js可以做什么，深入讲解three.js动画之前，本节课先制作一个简单的立方体旋转动画。 本节课是在1.1节 第一个3D场景已绘制 ......
Three.js教程：第一个3D场景
推荐：将NSDT场景编辑器加入你3D工具链 其他工具系列：https://nsdt.cloud/ 下面的代码完整展示了通过three.js引擎创建的一个三维场景，在场景中绘制并渲染了一个立方体的效果，为了大家更好的宏观了解three.js引擎， 尽量使用了一段短小但完整的代码实现一个实际的三维效果图 ......
three.js中某个物体跟随camera进行旋转
const camera = useThree().camera; const borderRef = useRef(); useFrame(()=>{ //通过反正切函数，获得在Y轴旋转的角度。由欧拉角定义可如此设置。 borderRef.current.rotation.y = Math.ata ......
react-three-fiber
npx create-react-app . 当前目录下面安装 className / htmlFor 注视 { /* */ } useState 第二个参数：最好使用 函数来设置值，因为 可能有异步的情况导致 值设置不正确 getItem('count')?? 0 undefined或者null ......
和我一起学 Three.js【初级篇】：1. 搭建 3D 场景
本篇文章介绍了 Web 3D 世界的渲染原理，以及如何通过 Three.js 搭建一个 3D 场景并添加必要组件，在文章的最后，我们甚至还通过动画和变换属性得到了一个不断旋转的立方体！ ......
Three.js 进阶之旅：全景漫游-高阶版在线看房 🏡
本文使用Three.js实现一个可以应用到实际项目中的3D在线看房案例。通过阅读本文和实践案例，你将学到的知识包括：使用 Three.js 实现多个场景的加载和场景间的丝滑过渡切换、随着空间一直和角度实时变化的房源小地图、在全景场景中添加如地面指引、空间物体展示、房间标注等多种类型的交互热点等。 ......
第136篇:Three.js基础入门动画API:setInterval 与 requestAnimationFrame的区别
好家伙,书接上文 function animate() { //请求-动画-框架 requestAnimationFrame( animate ); //改变正方体在场景中的位置,让正方体动起来 cube.rotation.x += 0.01; cube.rotation.y += 0.01; re ......
导入 three.js 库
发现导入 three.js 文件的时候，官方文档的写法是： import * as THREE from 'three'; 我并不清除 three 指的是文件夹还是 js 文件，如果是后者，应当加上 .js 后缀 由于我并没有使用任何框架，我发现只有导入 Three.js 文件才能运行： impor ......