three.js 基础入门

总体思路：

1. 创建场景
2. 创建物体（指定几何体、材质）
3. 把物体加入场景
4. 创建相机（指定机位及拍摄对象）
5. 创建渲染器（指定画布大小，渲染场景和相机） 

// 1. 创建场景
  const scene = new THREE.Scene();

  // 2.创建物体（指定几何体、材质）
  const geometry = new THREE.BoxGeometry(100, 100, 100);
  const material = new THREE.MeshBasicMaterial({
    color: '#f66'
  });
  const mesh = new THREE.Mesh(geometry, material);
  mesh.position.set(0, 10, 0);

  // 3. 把物体放入场景
  scene.add(mesh);

  // --------------------
  
  // 4. 创建相机
  const camera = new THREE.PerspectiveCamera();
  camera.position.set(200, 200, 200);
  camera.lookAt(mesh.position);

  // --------------------

  // 5. 创建渲染器（指定画布大小, 渲染场景、相机）
  const renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.render(scene, camera);
  document.body.appendChild(renderer.domElement);

效果图：

几何体：(Geometry)

BoxGeometry 长方体

GylinderGeometry  圆柱体

ConeGeometry  圆锥体

SphereGeometry  球体

PlaneGeometry  矩形平面

CircleGeometry  圆平面

材质：（Material）

MeshBasicMaterial 网格基础材质

MeshLambertMaterial  网格漫反射材质

MeshPhongMaterial  网格高光材质 

MeshStandardMaterial  网格物理材质 

MeshPhysicalMaterial  网格物理材质 

PointMaterial  点材质

LineBasicMaterial 线基础材质

SpriteMaterial  精灵材质

相关库：

three.js:

https://cdn.bootcss.com/three.js/r83/three.js

OrbitControls.js:

https://unpkg.com/[email protected]/OrbitControls.js