使用 Three.js 和 Matcap 材质打造创意 3D 卡片效果

2025-05-15 0 613

使用 Three.js 的 WebGL 小实验。突出其在 Three.js 和 Matcap 材质上的创意应用。

使用 Three.js 和 Matcap 材质打造创意 3D 卡片效果
实现代码

HTML:

<body></body>
CSS:
body {  overflow: hidden;}

JAVASCRIPT:


const settings = {  sizes: {    width: window.innerWidth,    height: window.innerHeight  },  boxDimensions: {    h: 1.4,    w: 1,  }}//texturesconst textureLoader = new THREE.TextureLoader();const photoTexture02 = textureLoader.load('https://assets.codepen.io/4201020/city2.png?format=auto');const photoTexture03 = textureLoader.load('https://assets.codepen.io/4201020/shopp-e-1731593813681771088199459824.png');const photoTexture = textureLoader.load('https://assets.codepen.io/4201020/shopp-e-1731594468645280783813006762.png');photoTexture.wrapS = THREE.RepeatWrapping;photoTexture.wrapT = THREE.RepeatWrapping;photoTexture.repeat.set.1.1 );// initconst scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, settings.sizes.width / settings.sizes.height, 0.11000);camera.position.set(003);camera.lookAt(000);scene.add(camera);
const sun = new THREE.AmbientLight(0xffffff.5);scene.add(sun);
const planeGeometry = new THREE.PlaneGeometry(settings.boxDimensions.w, settings.boxDimensions.h);
const renderer = new THREE.WebGLRenderer( { antialias: true } );renderer.setSize( window.innerWidth, window.innerHeight );renderer.setAnimationLoop( animation );document.body.appendChild( renderer.domElement );
function RoundedPortalPhotoPlane(geometry, photoTexture) {  const material = new THREE.MeshMatcapMaterial({    matcap: photoTexture,    transparent: true,  })
  material.onBeforeCompile = (shader) => {    shader.vertexShader = shader.vertexShader.replace(      '#include <common>',      `          #include <common>          varying vec4 vPosition;          varying vec2 vUv;      `  );    shader.vertexShader = shader.vertexShader.replace(        '#include <fog_vertex>',        `            #include <fog_vertex>            vPosition = mvPosition;            vUv = uv;        `    );    shader.fragmentShader = shader.fragmentShader.replace(      `#include <common>`,      `      #include <common>      varying vec4 vPosition;      varying vec2 vUv;      float roundedBoxSDF(vec2 CenterPosition, vec2 Size, float Radius) {          return length(max(abs(CenterPosition)-Size+Radius,0.0))-Radius;        }      `    );    shader.fragmentShader = shader.fragmentShader.replace(      `#include <dithering_fragment>`,      `      #include <dithering_fragment>
      // The pixel space scale of the rectangle.      vec2 size = vec2(1.01.0);      // How soft the edges should be (in pixels). Higher values could be used to simulate a drop shadow.      float edgeSoftness  = 0.001;      // The radius of the corners (in pixels).      float radius = 0.08;      // Calculate distance to edge.      float distance  = roundedBoxSDF(vUv.xy - (size/2.0), size/2.0, radius);      // Smooth the result (free antialiasing).      float smoothedAlpha =  1.0-smoothstep(0.0, edgeSoftness * 2.0,distance);      // Return the resultant shape.      //vec4 quadColor = mix(vec4(1.0, 1.0, 1.0, 1.0), vec4(0.0, 0.2, 1.0, smoothedAlpha), smoothedAlpha);      gl_FragColor = vec4(outgoingLight, smoothedAlpha);      `    );        console.log(shader.fragmentShader);
  };  const plane = new THREE.Mesh(    geometry,    material  );
  return plane;}
// planesconst planeGroup = new THREE.Group();
const photoPlane01 = new RoundedPortalPhotoPlane(  planeGeometry,  photoTexture02);photoPlane01.position.set(-101);photoPlane01.rotation.y = Math.PI * 0.1;photoPlane01.name = 'plane1';planeGroup.add(photoPlane01);
const photoPlane02 = new RoundedPortalPhotoPlane(  planeGeometry,  photoTexture);
photoPlane02.position.set(000.5);photoPlane02.name = 'plane2';planeGroup.add(photoPlane02);


