「和我一起学XXX」是我2023年的一个新企划，目的是向读者（也包括未来的自己）介绍我正在学习的某项新技术。文章会通过长期反复迭代的方式保持其内容的新鲜度。文章有较大内容更新时，会在文章开头进行更新时间说明（由于时间精力有限，更新的内容只能保障少数几个平台的同步，请见谅）。1.什么是Three.jsThree.js是一个基于WebGL的3DJavaScript开源库（遵循MIT协议），它使JavaScript开发者能够更方便地在Web应用中创建3D场景。请注意该定义的如下部分：基于WebGL：WebGL是一种3D绘图协议，对于开发者而言，它是一组更底层的绘图API，它负责绘制点，线与三角形，使
序： 又是很久没出随笔文章了，一篇文章有时候整理一天，实在是抽不出来时间。 最近在回顾几年前的项目时，发现这个智慧三维消防可视化项目很有回顾价值，索性就拿出来讲讲。 首先，我们要知道消防里的知识，不是简简单单的几个灭火器，烟感报警器这么简单的，消防是自有一套完整体系的，光是消防相关的产业年产值就有几千个亿。而我们普通非专业人士常见的消防设备只是消防产业中的皮毛。 单是消防系统就可以分为很多类，常见的有消防给水系统、消火栓系统、自动喷水灭火系统、气体灭火系统、防烟排烟系统、火灾自动报警系统等等。这些系统内部的组成结构又各有不同。每个系统里就有几十个甚至上百个不同的消防设备。比如我们常见的
序： 又是很久没出随笔文章了，一篇文章有时候整理一天，实在是抽不出来时间。 最近在回顾几年前的项目时，发现这个智慧三维消防可视化项目很有回顾价值，索性就拿出来讲讲。 首先，我们要知道消防里的知识，不是简简单单的几个灭火器，烟感报警器这么简单的，消防是自有一套完整体系的，光是消防相关的产业年产值就有几千个亿。而我们普通非专业人士常见的消防设备只是消防产业中的皮毛。 单是消防系统就可以分为很多类，常见的有消防给水系统、消火栓系统、自动喷水灭火系统、气体灭火系统、防烟排烟系统、火灾自动报警系统等等。这些系统内部的组成结构又各有不同。每个系统里就有几十个甚至上百个不同的消防设备。比如我们常见的
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助建模首先我们需要一些贴图素材贴图素材一般可以在3dtextures网站上找到，这里我找了2份，包含了墙的法线贴图和潮湿地面的法线、透明度、粗糙度贴图通过kokomi.AssetManager将贴图素材一次性全部加载出来，将它们应用到Mesh上，加上基本的环境光照，即可完成最基本的建模//光照constpointLight1=newTHREE.PointLight(config.color,0.5,17,0.8);pointLight1.position.set(0,2,0);this.scene.add(pointLight1);..
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助建模首先我们需要一些贴图素材贴图素材一般可以在3dtextures网站上找到，这里我找了2份，包含了墙的法线贴图和潮湿地面的法线、透明度、粗糙度贴图通过kokomi.AssetManager将贴图素材一次性全部加载出来，将它们应用到Mesh上，加上基本的环境光照，即可完成最基本的建模//光照constpointLight1=newTHREE.PointLight(config.color,0.5,17,0.8);pointLight1.position.set(0,2,0);this.scene.add(pointLight1);..
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前段时间接触了Three.js后，试着用他加载了一些模型three.js初体验简陋的了解了一下three.js的相关使用，并且写下了第一篇文章。但是过后还是对很多一知半解，作为不会建模且目前没有接触到相关业务需求的开发，难道没有模型就什么都不会了吗？因此我觉得有必要来试试没有模型的情况下自己来构建场景，以便于加深理解。我在前端干工地，最后成果如下图。预览地址从图中可以看到，整个画面由以下构成地面房子天空下面就能一步步的构建这个场景。一、准备工作我这里的环境是vue3+vite，基本环境准备好后就要安装three.js的库，安装完成后就
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助前段时间接触了Three.js后，试着用他加载了一些模型three.js初体验简陋的了解了一下three.js的相关使用，并且写下了第一篇文章。但是过后还是对很多一知半解，作为不会建模且目前没有接触到相关业务需求的开发，难道没有模型就什么都不会了吗？因此我觉得有必要来试试没有模型的情况下自己来构建场景，以便于加深理解。我在前端干工地，最后成果如下图。预览地址从图中可以看到，整个画面由以下构成地面房子天空下面就能一步步的构建这个场景。一、准备工作我这里的环境是vue3+vite，基本环境准备好后就要安装three.js的库，安装完成后就
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助建模首先我们需要一些贴图素材贴图素材一般可以在3dtextures网站上找到，这里我找了2份，包含了墙的法线贴图和潮湿地面的法线、透明度、粗糙度贴图通过kokomi.AssetManager将贴图素材一次性全部加载出来，将它们应用到Mesh上，加上基本的环境光照，即可完成最基本的建模//光照constpointLight1=newTHREE.PointLight(config.color,0.5,17,0.8);pointLight1.position.set(0,2,0);this.scene.add(pointLight1);..
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助建模首先我们需要一些贴图素材贴图素材一般可以在3dtextures网站上找到，这里我找了2份，包含了墙的法线贴图和潮湿地面的法线、透明度、粗糙度贴图通过kokomi.AssetManager将贴图素材一次性全部加载出来，将它们应用到Mesh上，加上基本的环境光照，即可完成最基本的建模//光照constpointLight1=newTHREE.PointLight(config.color,0.5,17,0.8);pointLight1.position.set(0,2,0);this.scene.add(pointLight1);..
声明：本文涉及图文和模型素材仅用于个人学习、研究和欣赏，请勿二次修改、非法传播、转载、出版、商用、及进行其他获利行为。摘要本文在专栏上一篇内容《Three.js进阶之旅：物理效果-碰撞和声音》的基础上，将使用新的技术栈ReactThreeFiber和Cannon.js来实现一个具有物理特性的小游戏，通过本文的阅读，你将学习到的知识点包括：了解什么是ReactThreeFiber及它的相关生态、使用ReactThreeFiber搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等，最后利用上述知识点，将开发一个简单的乒乓球小游戏。效果在正式学习之前，我们先来看看本文示例最终实现效果：页
