Three.js로 3D 입방체를 삽입한 Buton 만들기

18097 단어 TypeScriptthreejstech

완성물


방법


Vite를 사용하여 프로젝트를 만듭니다.
npm init vite@latest my-vite-3dbutton --template vanilla-ts
Three.js와 형식 정의 파일을 설치합니다.
npm install --save three @types/three
index.파일을 열고 button 및 Canvas를 추가합니다.
index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vite App</title>
</head>

<body>
  <div id="app">
    <button>
      <canvas />
    </button>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>
main.ts 파일을 열고 첫 줄 이외의 내용을 삭제하고 다시 씁니다.
main.ts
import './style.css'

import * as THREE from 'three';

function init() {
  // Button取得, Buttonの縦幅・横幅をwidth,height変数に代入
  const button = document.querySelector('button') as HTMLButtonElement;
  const width = button.clientWidth;
  const height = button.clientHeight;

  // Three.js側の処理
  const renderer = new THREE.WebGLRenderer({
    canvas: document.querySelector('canvas') as HTMLCanvasElement
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(width, height);

  // シーン作成
  const scene = new THREE.Scene();

  // カメラ作成
  const camera = new THREE.PerspectiveCamera(45, width / height);
  camera.position.set(0, 0, 1000);

  // 立方体の3Dモデルを作ってシーンに追加
  const geometry = new THREE.BoxGeometry(400, 400, 400);
  const material = new THREE.MeshNormalMaterial();
  const box = new THREE.Mesh(geometry, material);
  scene.add(box);

  // レンダリングする用のTick関数
  function Tick() {
    requestAnimationFrame(Tick);

    renderer.render(scene, camera);
  }

  Tick();
}

window.onload = init;
이 느낌으로 3D 모델의 입방체를 버튼에 표시합니다.

발전시키다


이렇게 하면 재미가 없으니 안의 입방체를 좀 돌려라.
먼저 회전할 각도의 변수를 준비합니다.
4
let rotaion: number = 0.005;
Tick 함수를 실행할 때마다 box는 회전합니다.
// レンダリングする用のTick関数
  function Tick() {
    requestAnimationFrame(Tick);

    box.rotation.y += rotaion;
    renderer.render(scene, camera);
  }

버튼 위에 커서를 놓으면 회전 속도를 변경합니다.
CSS 버튼의 크기를 변경해 보십시오.
  button.onmouseenter = () => {
    rotaion = 0.01;
  }

  button.onmouseleave = () => {
    rotaion = 0.005;
  }
style.css
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

button {
  transition-property: transform;
  transition-duration: 0.5s;
}

button:hover {
  transform: scale(1.1);
}
Dwolla Drop-in Components 2부: 확인되지 않은 고객 업그레이드
PHPer Kaigi 2019 PHPer change 전자레인지 대박 재밌는 일 www

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage