JavaScript를 사용하여 3D 모델 및 시각 효과 생성 및 표시

지속적인 기술 발전으로 3D 기술은 다양한 분야에서 널리 활용되고 있습니다. 인터넷 시대에는 웹사이트 디자인과 디스플레이에서도 사용자의 관심을 끌기 위해 3D 기술을 사용해야 합니다. 이 기사에서는 JavaScript를 사용하여 3D 모델 및 시각 효과를 만들고 표시하는 방법을 소개합니다.

1. Three.js 라이브러리를 사용하여 3D 모델 만들기

Three.js는 WebGL 기반의 JavaScript 3D 그래픽 라이브러리입니다. 이를 통해 개발자는 다양한 3D 장면과 모델을 쉽게 만들 수 있습니다.

아래와 같이 Three.js 라이브러리를 도입하여 3D 장면을 만들 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/three@0.110.0/build/three.min.js"></script>

<div id="scene"></div>

<script>
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('scene').appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry();
  const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  camera.position.z = 5;

  function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
  }
  animate();
</script>

위 코드는 간단한 3D 장면을 구현한 것입니다. 장면에는 마우스로 드래그하고 회전할 수 있는 녹색 큐브가 있습니다. .

3D 모델을 만들 때 각 개체의 모양과 재질을 디자인해야 합니다. Three.js는 큐브, 구, 원통 등과 같은 다양한 기본 형상을 제공합니다. CAD(컴퓨터 지원 설계) 도구를 사용하여 사용자 정의 형상을 만들 수도 있습니다.

동시에 각 개체의 재질도 설정해야 합니다. Three.js는 기본 재질, 광택 재질, 입자 재질 등을 포함한 다양한 재질 옵션을 제공합니다.

2. CSS3DRenderer를 사용하여 CSS 3D 시각 효과 만들기

WebGL을 사용하여 3D 모델을 구현하는 것 외에도 CSS3DRenderer를 사용하여 대화형 CSS 3D 효과를 만들 수도 있습니다.

CSS3DRenderer를 사용할 때 먼저 해당 HTML 구조를 만든 다음 CSS 3D 요소로 변환해야 합니다. 예를 들어 다음 코드는 CSS 3D 유성우 효과를 생성합니다.

<script src="https://cdn.jsdelivr.net/npm/three@0.110.0/build/three.min.js"></script>

<div id="container"></div>

<script>
  // 创建3D场景
  const scene = new THREE.Scene();

  // 创建相机
  const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.z = 300;

  // 创建渲染器
  const renderer = new THREE.CSS3DRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.getElementById('container').appendChild(renderer.domElement);

  // 创建流星元素
  const divs = [];
  for (let i = 0; i < 50; i++) {
    const div = document.createElement('div');
    div.style.width = '10px';
    div.style.height = '10px';
    div.style.background = 'white';
    div.style.borderRadius = '50%';
    div.style.opacity = '0';
    document.body.appendChild(div);

    const object = new THREE.CSS3DObject(div);
    object.position.set(Math.random() * window.innerWidth - window.innerWidth / 2, Math.random() * window.innerHeight - window.innerHeight / 2, -Math.random() * 500);
    scene.add(object);

    divs.push(object);
  }

  // 动画效果
  const animate = () => {
    requestAnimationFrame(animate);

    divs.forEach((div) => {
      if (div.position.z > 0) {
        div.position.set(Math.random() * window.innerWidth - window.innerWidth / 2, Math.random() * window.innerHeight - window.innerHeight / 2, -Math.random() * 500);
        div.element.style.opacity = '0';
      }
      div.position.z += 10;
      div.rotation.z += Math.PI / 50;
      div.element.style.opacity = Number(div.element.style.opacity) + 0.02;
    });

    renderer.render(scene, camera);
  };

  animate();
</script>

위 코드는 유성우 효과를 구현합니다. CSS3DRenderer에서는 CSS 스타일을 사용하여 요소의 시각적 효과를 디자인하고 CSS3DObject를 사용하여 이를 3D 요소로 변환하여 3D 효과를 얻습니다.

3. 결론

JavaScript를 사용하여 3D 모델과 시각 효과를 구현하면 개인화된 웹 디자인을 더 쉽게 얻을 수 있습니다. Three.js와 CSS3DRenderer는 3D 효과를 구현하는 강력한 도구이며, 이를 자유롭게 결합하여 더욱 독특한 시각 효과를 만들 수도 있습니다.

위 내용은 JavaScript를 사용하여 3D 모델 및 시각 효과 생성 및 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!