Use JavaScript to create and display 3D models and visual effects

With the continuous advancement of science and technology, 3D technology is widely used in various fields. In the Internet era, website design and display also need to use 3D technology to attract users' attention. This article will introduce how to use JavaScript to create and display 3D models and visual effects.

1. Use Three.js library to create 3D models

Three.js is a JavaScript 3D graphics library based on WebGL. It allows developers to easily create various 3D scenes and models.

We can create a 3D scene by introducing the Three.js library, as shown below:

<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>

The above code implements a simple 3D scene with a green cube in it. Can be dragged and rotated with the mouse.

When creating a 3D model, we need to design the shape and material of each object. Three.js provides a variety of basic geometries, such as cubes, spheres, cylinders, etc. You can also use computer-aided design (CAD) tools to create custom geometries.

At the same time, we also need to set the material of each object. Three.js provides many material options, including basic materials, glossy materials, particle materials, and more.

2. Use CSS3DRenderer to create CSS 3D visual effects

In addition to using WebGL to implement 3D models, you can also use CSS3DRenderer to create interactive CSS 3D effects.

When using CSS3DRenderer, we need to first create the corresponding HTML structure and then convert it into CSS 3D elements. For example, the following code creates a CSS 3D meteor shower effect:

<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>

The above code implements a meteor shower effect. In CSS3DRenderer, we use CSS styles to design the visual effects of elements, and use CSS3DObject to convert them into 3D elements to achieve 3D effects.

3. Conclusion

Using JavaScript to implement 3D models and visual effects allows us to more easily implement personalized web design. Three.js and CSS3DRenderer are powerful tools for achieving 3D effects, and we can freely combine them to create more unique visual effects.

The above is the detailed content of Use JavaScript to create and display 3D models and visual effects. For more information, please follow other related articles on the PHP Chinese website!