使用threejs实现模型爆炸效果

最新推荐文章于 2024-05-06 11:21:47 发布
最新推荐文章于 2024-05-06 11:21:47 发布
阅读量1.4w 收藏 63
点赞数 14
分类专栏： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_30621091/article/details/84585790
版权

使用threejs实现模型爆炸效果
这个效果是以mesh为单位进行位置偏移，具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>modelLoader</title>
</head>
<style>
    body {
        color: #000;
        font-family:Monospace;
        font-size:13px;
        text-align:center;
        font-weight: bold;

        background-color: #fff;
        margin: 0px;
        overflow: hidden;
    }
</style>
<body>
<input type="range" min="0" max="100" value="0" class="slider" id="myRange" style="position: absolute; top: 0; width: 350px">

<script src="../libs/three.js"></script>
<script src="../libs/OrbitControls.js"></script>


<script>

    let camera, controls, scene, renderer;

    //模型包围盒
    var modelBox3 = new THREE.Box3();
最低0.47元/天 解锁文章
pengpai123
关注
  • 14
    点赞
  • 踩
  • 63
    收藏
    觉得还不错? 一键收藏
  • 32
    评论
专栏目录
Threejs项目实战之二：产品三维爆炸图效果展示
九仞山的专栏
12-11 2548
产品三维爆炸图效果展示项目
基于threejs的炫酷缩略图到全屏放大动画特效
12-12
这是一款基于threejs的炫酷缩略图到全屏放大动画特效。该特效通过使用threejs。在用户点击缩略图时，将缩略图已某种炫酷的动画方式展开到全屏。
threejs模型楼层爆炸效果
04-23
模型分离，楼层扩散，模型爆炸效果
three.js实现三维爆炸效果
最新发布
yunbabac的博客
05-06 430
three.js实现三维爆炸效果，主要是split函数。
threejs实现任意模型的爆炸效果
Polaris_tl的博客
05-23 3978
threejs通过代码计算实现任意模型的爆炸效果
threejs：实现模型爆炸效果
weixin_42755384的博客
04-10 4218
参考文献：https://blog.csdn.net/qq_30621091/article/details/84585790 占坑。。
29three.js 加载FBX动画
X01动力装甲的专栏
05-29 3659
来源与官网，代码如下： <!DOCTYPE html> <html lang="en"> <head> <title>2-1three.js FBX loader</title> <meta charset="utf-8"> <meta name="viewport" content...
three.js实现obj模型爆炸
weixin_43974540的博客
04-16 3942
由于obj模型是一个有多个mesh组成的组，而不是mesh，因此通过改变obj模型中mesh即children的位置，可实现模型爆炸。 通过在控制台输入console.log(model.children)查看，如图 首先获取模型中心坐标，由于在设置模型的位置信息时，将模型的中心的设置为（0，0，0），因此这里直接获取（0，0，0）作为模型中心坐标。 var modelWorldCenter=n...
three.js粒子系统-通过加载纹理贴图实现下雪特效(vue中使用three.js45)
点燃火柴的博客
12-18 1171
通过纹理导入实现下雪特效1.VUE中纹理导入过程1.1纹理图片存放路径1.2获取环境变量中的BASE_URL1.3通过THREE.TextureLoader加载纹理贴图2.创建下雪特效2.1用加载的纹理贴图创建雪花2.2 实现下雪特效动画3.demo效果4.demo代码 1.VUE中纹理导入过程 1.1纹理图片存放路径 vue中导入时默认的public下，所以要使用的纹理图片需要放在该路径下，如下图images文件夹下的snow.png就是我们要使用的纹理图片 1.2获取环境变量中的BASE_URL 在v
【Three.js】报警效果
u013541148的博客
04-27 1875
赋上一张报警贴图（白色的）： 直接上代码： let texture = new THREE.TextureLoader().load("images/circle2White.png"); let material = new THREE.SpriteMaterial({ //创建精灵材质 map: texture, // 赋值贴图 color: "#ff0000", // 设置颜色 transparen.
基于threejs实现3D爆炸碎片轮播图特效.zip
11-10
【标题】中的“基于threejs实现3D爆炸碎片轮播图特效”表明这是一个关于使用Three.js库在前端开发中创建3D动态效果的项目。Three.js是一个JavaScript库，它为Web浏览器提供了丰富的3D图形渲染功能，使得开发者无需...
three.js打开礼物爆炸动画特效特效代码
03-20
three.js打开礼物爆炸动画特效是一款包装好的礼物点击打开爆炸动画特效。
基于Threejs的火焰烟雾动画效果代码
09-12
**Three.js 概述** Three.js 是一个JavaScript库...总的来说，这个项目展示了如何使用Three.js库来创建复杂的3D火焰和烟雾动画效果，通过理解Three.js的核心概念和技术，我们可以进一步探索和创建更多的3D交互式内容。
基于threejs的3D爆炸碎片轮播图特效
12-12
【基于threejs的3D爆炸碎片轮播图特效】是一个运用了HTML5库技术，特别是Three.js库，来实现一种创新且引人注目的视觉效果。Three.js是JavaScript的一个库，专为在Web浏览器中创建和展示三维图形而设计。这个特效...
网页模板——基于threejs实现3D爆炸碎片轮播图特效.zip
11-24
【标题】中的“网页模板——基于threejs实现3D爆炸碎片轮播图特效”表明这是一个使用Web技术，特别是three.js库来创建的3D视觉效果。Three.js是JavaScript的一个库，专为在Web浏览器中创建和展示三维图形设计。这个...
threejs基础动态效果制作方法
yunduanzhijie的博客
03-04 845
一：常见平移，缩放，旋转： 利用小量变化累加，形成连贯动态效果 常见属性— object.position || object.scale || object.rotation… let value //位移差量 let option.opacity //透明度差量..... let b=setInterval(function(){ //每次平移量（固定时间） line.position.y+=value/20 //每次透明度减小量（固定时间）
VUE+Three.js(添加边框，改变颜色，切换模型，模型爆炸)
qq_29509389的博客
04-08 762
VUE+Three.js：添加边框，改变颜色，切换模型，模型爆炸VUE+Three.js模型原型效果单击模型部件着色单击模型部件添加边框双击模型部件放大，单独展示该部件右键模型部件添加文字标签模型切换模型爆炸效果实现 VUE+Three.js 模型原型效果 单击模型部件着色 单击模型部件添加边框 双击模型部件放大，单独展示该部件 右键模型部件添加文字标签 模型切换 模型爆炸效果实现
纯shader实现动态警告可视化组件(three.js实战16)
点燃火柴的博客
10-27 1019
纯shader实现动态警告可视化组件1. demo效果2. 实现要点2.1 绘制外层2.2绘制中间环状圆2.3 绘制中心感叹号3. demo代码 1. demo效果 waring-circle 2. 实现要点 2.1 绘制外层 外层由两部分组成，一个是组成圆环的小圆点，一个是动态变换的弧段，具体实现如下 vec4 drawOutCirclePoint(vec2 st){ vec4 o
three.js 实现模型波纹效果
05-05
要实现模型波纹效果，可以使用three.js中的ShaderMaterial和RenderTarget实现。具体步骤如下： 1. 创建两个RenderTarget，一个用于存储模型的深度信息，另一个用于存储波纹效果的纹理信息。 ```javascript var depthRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.NearestFilter, magFilter: THREE.NearestFilter } ); var rippleRenderTarget = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter } ); ``` 2. 创建一个ShaderMaterial，该材质需要使用深度RenderTarget和波纹RenderTarget中的信息来计算出波纹效果的纹理。 ```javascript var rippleMaterial = new THREE.ShaderMaterial( { uniforms: { depthTexture: { value: depthRenderTarget.texture }, rippleTexture: { value: rippleRenderTarget.texture }, time: { value: 0 }, resolution: { value: new THREE.Vector2( window.innerWidth, window.innerHeight ) } }, vertexShader: document.getElementById( 'rippleVertexShader' ).textContent, fragmentShader: document.getElementById( 'rippleFragmentShader' ).textContent } ); ``` 3. 将该ShaderMaterial应用到模型上，并将模型渲染到深度RenderTarget中。 ```javascript var model = ...; // 创建模型 var scene = new THREE.Scene(); scene.add( model ); var camera = ...; // 创建相机 var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); renderer.setRenderTarget( depthRenderTarget ); renderer.render( scene, camera ); ``` 4. 创建一个平面，使用上面创建的ShaderMaterial来渲染该平面，并将该平面渲染到波纹RenderTarget中。 ```javascript var ripplePlaneMaterial = new THREE.MeshBasicMaterial( { map: rippleRenderTarget.texture } ); var ripplePlaneGeometry = new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ); var ripplePlane = new THREE.Mesh( ripplePlaneGeometry, ripplePlaneMaterial ); scene.add( ripplePlane ); var rippleCamera = ...; // 创建相机 var rippleRenderer = new THREE.WebGLRenderer(); rippleRenderer.setSize( window.innerWidth, window.innerHeight ); rippleRenderer.setRenderTarget( rippleRenderTarget ); rippleRenderer.render( rippleScene, rippleCamera ); ``` 5. 在循环渲染中更新ShaderMaterial的uniform变量，并重新渲染波纹RenderTarget。 ```javascript function animate() { requestAnimationFrame( animate ); rippleMaterial.uniforms.time.value += 0.1; rippleRenderer.setRenderTarget( rippleRenderTarget ); rippleRenderer.render( rippleScene, rippleCamera ); rippleRenderer.setRenderTarget( null ); renderer.render( scene, camera ); } ``` 6. 在ShaderMaterial的vertexShader和fragmentShader中实现波纹效果的计算。 vertexShader: ```glsl uniform float time; varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 ); // 计算波纹效果 float frequency = 10.0; float amplitude = 0.2; float speed = 1.0; vec3 pos = position; pos.z += sin( pos.x * frequency + time * speed ) * amplitude; pos.z += sin( pos.y * frequency + time * speed ) * amplitude; gl_Position = projectionMatrix * modelViewMatrix * vec4( pos, 1.0 ); } ``` fragmentShader: ```glsl uniform sampler2D depthTexture; uniform sampler2D rippleTexture; uniform vec2 resolution; varying vec2 vUv; void main() { // 获取深度信息 float depth = texture2D( depthTexture, vUv ).r; // 获取波纹信息 float ripple = texture2D( rippleTexture, vUv ).g; // 根据深度和波纹信息计算出颜色 vec3 color = vec3( depth * ripple ); gl_FragColor = vec4( color, 1.0 ); } ``` 这样就可以在模型上实现波纹效果了。具体实现可以参考以下示例代码： https://codepen.io/wanbo/pen/XWpXzjV
评论 32
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值