Pixi.js在衣服或布料上定制图案

PIXI Cloth Mesh，可以切换图案和撕扯衣服。很逼真的衣服飘动效果。

html5, cloth

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3200
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

let mesh;
let cloth;
let spacingX = 5;
let spacingY = 5;
let accuracy = 1;

let opts = {
  image: '/uploads/161101/face-optim.png',
  gravity: 200,
  friction: 0.99,
  bounce: 0.3,
  pointsX: 20,
  pointsY: 22,
  renderCloth: true,
  mouseInfluence: 35,
  pinCorners: true,
  randomImage(){
    this.image = 'https://unsplash.it/400/400?image=' + Math.floor(Math.random() * 1100);
    loadTexture();
  }
};

let gui = new dat.GUI();
gui.closed = window.innerWidth < 600;
let renderCloth = gui.add(opts, 'renderCloth');

let image = gui.add(opts, 'image', { 
  Face: '/uploads/161101/face-optim.png', 
  Water: 'https://unsplash.it/400/400?image=1053', 
  YellowCurtain: 'https://unsplash.it/400/400?image=855', 
  Tunnel: 'https://unsplash.it/400/400?image=137'
});
image.onChange(loadTexture);

let random = gui.add(opts, 'randomImage');
let influence = gui.add(opts, 'mouseInfluence', 0, 200).step(1);
let gravity = gui.add(opts, 'gravity', 0, 1000).step(20);
let friction = gui.add(opts, 'friction', 0.5, 1).step(0.005);
let bounce = gui.add(opts, 'bounce', 0, 2).step(0.1);

let pin = gui.add(opts, 'pinCorners');
pin.onChange(loadTexture);

let canvas = document.createElement('canvas');
let ctx = canvas.getContext('2d');
document.body.appendChild(canvas);

ctx.strokeStyle = '#555';

let mouse = {
  
  down: false,
  x: 0,
  y: 0,
  px: 0,
  py: 1
}

/*////////////////////////////////////////*/

let stage = new PIXI.Container();
let renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, { transparent: true });

document.body.insertBefore(renderer.view, canvas);
renderer.render(stage);

canvas.width = renderer.width;
canvas.height = renderer.height;

/*////////////////////////////////////////*/

function loadTexture() {
  
  console.log('loading texture', opts.image);
  
  document.body.className = 'loading';

let texture = new PIXI.Texture.fromImage(opts.image);
  if ( !texture.requiresUpdate ) { texture.update(); }
  
  texture.on('error', function(){ console.error('AGH!'); });

texture.on('update',function(){
  document.body.className = '';
    
    console.log('texture loaded');

if ( mesh ) { stage.removeChild(mesh); }
    
    mesh = new PIXI.mesh.Plane( this, opts.pointsX, opts.pointsY);
    mesh.width = this.width;
    mesh.height = this.height;

spacingX = mesh.width / (opts.pointsX-1);
    spacingY = mesh.height / (opts.pointsY-1);

cloth = new Cloth(opts.pointsX-1, opts.pointsY-1, !opts.pinCorners);

stage.addChild(mesh);
  });
}

loadTexture(opts.image);

;(function update() {
  requestAnimationFrame(update);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if ( cloth ) { cloth.update(0.016) }
  renderer.render(stage);
})(0)

/*////////////////////////////////////////*/

class Point {
  constructor (x, y) {
    this.x = x
    this.y = y
    this.px = x
    this.py = y
    this.vx = 0
    this.vy = 0
    this.pinX = null
    this.pinY = null

this.constraints = []
  }

update (delta) {
    if (this.pinX && this.pinY) return this

if (mouse.down) {
      let dx = this.x - mouse.x
      let dy = this.y - mouse.y
      let dist = Math.sqrt(dx * dx + dy * dy)

if (mouse.button === 1 && dist < opts.mouseInfluence) {
        this.px = this.x - (mouse.x - mouse.px)
        this.py = this.y - (mouse.y - mouse.py)
      } else if (dist < mouse.cut) {
        this.constraints = []
      }
    }

this.addForce(0, opts.gravity)

let nx = this.x + (this.x - this.px) * opts.friction + this.vx * delta
    let ny = this.y + (this.y - this.py) * opts.friction + this.vy * delta

this.px = this.x
    this.py = this.y

this.x = nx
    this.y = ny

this.vy = this.vx = 0

if (this.x >= canvas.width) {
      this.px = canvas.width + (canvas.width - this.px) * opts.bounce
      this.x = canvas.width
    } else if (this.x <= 0) {
      this.px *= -1 * opts.bounce
      this.x = 0
    }

if (this.y >= canvas.height) {
      this.py = canvas.height + (canvas.height - this.py) * opts.bounce
      this.y = canvas.height
    } else if (this.y <= 0) {
      this.py *= -1 * opts.bounce
      this.y = 0
    }

return this
  }

draw () {
    let i = this.constraints.length
    while (i--) this.constraints[i].draw()
  }

resolve () {
    if (this.pinX && this.pinY) {
      this.x = this.pinX
      this.y = this.pinY
      return
    }

this.constraints.forEach((constraint) => constraint.resolve())
  }

attach (point) {
    this.constraints.push(new Constraint(this, point))
  }

free (constraint) {
    this.constraints.splice(this.constraints.indexOf(constraint), 1)
  }

addForce (x, y) {
    this.vx += x
    this.vy += y
  }

pin (pinx, piny) {
    this.pinX = pinx
    this.pinY = piny
  }
  
