前端3D
关注
分享
扫一扫
搬砖小田
这个作者很懒，什么都没留下…
展开
-
/ 3D案例特效
http://oss.icegl.cn/#/ 3D案例特效。原创 2024-10-25 11:49:22 · 141 阅读 · 0 评论 -
JS根据俩条直线，三个点，计算夹角
三个点计算夹角角度原创 2022-05-05 11:07:16 · 1720 阅读 · 1 评论 -
THREEJS 模型调整旋转中心
model.traverse(child => { if (child.isMesh) { let center = new THREE.Box3().setFromObject(child).getCenter(); }});原创 2022-03-15 16:33:59 · 5223 阅读 · 3 评论 -
threejs + echarts + 加地球 三维展示地图
<!DOCTYPE html><html lang="en"> <head> <title>hujiulong - earth</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maxi.原创 2022-02-26 14:08:49 · 2270 阅读 · 0 评论 -
threejs + echarts动态贴图并更新
echarts + threejs 缓冲区动态贴图原创 2022-02-24 11:50:37 · 2786 阅读 · 0 评论 -
常见3D特效。
常见的一些3D特效。原创 2021-08-13 18:19:10 · 230 阅读 · 0 评论 -
threejs进化文档
各种效果案例和特效：https://blog.youkuaiyun.com/de1981/article/details/102146948画线以及各种效果实现：https://blog.youkuaiyun.com/ruangong1203/article/details/52156327原创 2021-08-11 18:30:28 · 265 阅读 · 0 评论 -
VUE + threejs
创建vue项目步骤忽略…引入threejs方式【模块式开发】import * as THREE from "three";其他类库引入方式例如：import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";import { UnrealBloomPass} from "three/examples/jsm/postprocessing/UnrealBloomPass";import { ShaderPass原创 2021-05-12 14:29:34 · 3068 阅读 · 0 评论 -
threejs实现地图
方式1 模型师配合模型实现。方式2GEOJSON，可实现地图方式3three-geo实现threejs+地图threegeo官网https://www.npmjs.com/package/three-geo注意事项：1在 https://account.mapbox.com/access-tokens/ 注册access_token信息按照案例即可运行this.scene = new THREE.Scene();const ioToken = ‘自己申请去，我不提供’;const原创 2021-05-10 14:33:56 · 3732 阅读 · 0 评论 -
利用threebsp在平面集合体上面截取个门出来
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> html, body { margin: 0; height: 100%; } canva原创 2020-11-18 15:29:44 · 196 阅读 · 1 评论 -
threejs快速生成地图的方式以及代码
1.利用geojson，生成你想要区域的地图。2.下载到需要的json。3.代码生成模型。 <!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>3D</title> <link href="./css/index.css" rel="stylesheet"> <script type="text原创 2020-11-05 21:02:29 · 2959 阅读 · 5 评论 -
threejs 加载材质模型，显示不清晰问题。
canvas或者图片。在大的尺寸会失真。需要根据场景设备大小来使用对应的贴图原创 2020-11-05 19:28:33 · 4655 阅读 · 0 评论 -
1.精灵材质,生成3D面板。2.单页面应用，dispose防止资源泄露。3.模型发光带线
var textured = new THREE.TextureLoader().load("textures/warning.png"); var spriteMaterial = new THREE.SpriteMaterial({ // color: 0xffffff, map: textured }); var sprite = new THREE.Sprite(spriteMaterial); sprite.position.set( 25.729931791092394原创 2020-11-05 16:59:12 · 798 阅读 · 0 评论 -
threejs，后期处理大全。以及obj模型优化
看到一篇文章写得很好，特此记录一下。我要用的。如何使中心看的清楚，周围模糊。<script src="js/shaders/FocusShader.js"></script> var focusShader = new THREE.ShaderPass(THREE.FocusShader); focusShader.uniforms["screenWidth"].value = window.innerWidth; focusShader.uniforms["scr原创 2020-11-05 16:40:59 · 1301 阅读 · 0 评论 -
threejs生成由内而外光圈、城市掠过。
1.生成掠过的光圈材质。var uniform = { u_color: { value: new THREE.Color("#5588aa") }, u_tcolor: { value: new THREE.Color("#EF5F00") }, u_r: { value:0.8 }, u_length: { value: 20 },//扫过区域 u_max: { value: 600 }//扫过最大值};var Shader = { vertexShader: ` varying原创 2020-10-20 16:47:47 · 1916 阅读 · 3 评论 -
threejs实现场景扫光【光柱场景扫射】
1.创建ShaderPass对象let SweepingLightShader = {uniforms: {“tDiffuse”: {type: “t”, value: 0.0},“time”:{type: “f”, value: 1.0}},vertexShader:varying vec2 vUv; varying vec3 iPosition; void main(){ vUv = uv; iPosition = position; gl_Position = projectionMatr原创 2020-10-20 15:48:01 · 3286 阅读 · 1 评论 -
angular 引入bootstrap不生效解决办法
Angular中引入bootstrap不起作用的解决办法很多朋友在使用Angular引用bootstrap时，遇到了问题。发现引用之后，不起作用。多次检查，甚至一个字母一个字母地检查–无果。最后在index.html中link标签解决了事。这篇文章讲的是angular-cli中引入bootstrap的方法。如果你已经把字母都检查过了，那么你来对了，可以直接跳过前两步。在命令行中输入以下命令，下载bootstrapcnpm install bootstrap --save在package.json原创 2020-08-18 08:56:00 · 899 阅读 · 0 评论 -
angular10+threejs搭建3D
以前用纯js+threejs开发了3D。现在用angular试试。会展示部分代码。流程如下 1.搭建项目环境 ng new 项目名 引入需要的3d包，并且要加类型的说明，否则无法调用,如下： cnpm i three --save cnpm i three-full --save cnpm i gsap --save cnpm i stats.js --save --------------------------- cnpm i @types/three -s cnpm i @type原创 2020-08-15 15:57:04 · 2301 阅读 · 3 评论 -
threejs精灵Sprite。通过canvas创建2d和3d的模型材质
Sprite精灵Sprite叫精灵，计算机图形学中，精灵指包含于场景中的二维图像或动画（wiki）。在threejs中，这样说明Sprtite（doc） :A sprite is a plane that always faces towards the camera , generally with a partially transparent texture applied.Sprites do not cast shadows.即Sprite是一个永远面向相机的平面，通常用来加载纹理，并且，s原创 2020-08-13 17:15:31 · 2886 阅读 · 2 评论 -
threejs 3D添加背景图的方式
1.利用html元素的div背景图来设置。2.利用render设置color来渲染【只能设置rgb颜色，无法设置图片】3.利用threejs的EffectComposer渲染通道来处理。谁先addPass。则谁先渲染.部分代码如下：sceneBG = new THREE.Scene();var materialColor = new THREE.MeshBasicMaterial({ map:THREE.ImageUtils.loadTexture("../images/bg_ne原创 2020-08-12 18:20:06 · 4573 阅读 · 2 评论 -
threejs消除锯齿
Three.js锯齿(使用EffectComposer后处理)在没有使用EffectComposer后处理的时候关于渲染器的锯齿问题，可以参考文章“Three.js 锯齿”FXAAShader着色器通道设置引入着色器文件FXAAShader.js,目录位置/examples/js/shaders/FXAAShader.js,该着色器主要功能是解决锯齿问题。…通过ShaderPass构造函数把FXAAShader着色器和uniforms构成的对象作为参数，创建一个锯齿通道FXAAShaderP原创 2020-08-12 18:10:46 · 5626 阅读 · 0 评论