Three.js新手入门：从搭建基础场景开始

前端

2024-02-17 18:15:44

1. Three.js简介

Three.js是一个跨浏览器的JavaScript库，用于创建和显示3D图形。它基于WebGL，可以利用现代浏览器的图形处理单元（GPU）来渲染复杂的3D场景。

2. 搭建基础场景

搭建基础场景的步骤如下：

创建一个新的Three.js项目。
创建场景、相机和渲染器。
添加灯光和模型。
处理用户交互。

3. 创建场景、相机和渲染器

场景是3D对象存在的空间，相机用于从特定角度查看场景，渲染器将场景渲染为2D图像。

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

4. 添加灯光和模型

灯光用于照亮场景中的物体，模型是添加到场景中的3D对象。

const light = new THREE.AmbientLight(0xffffff); // 环境光
scene.add(light);

const geometry = new THREE.BoxGeometry(1, 1, 1); // 立方体几何体
const material = new THREE.MeshBasicMaterial({color: 0x00ff00}); // 材质
const cube = new THREE.Mesh(geometry, material); // 网格对象
scene.add(cube);

5. 处理用户交互

可以通过添加事件侦听器来处理用户交互，例如鼠标点击、拖动和键盘输入。

window.addEventListener('mousemove', onMouseMove, false);

function onMouseMove(event) {
  // 获取鼠标在画布中的位置
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  // 将鼠标位置转换为场景中的3D坐标
  const vector = new THREE.Vector3();
  vector.set((mouseX / window.innerWidth) * 2 - 1, -(mouseY / window.innerHeight) * 2 + 1, 0.5);
  vector.unproject(camera);

  // 将相机方向作为射线方向
  const raycaster = new THREE.Raycaster();
  raycaster.set(camera.position, vector.sub(camera.position).normalize());

  // 检测射线与场景中物体的碰撞
  const intersects = raycaster.intersectObjects(scene.children);

  // 如果射线与物体碰撞，则执行某些操作
  if (intersects.length > 0) {
    // 获取被碰撞的物体
    const object = intersects[0].object;

    // 根据被碰撞的物体类型执行不同操作
    if (object.type === 'Mesh') {
      // 如果是网格对象，则改变其颜色
      object.material.color.set(0xff0000);
    }
  }
}

6. 完整代码

<!DOCTYPE html>
<html>
<head>
  
  <script src="three.js"></script>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <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.body.appendChild(renderer.domElement);

    const light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

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

    window.addEventListener('mousemove', onMouseMove, false);

    function onMouseMove(event) {
      const mouseX = event.clientX;
      const mouseY = event.clientY;

      const vector = new THREE.Vector3();
      vector.set((mouseX / window.innerWidth) * 2 - 1, -(mouseY / window.innerHeight) * 2 + 1, 0.5);
      vector.unproject(camera);

      const raycaster = new THREE.Raycaster();
      raycaster.set(camera.position, vector.sub(camera.position).normalize());

      const intersects = raycaster.intersectObjects(scene.children);

      if (intersects.length > 0) {
        const object = intersects[0].object;

        if (object.type === 'Mesh') {
          object.material.color.set(0xff0000);
        }
      }
    }

    function animate() {
      requestAnimationFrame(animate);

      renderer.render(scene, camera);
    }

    animate();
  </script>
</body>
</html>