three.js 笔记
望月归乡
勤学如春起之苗,不见其增,日有所长;辍学如磨刀之石,不见其损,日有所亏。
展开
-
three.js 物体轮廓高亮
背景:物体在鼠标移上去时有一个高亮的交互;在状态为异常时轮廓高亮并闪烁 方案: 使用 EffectComposer: 效果组合器 RenderPass: 在指定的场景和相机的基础上渲染出一个新场景 OutlinePass: -物体边界线条 ShaderPass: 使用该通道你可以传入一个自定义的着色器,用来生成高级的、自定义的后期处理通道 FXAAShader: 着色器主要功能是解决锯齿问题 import './EffectComposer' import './OutlineP原创 2022-05-21 16:53:39 · 2321 阅读 · 2 评论 -
three.js 墙上挖门
背景:需要在墙上 创建窗户和门 方案:使用 ThreeBSP.JS库 ThreeBSP.JS库介绍: 名称 描述 intersect(交集) 使用该函数可以基于两个现有几何体的重合的部分定义此几何体的形状。 union(并集) 使用该函数可以将两个几何体联合起来创建出一个新的几何体。 subtract(差集) 使用该函数可以在第一个几何体中移除两个几何体重叠的部分来创建新的几何体。 主要使用可以参考下郭大神的这篇文章:http://www.yanhuangxueyuan.com/原创 2022-05-21 16:24:59 · 548 阅读 · 0 评论 -
如何将three.js坐标体系中的坐标转换为二维坐标
背景: 线条是three.js开发的,每条线条的开始位置需要放一个2.5D的图标,所以就需要把三维的坐标转为二维 const myObj = document.getElementById(dom); const width = myObj.clientWidth; const height = myObj.clientHeight; const pos = {x:10,y:10,z:10}; function getPosition(pos = {}) { let a = new THREE.Ve原创 2022-05-21 15:33:06 · 1162 阅读 · 0 评论 -
three.js 笔记 --- 渲染图片 和 渲染obj,mtl文件
渲染图片 let textureLoader = new THREE.TextureLoader(); let textureLoaderRes = function (url) { return textureLoader.load(url, function (map) { map.wrapS = THREE.RepeatWrappi...原创 2020-04-22 10:14:19 · 1007 阅读 · 0 评论