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

用Three.js搞个3D饼图 1.准备工作 （1）渐变颜色 /** * 获取暗色向渐变颜色 * @param {string} color 基础颜色 * @param {number} step 数量 * @returns {array} list 颜色数组 */ export funct...

之前有实现过基于three.js的八叉树碰撞检测，当我们继续拓展时，利用three.js的便捷开发，尝试实现一个火影忍者的世界，当然只是一个小世界，一个简单的人物，一个简单的场景，一些简单的交互，...

点进来就看炫酷的3D字体！ 1.准备工作:字体模型json 可以通过facetype.js将字体包转成typeface.json facetype.jsgithub链接：https://github.com/gero3/facetype.js facetype.js官网链接：http:...

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

想必大家都看过哆啦A梦，时光机是里面的常用道具。 那坐时光机是什么样的体验呢？ 我用 Three.js 写了一下，应该是这种感觉： 我们一起来实现一下。 首先，我们过一下 Three.js 的基础： 在二维...

接上文# 3D数字孪生 - Three.js 场景光源（二）最后的问题: “为何已关闭场景中所有光源，仍然有些面是亮的呢？” 我们不妨近距离的观察一下，打开场景中的方向光 DirectionalLight，发光的 线...

一、创建变形动画的目标数据 首先我们要理解什么变形动画，假设我们有一个50, 50, 50的立方体，将其形状变为5, 200, 5长方体的这个过程我们就叫变形动画。 那在ThreeJS中我们如果创建一个变形动...

机器学习 oz@0xozram 9号在twitter上发了这样的一个短视频： 当然，这属于机器学习领域的内容，也就是大名鼎鼎的 google 在2015开源的 tensorflow，TensorFlow.js也可以与Web图形库（如D3.js、T...

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

本篇文章主要缝合了官网的几个案例，并无高深或复杂的逻辑和代码； 镜头跟踪在游戏或者展馆等场景下非常常见，可以是第一人称，也可以是第三人称，本次带来的是第三人称的镜头跟踪方法 模型与动...

材质（Material）是用来定义物体外观的重要组成部分。它们决定了物体如何反射光线并显示在屏幕上。Three.js 提供了多种不同类型的材质，每种材质都有不同的特性和效果。材质就像物体的皮肤，它...

我正在参加「掘金·启航计划」 先上代码 也可以直接去github github.com/1023byte/3D… 前言 threejs小练习，从头实现如何加载地理数据，并将其映射到三维场景中的对象上。 获取数据 在开始绘制...

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

前言 前段时间笔者学习了threejs，了解了一些基本的使用方法，引起了想要做个相关的3Ddemo的兴趣，于是想到了做个3D的相框册，同时参考了网上一些其他笔者的方法自己手动实现了一下，以下是这个...

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

风格设置 加载地图 使用AMapLoader.load加载地图，从 控制台 申请一个属于自己的key import AMapLoader from '@amap/amap-jsapi-loader'; ... const AMap = await AMapLoader.load({ 'key': '您...

文章更新（可能 ❌ / 一定 ✅）没那么频繁，欢迎加入「可视化交流群」进行交流。加古柳微信「xiaoaizhj」备注「可视化加群」即可，也有机会围观古柳朋友圈，实时追踪最新动态！另外，大家可以点...

承上 在第一篇# 3D数字孪生 - Three.js 项目介绍与基础环境搭建（一）有介绍，在使用 three/filber 的Canvas组件时，默认情况下，会自动添加初始化一个透视相机（PerspectiveCamera），模拟了人...