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

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

前言 做3D场景相关项目的都知道，3D场景中常见的痛点，便是模型过大，面数过多，纹理太高清，节点层级过多等等，导致场景加载慢，渲染性能低，场景帧率低，如果模型开发的配合，可以让他们把模...

前言 大部分人会有一种感觉threejs学习更多的在学api，原理也只是略懂，为了深入学习，接下来我们将深入Threejs的core目录下的BufferAttribute类看看它做了什么？ core 在threejs的core核心文件...

1. 引言 有这么一种场景：需要渲染一座桥，桥有很多桥柱，桥柱除了位置与倾斜角度不完全相同外，其他均相同，由于桥柱数量很大，使用three.js绘制较为卡顿，如何优化？注意，要求后续能选中某个...

出场就要帅气！ 1.画出模型的点 this.loadModel('apple.glb').then((model) => { let obj = model.children[0].children[0]; let geometry = obj.geometry; //放大两倍 geometry.scale(2, 2,...

CSS2DRenderer css2DRenderer是一种特殊的渲染器，用于将HTML嵌到3D场景中，它可以让我们在3D场景中添加并显示 2D 的 HTML 元素。这对于创建用户界面和展示信息非常有用。比如在VR看房中，每个...

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

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

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

本文将直接从threejs的源码的基础几何体正方体和球体入手，深度解析原理。如果有webgl的基础的话，那么几何体的制作是非常容易的。 正方体 我们先看正方体的源码实现 import { BufferGeometry }...

本文内容：介绍web着色器的基本概念，以及通过一个着色器demo来进一步理解着色器的用法和作用。 顶点着色器 & 片元着色器 首先我们需要知道threejs绘制3D物体包含了两个主要属性：顶点以及...

本文章主要是实现一个具有波纹动画、地图下钻功能的3d地区域地图，废话不多说直接开始 创建场景并渲染出来 // 场景,用来存放物体的地方 const scene = new THREE.Scene(); // 透视相机 const ca...

又是时隔两个月才更新这第二篇教程，原本以为最多一个星期就能更新出来，但写着写着总觉得有些地方解释的不够清楚，于是写到一半就放在一边，终于觉得不能再拖下去才找出来花两天继续写下去。可...

作者：vivo 互联网前端团队- Wei Xing 运营活动新玩法层出不穷，web 3D炙手可热，本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆。 一、前言 3D展览馆是什么，...

一、基础材质实现着色器编程 Three.js提供了着色器材质（ShaderMaterial和RawShaderMaterial，着色器材质可参考这篇文章），它允许我们编写自定义着色器代码，着色器代码就像是一份指导书，告诉...

简介 通过three.js我们可以在网站中实现比较不错的3D效果，但three.js仅仅只是一个渲染库，如果想要做碰撞检测的话，通常情况会加上物理系统。 但今天，我想聊的是通过three.js的内置模块Octree...