First introduction to Three.js

Preparation:

Simply put, Three.js is a javascript 3D library. We can use Three to create simple or complex three-dimensional geometric figures.

To start using three for 3D, we only need a chrome browser, a popular vscode compiler, and a local service.

We download the live serve plug-in in vscode and then right-click open with live serve to open a local service

Use thee.js to render 3D scenes:

First we create a standard document of html5

At the beginning, we recommend using cdn to introduce three.js

  <script src="https://cdn.bootcss.com/three.js/92/three.js"></script>

Prepare a div in HTML to render our 3D model

<div id="webgl-output"></div>

Then write the init function call in js to render our first 3d model

function init() {
  // 创建一个场景，容纳我们所有的元素，如物体、相机和灯光。
  var scene = new THREE.Scene();

  //创建一个相机，它定义了我们正在看的地方。
  var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);


  // 创建渲染并设置大小
  var renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(new THREE.Color(0x000000));
  renderer.setSize(window.innerWidth, window.innerHeight);
  // renderer.setSize(375, 200);


  // 在屏幕上显示轴
  var axes = new THREE.AxesHelper(20);
  scene.add(axes);

  // 创建地面平面
  var planeGeometry = new THREE.PlaneGeometry(60, 20);
  var planeMaterial = new THREE.MeshBasicMaterial({
      color: 0xAAAAAA
  });
  var plane = new THREE.Mesh(planeGeometry, planeMaterial);

  // rotate and position the plane 旋转和定位平面
  plane.rotation.x = -0.5 * Math.PI;
  plane.position.set(15, 0, 0);

  // add the plane to the scene 将飞机添加到现场
  scene.add(plane);

  // create a cube    创建一个立方体
  var cubeGeometry = new THREE.BoxGeometry(4, 4, 4);
  var cubeMaterial = new THREE.MeshBasicMaterial({
      color: 0xFF0000,
      wireframe: true
  });
  var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);

  // position the cube 定位立方体
  cube.position.set(-4, 3, 0);

  // add the cube to the scene  将立方体添加到场景中
  scene.add(cube); 

  // create a sphere 创建一个球体
  var sphereGeometry = new THREE.SphereGeometry(4, 20, 20);
  var sphereMaterial = new THREE.MeshBasicMaterial({
      color: 0x7777FF,
      wireframe: true
  });
  var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

  // position the sphere 定位球体
  sphere.position.set(20, 4, 2);

  // add the sphere to the scene  将球体添加到场景中
  scene.add(sphere);

  // position and point the camera to the center of the scene  将相机定位并指向场景中心
  camera.position.set(-30, 40, 30);
  camera.lookAt(scene.position);

  // add the output of the renderer to the html element   将渲染器的输出添加到html元素中
  document.getElementById("webgl-output").appendChild(renderer.domElement);

  // render the scene 渲染场景
  renderer.render(scene, camera);
}
init()

Summarize:

To use three to render 3D scenes, we must meet three conditions:

1. scene scene

Scenes are used to save and track rendered objects and light sources used.

2.camera camera

The camera determines what can be seen in the scene

3. renderer renderer

The renderer is used to calculate what scene objects will look like when rendered in the browser based on the camera's angle.

Some three APIs used in this chapter:

// 创建一个场景
var scene = new THREE.Scene();


//创建一个相机，
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);


// 创建渲染并设置大小
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor //设置场景背景色
renderer.setSize       //设置场景大小


//创建x、y、z轴线 并设置其长度 
var axes = new THREE.AxesHelper(20);


//创建平面几何设置宽高
new THREE.PlaneGeometry(60, 20);
//创建立方体几何设置长宽高
new THREE.BoxGeometry(4, 4, 4);
//创建球体几何
new THREE.SphereGeometry(4, 20, 20);

// 创建材质 
new THREE.MeshBasicMaterial({
    color: 0xFF0000, 
    wireframe: true  //开启线框模式(里面有很多线)
  });


// 组合几何图形和材质生成渲染几何
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);


// rotate and position the plane 旋转和定位平面
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(15, 0, 0);


//定位相机的位置(x,y,z)
//z是场景距离我们的位置,数值越大、则距离我们越远、场景越小、反之越大
//x设置正值场景向右旋转、负值则向左旋转
//y设置正值 , 就是从顶部观看的效果,负值则是底部观看
camera.position.set(-30, 40, 30);


//指向我们设置的相机位置,决定了我们在哪里观看场景
camera.lookAt(scene.position);