weixin_44242600的博客

CSS2DRenderer、CSS3DRenderer简介说明，threejs实现标签标注的三种方式介绍，react项目中使用CSS2DRenderer、CSS3DRenderer给模型新增标签。

在 three.js 中利用射线Raycaster进行碰撞检测获取射线穿透对象。基于全屏和非全屏dom射线拾取方法封装。

本文主要讲述了GLTF格式，GLTFLoader加载外部gltf模型、模型获取，模型遍历等，以及讲述纹理贴图颜色偏差解决方案。

Three.js中如何创建和操作几何体、材质以及网格模型。内容包括常见几何体的创建以及旋转、缩放等；基础和漫反射材质的使用，双面渲染的设置；以及网格模型讲述，模型的克隆和复制等。

three.js光源、光源辅助对象介绍，平行光设置阴影简介

three.js安装方法讲解，认识场景Scene、相机Camera、渲染器**Renderer**三个基本概念，创建three.js基础场景。

空间坐标点绘制多边形，实际上可以理解为是由 “点” 到 “线” 到 “面” 的一个过程。将空间坐标点通过`THREE.Shape`绘制多条线并闭合而得到一个封闭的二维形状平面对象，使用`THREE.ShapeGeometry`将`Shape`对象转换为`Geometry`对象添加`Mesh`，最终得到我们想要的多边形几何体。要得到一个围栏就需要添加“墙体”，“墙体”则是通过`THREE.BoxGeometry`计算偏移角度绘制多个几何体得到。

绘制围栏，实际上可以理解为一个空心圆柱体加底部，类似一个碗状的图形。我是通过three.js的圆柱体几何体`CylinderGeometry` + 三维模型运算`ThreeBSP`的函数`subtract`、圆形几何体`CircleGeometry`结合实现。

浏览器中浏览3D图形的时候，想要与3D图形之间做一些点击事件和交互操作，比较常用的一个解决方案就是使用Raycaster对象来实现（射线拾取）。three.js利用射线Raycaster进行碰撞检测获取射线穿透对象。常用方法：/** * @param { 事件对象 } event * @param { 场景对象 } scene * @param { 镜头对象 } camera */function getCanvasIntersects(event, scene, camera) {