three.js共0篇
three.js
排序
ThreeJS 变形动画 geometry.morphTargets 详解
一、创建变形动画的目标数据 首先我们要理解什么变形动画，假设我们有一个50, 50, 50的立方体，将其形状变为5, 200, 5长方体的这个过程我们就叫变形动画。 那在ThreeJS中我们如果创建一个变形动...
2年前
手把手带你入门 Three.js Shader 系列（二）
又是时隔两个月才更新这第二篇教程，原本以为最多一个星期就能更新出来，但写着写着总觉得有些地方解释的不够清楚，于是写到一半就放在一边，终于觉得不能再拖下去才找出来花两天继续写下去。可...
2年前
three.js 模型适应窗口调整显示大小代码解读
直接看效果 调整前调整后调整后模型可以全部展示，不会超出显示区域，有一些比较小的模型也是可以放大显示的 直接贴代码 function fitOnScreen() { const box = new THREE.Box3().setFromObject...
2年前
用Three.js搞个3D词云
2D词云经常用，是时候升级了，用一下3D词云！ 1.球坐标 除了常见的笛卡尔坐标系，极坐标系，还有一种坐标系，球坐标。通过以坐标原点为参考点，由方位角、仰角和距离构成一个三维坐标。 在three...
2年前
Three.js阴影
目录 Three.js入门 Three.js光源 Three.js阴影 使用灯光后，场景中就会产生阴影。物体的背面确实在黑暗中，这称为核心阴影（core shadow）。我们缺少的是落下的阴影（drop shadow），即对象在其...
2年前
如何用Three.js + Blender打造一个web 3D展览馆
作者：vivo 互联网前端团队- Wei Xing 运营活动新玩法层出不穷，web 3D炙手可热，本文将一步步带大家了解如何利用Three.js和Blender来打造一个沉浸式web 3D展览馆。 一、前言 3D展览馆是什么，...
2年前高德地图 JS2.0配合threejs 插件
git地址：github.com/AMap-Web/am… 示例 codepen示例 简介 本项目为高德地图的threejs图层插件，包含ThreeLayer图层、ThreeGltf加载 加载方式 当前项目支持CDN加载和npm加载两种方式。 CDN加载...
2年前
Three.js中实现碰撞检测
1. 引言 碰撞检测是三维场景中常见的需求，Three.js是常用的前端三维JavaScript库，本文就如何在Three.js中进行碰撞检测进行记述 主要使用到的方法有： 射线法Raycaster 包围盒bounding box 物...
2年前
ThreeJS实现水母漂浮
大家好，我是王大傻。这次给大家带来的是一个ThreeJS加载FBX水母模型的效果（PS：模型中的动画更好一点，但是因为是GLTF的缘故有些线条无法导出）。 前期准备 在文章开始大傻首先列举下此次文章...
2年前
3D数字孪生 – Three.js 项目实战之相机（四）
承上 在第一篇# 3D数字孪生 - Three.js 项目介绍与基础环境搭建（一）有介绍，在使用 three/filber 的Canvas组件时，默认情况下，会自动添加初始化一个透视相机（PerspectiveCamera），模拟了人...
2年前
手把手带你入门 Three.js Shader 系列（三）
文章更新（可能 ❌ / 一定 ✅）没那么频繁，欢迎加入「可视化交流群」进行交流。加古柳微信「xiaoaizhj」备注「可视化加群」即可，也有机会围观古柳朋友圈，实时追踪最新动态！另外，大家可以点...
2年前
threejs学习（一）概况
1.概况 之前粗略入门了一下计算机图形学和webgl，还有很多很多概念都没有涉及到，不过不影响学习新的工具threejs。它是一个帮助你绘制图像的工具库，封装了底层的webgl操作。学习的时候还是要谨...
2年前
Three.js使用InstancedMesh实现性能优化
1. 引言 有这么一种场景：需要渲染一座桥，桥有很多桥柱，桥柱除了位置与倾斜角度不完全相同外，其他均相同，由于桥柱数量很大，使用three.js绘制较为卡顿，如何优化？注意，要求后续能选中某个...
2年前
在Three.js中实现全景看图功能
全景看图是一个比较有趣的功能，全景看图让我们有一种身临场景的感觉，给用户一种更直观的体验。实现全景看图通过CSS3D即可实现，但是这里我分享关于Three.js的全景看图，因为Three.js可以实现...
2年前
我在前端修马路——three.js
这是three.js系列的第三篇文章。本文的内容包含基础场景的创建、模型加载、模型动画播放、碰撞检测等。 这里是预览地址 一、基础环境的搭建 这个部分主要内容是说明基础环境的搭建，初始化项目...
2年前
Three.js入门
Three.js 介绍 Three.js 是一个开源的应用级 3D JavaScript 库，可以让开发者在网页上创建 3D 体验。Three.js 屏蔽了 WebGL的底层调用细节，让开发者能更快速的进行3D场景效果的开发。 Three.js...
2年前
Three.js 学习记录shader黑客帝国数字雨
Three.js 学习记录shader黑客帝国数字雨 想锻炼锻炼自己输出能力 实现效果 需要一定shader知识 使用glsl-canvas插件展示效果 分步骤实现 1、生成黑白渐变图 根据y轴高度生成渐变，y值越大越白 #...
2年前
threejs点击模型实现模型边缘高亮的选中效果
先来个效果图 1.首先需要导入库 // 用于模型边缘高亮 import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js' import { RenderPass } from 'three/examples/js...
2年前
从零实现一个简易的Three.js轨道控制器
使用Three.js开发过3D网页的同学大概也使用过轨道控制器OrbitControls这个插件，借助OrbitControls可以方便地上下左右360度浏览3D场景，就像这样： 图1 今天我们就从0开发一个简易的OrbitContro...
2年前
在Three.js中实现汽车的3D展示
汽车的3D展示是一个比较常见的应用，今天我就通过three.js来与大家分享如何实现一个非常简单的3D汽车展示场景。 前言 虽然例子很简单，但也需要您掌握基本的three.js知识点，例如场景、模型等基...
2年前