Three.js学习|代码详解个人见解

写在前面

上次写完ThreeJS学习|创建第一个三维场景这个推文有人问具体的参数即代码功能，因此在此处就具体说明一下。

场景演示

在这里弄了一个更加精简的项目以供参考。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>three.js三维场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
</style>
  <script src="./build/three.js"></script>
</head>

<body>
  <script>
    var scene = new THREE.Scene();
    //var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    });
    var mesh = new THREE.Mesh(geometry, material); 
    scene.add(mesh); 
    
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); 
    scene.add(point);

    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

    var width = window.innerWidth; 
    var height = window.innerHeight;
    var k = width / height; 
    var s = 300;
 
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200);
    camera.lookAt(scene.position); 
 
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    renderer.setClearColor(0xb9d3ff, 1); 
    document.body.appendChild(renderer.domElement);

    renderer.render(scene, camera);
</script>
</body>
</html>

其效果就是一个简单的立方体。

代码详解

1、在HTML文件中引入three.js

引入方法有多种，看哪种方便了，一般就是本地和网络。

<!--相对地址加载-->
<script src="./build/three.js"></script>
<!--http绝对地址远程加载-->
<script src="http://******/threejs/build/three.js"></script>

2、创建场景

这个场景就像是一张纸，未来你所有的对象都需要添加到这个对象上，未来在这上面显示。

var scene = new THREE.Scene();

3、创建网格模型

要创建各种对象，各类对象通过操作创建网格模型，并将网格模型添加到场景中。

3.1几何体Geometry

//创建一个立方体几何对象
var geometry = new THREE.BoxGeometry(100, 100, 100);
//创建一个球体几何对象
var geometry = new THREE.SphereGeometry(60, 100, 40);

通过THREE.BoxGeometry()创建一个长宽高都是100的立方体，里面共有三个参数，分别代表长宽高，根据需求更改参数即可。同理还存在其他类型的几何体，如THREE.SphereGeometry(),会创建一个你需要的圆。

3.2材质Material

var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); //材质对象

通过THREE.MeshLambertMaterial()创建一个可用于上述立方体的材质对象，这里需要注意的是它的参数是一个对象，对象包含了颜色等基本属性。

3.3网格模型

var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中

通过THREE.Mesh()创建网格模型，输入参数为几何体对象和材质对象。最终添加到场景中。

4、创建光源

//点光源
var point = new THREE.PointLight(0xffffff);

通过THREE.PointLight()创建一个点光源对象，参数为光照强度，可简单理解为参数值越大则光源下的对象越亮。

5、创建相机

//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向

通过THREE.OrthographicCamera()创建一个正射投影相机对象，里面有六个参数，这里你先了解前四个参数是用来定义拍照窗口大小的就行了，就像咱们拍照一样，取景范围越大，被拍的景物就变小了。同理，拍照时相机的位置和角度对拍照效果也会有影响，因此也有更改相机位置和角度的函数。

6、创建渲染器

//创建渲染器对象
var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
renderer.render(scene, camera);

通过THREE.WebGLRenderer()创建一个用于在浏览器渲染的渲染器，将场景的全部内容在浏览器端渲染显示。

代码结构

其实对于一个Three.js项目而言，他的结构都是如此。

Three.js学习|代码详解 个人见解

Three.js学习|代码详解个人见解