1. 什么是three.js？

Three.js是一个基于JavaScript编写的开源3D图形库，它使用WebGL技术在网页上渲染3D图形。Three.js提供了许多高级功能，如几何体、纹理、光照、阴影等，以便开发者能够快速地创建复杂且逼真的3D场景。

 

特点：

Three.js具有跨平台性，可以在主要的桌面和移动浏览器上运行，并且其开源社区提供了广泛的文档、示例和第三方库，使开发变得更容易。相对于其他复杂的三维引擎，Three.js相对容易学习，对于有JavaScript和基本数学知识的开发者来说非常友好。

 

 

什么是webGl

WebGL（Web Graphics Library）是一种JavaScript API，它能在无需任何插件的情况下，在浏览器中呈现2D和3D图形。WebGL基于OpenGL ES 2.0，因此它可以在没有安装额外驱动程序的情况下运行。

 

ThreeJS 中的相机是什么？

相机是可以 360 旋转的 相机，可以任意放置相机的未知，达到可以观察场景的任意视角 ；

三维空间需要一个相机来拍摄场景。ThreeJS 中有多种相机类型可供选择，包括透视相机（PerspectiveCamera）、正交相机（OrthographicCamera）等。

 

ThreeJS 中的组是什么？

作用是可以将对象实体添加到组中，方便一起 移动 旋转 缩放 等处理 ；

 

如何创建 ThreeJS 场景？ View

创建 ThreeJS 场景需要创建一个场景对象，并将所需的几何体、光源、相机等添加到场景中。

初始化渲染器 render   初始化场景 scene  添加灯光  light 添加相机

 

 

ThreeJS 中的光源有哪些类型？

在 ThreeJS 中，有几种不同类型的光源可供选择。其中包括环境光（AmbientLight）、点光源（PointLight）、平行光（DirectionalLight）和聚光灯（SpotLight）。

 // 初始化光源  环境光源
 private initLight() {
  const ambient = new AmbientLight(0xffffff, 0.6);
  this.scene.add(ambient);

  // 平行光
  const light = new THREE.DirectionalLight(0xffffff);
  light.position.set(0, 200, 100);
  light.castShadow = true;

  light.shadow.camera.top = 180;
  light.shadow.camera.bottom = -100;
  light.shadow.camera.left = -120;
  light.shadow.camera.right = 400;
  light.shadow.camera.near = 0.1;
  light.shadow.camera.far = 400;
  // 设置mapSize属性可以使阴影更清晰，不那么模糊
  light.shadow.mapSize.set(1024, 1024);

  this.scene.add(light);
 }

 

ThreeJS 中的材质有哪些类型？

在 ThreeJS 中，有许多不同类型的材质可供选择，以适应各种不同类型的几何体。这些包括基础材质（MeshBasicMaterial）、标准材质（MeshStandardMaterial）和物理材质（MeshPhysicalMaterial）等等。

创建一个正方体需要基础材质

  var material =[
      new THREE.MeshBasicMaterial( { color: 'red' } ), // right
      new THREE.MeshBasicMaterial( { color: 'red'  } ), // left
      new THREE.MeshBasicMaterial( { color: 'red'  } ), // top
      new THREE.MeshBasicMaterial( { color: 'red'  } ), // bottom
      new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(this.getTextCanvas2label(item,"#1073ca")) } ), // front 
      new THREE.MeshBasicMaterial( { map: new THREE.CanvasTexture(this.getTextCanvas2label(item,"#1073ca")) } ) // front 
    ];
    var square :any = new THREE.Mesh( geometry, material );

 

 

.ThreeJS 中的渲染器是什么？

渲染器是 ThreeJS 中用于将创建的场景呈现在屏幕上的核心组件。它使用 WebGL 或 canvas 技术将场景中的图形绘制到浏览器中。