Three.js初体验

关于Three的基础概念

• 参考: ThreeJS快速入门

关键名词:

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