1. 引言 碰撞检测是三维场景中常见的需求，Three.js是常用的前端三维JavaScript库，本文就如何在Three.js中进行碰撞检测进行记述 主要使用到的方法有： 射线法Raycaster 包围盒bounding box 物...

使用Three.js开发过3D网页的同学大概也使用过轨道控制器OrbitControls这个插件，借助OrbitControls可以方便地上下左右360度浏览3D场景，就像这样： 图1 今天我们就从0开发一个简易的OrbitContro...

高斯-克吕格 (Gauss-Krüger) 投影 高斯-克吕格也称作椭圆体版本的横轴墨卡托投影，因为它与墨卡托投影类似，不同之处在于高斯-克吕格的圆柱体沿经线而不是赤道接触球体或椭圆体。通过这种方法...

1.概况 之前粗略入门了一下计算机图形学和webgl，还有很多很多概念都没有涉及到，不过不影响学习新的工具threejs。它是一个帮助你绘制图像的工具库，封装了底层的webgl操作。学习的时候还是要谨...

什么是渲染流水线 渲染流水线的工作任务在于由一个三维场景出发、生成(或者说渲染)一张二维图像。换句话说，计算机需要从一系列的顶点数据、纹理等信息出发，把这些信息最终转换成一张人眼可以...

Three.js 学习记录shader黑客帝国数字雨 想锻炼锻炼自己输出能力 实现效果 需要一定shader知识 使用glsl-canvas插件展示效果 分步骤实现 1、生成黑白渐变图 根据y轴高度生成渐变，y值越大越白 #...

这是three.js系列的第三篇文章。本文的内容包含基础场景的创建、模型加载、模型动画播放、碰撞检测等。 这里是预览地址 一、基础环境的搭建 这个部分主要内容是说明基础环境的搭建，初始化项目...

摘要 如封面图所示，本文将基于 Vue3 + Three.js + GLSL 的相关知识，实现游戏《塞尔达传说：王国之泪》中低配版神庙能量光环效果。通过本文的阅读和学习，你将学习到的知识点包括：在 Three.js...

目录 Three.js入门 Three.js光源 Three.js阴影 Three.js纹理贴图 纹理是一种图像或图像数据，用于为物体的材质提供颜色、纹理、法线、位移等信息，从而实现更加逼真的渲染结果。 纹理可以应用于...

先来个效果图 之前写的那个稍微有点问题，帧率只有30，参照官方代码修改后，帧率可以达到50了，在不全屏的状态下，帧率60 1.首先需要导入库 // 用于模型边缘高亮 import { EffectComposer } fro...

全景看图是一个比较有趣的功能，全景看图让我们有一种身临场景的感觉，给用户一种更直观的体验。实现全景看图通过CSS3D即可实现，但是这里我分享关于Three.js的全景看图，因为Three.js可以实现...

先来个效果图 1.首先需要导入库 // 用于模型边缘高亮 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js' import { RenderPass } from 'three/examples/js...

目录 Three.js入门 Three.js光源 Three.js阴影 使用灯光后，场景中就会产生阴影。物体的背面确实在黑暗中，这称为核心阴影（core shadow）。我们缺少的是落下的阴影（drop shadow），即对象在其...

目录 Three.js入门 Three.js光源 本文我们将研究three.js中的灯光类型和JavaScript中的光源，探索不同的光源设置。我们的目标是全面理解光源设置和类型，比如环境光、半球光、矩形光、方向光、...

2D词云经常用，是时候升级了，用一下3D词云！ 1.球坐标 除了常见的笛卡尔坐标系，极坐标系，还有一种坐标系，球坐标。通过以坐标原点为参考点，由方位角、仰角和距离构成一个三维坐标。 在three...

Three.js 介绍 Three.js 是一个开源的应用级 3D JavaScript 库，可以让开发者在网页上创建 3D 体验。Three.js 屏蔽了 WebGL的底层调用细节，让开发者能更快速的进行3D场景效果的开发。 Three.js...

直接看效果 调整前调整后调整后模型可以全部展示，不会超出显示区域，有一些比较小的模型也是可以放大显示的 直接贴代码 function fitOnScreen() { const box = new THREE.Box3().setFromObject...

汽车的3D展示是一个比较常见的应用，今天我就通过three.js来与大家分享如何实现一个非常简单的3D汽车展示场景。 前言 虽然例子很简单，但也需要您掌握基本的three.js知识点，例如场景、模型等基...

大家好，我是王大傻。这次给大家带来的是一个ThreeJS加载FBX水母模型的效果（PS：模型中的动画更好一点，但是因为是GLTF的缘故有些线条无法导出）。 前期准备 在文章开始大傻首先列举下此次文章...