  unpin(){
    this.pinX = null;
    this.pinY = null;
  }
}

/*////////////////////////////////////////*/

class Constraint {
  constructor (p1, p2, length) {
    this.p1 = p1
    this.p2 = p2
    this.length = length || spacingX
  }

resolve () {
    let dx = this.p1.x - this.p2.x
    let dy = this.p1.y - this.p2.y
    let dist = Math.sqrt(dx * dx + dy * dy)

if (dist < this.length) return

let diff = (this.length - dist) / dist

//if (dist > tearDist) this.p1.free(this)

let mul = diff * 0.5 * (1 - this.length / dist)

let px = dx * mul
    let py = dy * mul

!this.p1.pinX && (this.p1.x += px)
    !this.p1.pinY && (this.p1.y += py)
    !this.p2.pinX && (this.p2.x -= px)
    !this.p2.pinY && (this.p2.y -= py)

return this
  }

draw () {
    ctx.moveTo(this.p1.x, this.p1.y)
    ctx.lineTo(this.p2.x, this.p2.y)
  }
}

/*////////////////////////////////////////*/

let count = 0;

class Cloth {
  constructor (clothX, clothY, free) {
    this.points = []

let startX = canvas.width / 2 - clothX * spacingX / 2;
    let startY = canvas.height * 0.2;

for (let y = 0; y <= clothY; y++) {
      for (let x = 0; x <= clothX; x++) {
        let point = new Point(
          startX + x * spacingX - (spacingX * Math.sin(y) ), 
          y * spacingY + startY + ( y !== 0 ? 5 * Math.cos(x) : 0 )
        )
        !free && y === 0 && point.pin(point.x, point.y)
        x !== 0 && point.attach(this.points[this.points.length - 1])
        y !== 0 && point.attach(this.points[x + (y - 1) * (clothX + 1)])

this.points.push(point)
      }
    }
    
  }

update (delta) {
    let i = accuracy

while (i--) {
      this.points.forEach((point) => {
        point.resolve()
      })
    }

ctx.beginPath();

this.points.forEach((point,i) => {
      point.update(delta * delta)
        
      if ( opts.renderCloth ) { point.draw(); }
      
      if ( mesh ) {
        i *= 2;
        mesh.vertices[i] = point.x;
        mesh.vertices[i+1] = point.y;
      }
    });
    
    ctx.stroke()
  }
}

function pointerMove(e) {
  let pointer = e.touches ? e.touches[0] : e;
  mouse.px = mouse.x || pointer.clientX
  mouse.py = mouse.y || pointer.clientY
  mouse.x = pointer.clientX
  mouse.y = pointer.clientY
}

function pointerDown(e){
  mouse.down = true
  mouse.button = 1
  pointerMove(e);
}

function pointerUp(e){
  mouse.down = false;
  mouse.px = null;
  mouse.py = null;
  console.log('pointer up');
}

document.body.addEventListener('mousedown', pointerDown);
document.body.addEventListener('touchstart', pointerDown);

document.body.addEventListener('mousemove',pointerMove);
document.body.addEventListener('touchmove', pointerMove);

document.body.addEventListener('mouseup', pointerUp);
document.body.addEventListener('touchend', pointerUp);
document.body.addEventListener('mouseleave', pointerUp);

编译

CSS

HTML

PIXI Cloth Mesh，可以切换图案和撕扯衣服。很逼真的衣服飘动效果。

html5, cloth

编辑器支持Emmet

快捷键

PIXI Cloth Mesh，可以切换图案和撕扯衣服。很逼真的衣服飘动效果。

html5, cloth

Three.js 在线定制衣服布料

使用Pixi.js和GSAP实现图像污点和扭曲特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：