Three.js初体验

关于Three的基础概念

关键名词:

  1. 渲染器(renderer)
  2. 相机(camera)

    • 2.1 坐标系
    • 2.2 三维投影

      • 透视投影相机(THREE.PerspectiveCamera)
      • 正交投影相机(THREE.OrthographicCamera)
  3. 场景(scene)
  4. 网格(mesh)
  5. 几何形状(Geometry)
  6. 材质(Meterail)

简单示例 —— 创建一个纹理映射立方体

流程:

  1. 创建Three.js渲染器并将其添加到canvas中

    const renderer = new THREE.WebGLRenderer({
      canvas: canvas,
      antialias: true
    });
  2. 设置渲染器视口尺寸

    renderer.setSize(canvas.width, canvas.height);
  3. 创建新的Three.js场景

    const scene = new THREE.Scene();
  4. 添加一个相机以便观察整个场景

    // 透视相机
    const camera = new THREE.PerspectiveCamera(
      45, // 45度视野角
      canvas.width / canvas.height, // 纵横比 aspect ratio
      1, // 最近平面位置坐标值
      4000 // 最远平面位置坐标值 frustum far plane
    );
    scene.add(camera);
  5. 创建一个纹理映射的立方体并将其添加到场景中

    • 5.1 创建纹理映射
    var mapUrl = "../images/chapter3-eg1.jpg";
    var map: THREE.Texture = THREE.ImageUtils.loadTexture(mapUrl);
    • 5.2 创建一个基础材质,传入纹理映射
    const material: THREE.MeshBasicMaterial = new THREE.MeshBasicMaterial({ map: map });
    • 5.3 创建立方体几何形状
    const geometry: THREE.CubeGeometry = new THREE.CubeGeometry(2, 2, 2);
    • 5.4 利用Three.js的Mesh方法将几何形状和材质整合到网格中
    const cube: THREE.Object3D = new THREE.Mesh(geometry, material);
    • 5.5 移动网格位置
    cube.position.z = -8;
    cube.rotation.x = Math.PI / 5;
    cube.rotation.y = Math.PI / 5;
    • 5.6 添加网格到场景中
    scene.add(cube);
    • 5.7 最后,渲染器渲染
    // 或者可以使用 requestAnimationFrame
     setInterval(() => {
      renderer.render(scene, camera);
    }, 0);

效果

木板图映射到立方体上

了解一下什么是纹理映射~

纹理映射

纹理映射(Texture Mapping)是将纹理空间中的纹理像素映射到屏幕空间中的像素的过程。
例如上例,我们将一张木板图片映射到立方体上,使得其看起来更像一个木箱子

我们尝试调整一下步骤5.5的位置

cube.position.z = -35;

当立方体远离观察点的时候,可以看到纹理出现了明显的锯齿化

附注

使用Ts编写的时候,可以安装类型定义文件

npm install --save @types/three

源代码

github/Me-momo

你可能感兴趣的