程序员必备小知识：近期学习了 WebGL 和 Three.js 的一些基础知识，本文内容主要介绍，通过使用React + three.js技术栈，加载3D模型、添加3D文字、增加动画、点击交互等。

上次使用较为基础的方式实现了人物控制，这次我们来使用pmndrs的新开源库 ecctrl 来简化人物控制的实现。

我们想要实现一个“点击地面，人物移动到点击处”的功能，需要什么前置条件，并且具体怎么实现呢？本文将讲述实现“点击地面，人物移动到点击处”功能需要的前置条件及其具体实现思路、步骤。

上一篇文章全景预览中，我们通过Threejs使用多种方式实现了全景预览的效果，以及俯瞰效果的场景动画，但是这都是在单个场景中实现的；也有读者评论说讲一下多场景下的场景过渡效果是如何实现的，本文就来看下

Three.js（下面简称 Three） 作为一个 3D 库，不仅减少了我们学习 OpenGL 和 WebGL 的成本，还大大提升了前端在可视化上给用户带来更多的真实、沉浸式的体验。众所周知，Three 更多的是用 3D 模型 + 投影相机 + 用户交互的方式来构建一个「3D …

我们经常会在一些景区、展厅、酒店民宿的宣传页面上，或者卖房看房网站，都能频繁的看到各种3D全景预览的网页效果，这样就可以如临其境般的看到所在场景的360度范围内的各种事物；那么，这样的效果是如何来实现

背景 随着电商时代的发展，网上购物的方式已经成为主流，良好的购物体验已经显得极为重要。展示给用户的视觉效果便不能仅仅局限于2D视觉效果，全方位的3D立体展示效果能让用户对商品进行 360度无死角的认识

背景 本文使用 Three.js SphereGeometry 创建 3D 全景图预览功能，并在全景图中添加二维 SpriteMaterial、Canvas、三维 GLTF 等交互点，实现具备场景切换

包含全景图或元素标识符的HTML元素。 全景图像的路径。对于等角的全景图，它必须是单个字符串（我文章使用的就是720°全景图）； 对于立方体贴图，它必须是数组或对象（对应六个面）。 启用的插件列表。（如后面会用到的标记插件marker） 导航栏中显示的文本。如果导航栏被禁用，它…