const photoPlane03 = new RoundedPortalPhotoPlane(  planeGeometry,  photoTexture03);photoPlane03.position.set(101);photoPlane03.rotation.y = Math.PI * -0.1;photoPlane03.name = 'plane3';planeGroup.add(photoPlane03);scene.add(planeGroup);
const mouse = new THREE.Vector2();let xParallaxFactor = -0.3;let yParallaxFactor = 0.3;//mouse eventswindow.addEventListener('mousemove', (event) => {  mouse.x = event.clientX / settings.sizes.width * 2 - 1//could also do it this way: map(event.clientX, 0, sizes.width, -1, 1)  mouse.y = - (event.clientY / settings.sizes.height) * 2 + 1//could also do it this way: map(event.clientY, 0, sizes.height, 1, -1)});
// animationconst clock = new THREE.Clock()let previousTime = 0;
function animation( time ) {
const elapsedTime = clock.getElapsedTime()  const deltaTime = elapsedTime - previousTime;  previousTime = elapsedTime;
  const parallaxX = mouse.x * xParallaxFactor;  const parallaxY = mouse.y * yParallaxFactor;    planeGroup.rotation.y += (parallaxX - planeGroup.rotation.y) * 3 * deltaTime;    planeGroup.rotation.x += (parallaxY - planeGroup.rotation.x) * 3 * deltaTime;
	renderer.render( scene, camera );
}

源码:

https://codepen.io/smcnally000/pen/eYqXWyJ

体验:

https://codepen.io/smcnally000/full/eYqXWyJ

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

免责声明 1、百创网作为第三方中介平台,依据交易合同(商品描述、交易前商定的内容)来保障交易的安全及买卖双方的权益; 2、非平台线上交易的项目,出现任何后果均与百创网无关;无论卖家以何理由要求线下交易的,请联系管理举报。 3. 百创网网站的资源均由店家上传出售,本站无法判断和识别资源的版权等合法性属性。如果您对本网站上传的信息资源的版权存有异议,请您及时联系 我们。如果需要删除链接,请下载下面的附件,正确填写信息后并发给我们,本站核实信息真实性后,在24小时内对商品进行删除处理。 联系邮箱:baicxx@baicxx.com (相关事务请发函至该邮箱)

百创网-源码交易平台_网站源码_商城源码_小程序源码 行业资讯 使用 Three.js 和 Matcap 材质打造创意 3D 卡片效果 https://www.baicxx.com/30901.html

常见问题
  • 1、自动:拍下后,点击(下载)链接即可下载;2、手动:拍下后,联系卖家发放即可或者联系官方找开发者发货。
查看详情
  • 1、源码默认交易周期:手动发货商品为1-3天,并且用户付款金额将会进入平台担保直到交易完成或者3-7天即可发放,如遇纠纷无限期延长收款金额直至纠纷解决或者退款!;
查看详情
  • 1、百创会对双方交易的过程及交易商品的快照进行永久存档,以确保交易的真实、有效、安全! 2、百创无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保,请买家自行鉴别; 3、在源码同时有网站演示与图片演示,且站演与图演不一致时,默认按图演作为纠纷评判依据(特别声明或有商定除外); 4、在没有”无任何正当退款依据”的前提下,商品写有”一旦售出,概不支持退款”等类似的声明,视为无效声明; 5、在未拍下前,双方在QQ上所商定的交易内容,亦可成为纠纷评判依据(商定与描述冲突时,商定为准); 6、因聊天记录可作为纠纷评判依据,故双方联系时,只与对方在百创上所留的QQ、手机号沟通,以防对方不承认自我承诺。 7、虽然交易产生纠纷的几率很小,但一定要保留如聊天记录、手机短信等这样的重要信息,以防产生纠纷时便于百创介入快速处理。
查看详情
  • 1、百创作为第三方中介平台,依据交易合同(商品描述、交易前商定的内容)来保障交易的安全及买卖双方的权益; 2、非平台线上交易的项目,出现任何后果均与百创无关;无论卖家以何理由要求线下交易的,请联系管理举报。
查看详情
  • 免责声明 1、百创网作为第三方中介平台,依据交易合同(商品描述、交易前商定的内容)来保障交易的安全及买卖双方的权益; 2、非平台线上交易的项目,出现任何后果均与百创网无关;无论卖家以何理由要求线下交易的,请联系管理举报。 3. 百创网网站的资源均由店家上传出售,本站无法判断和识别资源的版权等合法性属性。如果您对本网站上传的信息资源的版权存有异议,请您及时联系 我们。如果需要删除链接,请下载下面的附件,正确填写信息后并发给我们,本站核实信息真实性后,在24小时内对商品进行删除处理。 联系邮箱:baicxx@baicxx.com (相关事务请发函至该邮箱)
查看详情

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

你的前景,远超我们想象