three.js 동적 QR 코드 를 만 드 는 예제 코드

오늘 곽 선생 은 canvas 로 그림 흐름 을 분석 한 다음 에 동적 QR 코드 를 만 드 는 작은 사례 를 말씀 드 리 겠 습 니 다.더 이상 말씀 드 리 지 않 고 먼저 그림 을 올 리 겠 습 니 다.이것 은 곽 선생 의 위 챗 QR 코드 입 니 다!

1.그림 흐름 분석

canvas = document.createElement('canvas');//  canvas  
content = canvas.getContext('2d');//        
canvas.width = 310;//    
canvas.height = 310;
img = new Image();//      
img.src = require("../assets/images/base/wechat.png");//      
img.onload = () => {
    //      
  content.drawImage(img, 0, 0, canvas.width, canvas.height);//        ，     
  imgData = content.getImageData(0, 0, canvas.width, canvas.height).data;//      
};

imgData 는 어떤 거 죠?아래 그림

이것 은 Uint 8 ClampedArray 의 유형 화 된 배열 입 니 다.이 배열 이 가장 많이 나타 난 것 도 imgData 입 니 다.그것 은 음 수 를 0 으로 돌리 고 255 보다 큰 수 를 255 로 돌리 기 때문에 모델 링 을 하지 않 아 도 된다.다시 한 번 보 겠 습 니 다.이 배열 의 길 이 는 384400 인 데 어떻게 된 거 죠?캔버스 의 길 이 는 310 이 고 imgData 네 명 은 rgba 픽 셀 점 을 대표 합 니 다.즉,imgData[0]는 빨간색 채널 이 고 imgData[1]는 녹색 채널 이 며 imgData[2]는 파란색 채널 이 고 imgData[3]는 투명 채널 입 니 다.순서대로 순환 하기 때문에 310*310*4=384400 입 니 다.
2.픽 셀 점 을 처리 하고 QR 코드 를 그립 니 다.

for (var i = 0; i < 31 * 31; i++) {
    //random_position               ，         31 * 31 
  random_position.push([Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150), Math.floor(Math.random() * 300 - 150)])
}
var color = new Array(310).fill('').map(d => []);//color   310   
for (var i = 0; i < 310; i++) {
  for (var j = 0; j < 310; j++) {
    let clr = imgData[(i * 310 + j) * 4] + imgData[(i * 310 + j) * 4 + 1] + imgData[(i * 310 + j) * 4 + 2];
    clr = clr > 382 ? 'light' : 'black'; //               ，       rgb           127+127+127  。
    color[i].push(clr)//     310 ，     'light'  'black'
  }
}
var color1 = [];//  color1        31 * 31。
color.filter((d, i) => (i + 6) % 10 == 0).forEach((dd, ii) => color1[ii] = dd.filter((d, i) => (i + 6) % 10 == 0));// 10   ，   1           ，        10      ，          。
for (var i = 0; i < color1.length; i++) {//31 * 31   
  for (var j = 0; j < color1[i].length; j++) {
    var geometry = new THREE.PlaneGeometry(10, 10);
    var material = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      side: THREE.DoubleSide,
      transparent: true,
      opacity: color1[i][j] == 'black' ? 0 : 1,
    });
    var mesh = new THREE.Mesh(geometry, material);//     
    origin_position.push([j * 10 - 15 * 10, 15 * 10 - i * 10, 0]);//            
    mesh.position.set(random_position[j + i * j][0], random_position[j + i * j][1], random_position[j + i * j][2]);//                ，      。
    mesh.name = 'plane';
    group.add(mesh);//          ，    。
  }
}
scene.add(group);

이 부분의 코드 는 주로 계산 부분 으로 기술적 함량 이 별로 없다.
3.tween 애니메이션 구현

var pos = { time: 0 };
tween1 = new TWEEN.Tween(pos).to({ time: 1 }, 3000);
tween2 = new TWEEN.Tween(pos).to({ time: 0 }, 3000);
tween1.easing(TWEEN.Easing.Quadratic.In);
tween2.easing(TWEEN.Easing.Quadratic.Out);
tween1.onUpdate(onUpdate);
tween2.onUpdate(onUpdate);
tween1.start();

function onUpdate() {
  let time = this._object.time;
  group.children.forEach((d, i) => {
    d.position.set(time * origin_position[i][0] + (1 - time) * random_position[i][0], time * origin_position[i][1] + (1 - time) * random_position[i][1], (1 - time) * random_position[i][2]);
  })
}

이 부분 은 트 윈 의 기본 기능 만 사 용 했 을 뿐 트 윈 문 서 를 직접 보 세 요.
이상 은 three.js 가 동적 QR 코드 를 만 드 는 예제 코드 의 상세 한 내용 입 니 다.three.js 가 동적 QR 코드 를 만 드 는 데 관 한 자 료 는 저희 의 다른 관련 글 을 주목 하 세 요!