119-搭建一个简单3D动画课程目标课程内容 1、学习地址学习一门技术，我们的第一手资料肯定是官网文档。官方网站：

课程目标

课程内容

1、学习地址

学习一门技术，我们的第一手资料肯定是官网文档。

官方网站：threejs.org/

中文网：www.webgl3d.cn/

github：github.com/mrdoob/thre…

2、资料介绍

在github中我们可以看到完整的threejs引擎库。还可以看到example案列、doc文档

目录介绍

master主分支代码
└───build——src目录下各个代码模块打包后的结果
    │───three.js——开发的时候.html文件中要引入的threejs引擎库，和引入jquery一样，可以辅助浏览器调试
    │───three.min.js——three.js压缩后的结构文件体积更小，可以部署项目的时候在.html中引入。
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───editor——Three.js的可视化编辑器，可以编辑3D场景
    │───index.html——打开应用程序
    │
└───docs——Three.js API文档文件
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───examples——里面有大量的threejs案例，平时可以通过代码编辑全局查找某个API、方法或属性来定位到一个案例
    │
└───src——Three.js引擎的各个模块，可以通过阅读源码深度理解threejs引擎
    │───index.html——打开该文件可以实现离线查看threejs API文档
    │
└───utils——一些辅助工具
    │───\utils\exporters\blender——blender导出threejs文件的插件

3、入门教程

创建一个文件夹作为我们的项目

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D案列</title>
    <script src="./libs/threejs.min.js"></script>
</head>

<body>
    <script>
        // 如果返回的不是未定义，说明threejs成功引入
        console.log('打印场景API', THREE.Scene);
    </script>
</body>

</html>

将threejs的插件下载放在项目libs目录下面。并引入到index.html中

当控制台打印信息如图，那就证明环境已经配置好了

4、基础Demo

基本Demo中我们需要掌握以下几个概念：

场景：Scene类似于在CSS3D中我们搭建一个3D舞台一样。
模型：我们可以设置立方体或者球体。THREE.BoxGeometry比如这是立方体，THREE.SphereGeometry这是设置球体。
材质material：模型有了后，我们可以设置材质，一般会设置颜色、透明度等等
光源Light：相当于灯光强度对我们实际成像的影响。包括环境光和点光源（比如白天环境光是白色，夜晚环境光是黑色，傍晚有夕阳环境光是橙色）
相机camera：相机就相当于肉眼的位置，越近物体会越大。也满足进大远小的透视规则。在不同位置观察物理，你看到的效果也不一样。
渲染器WebGLRenderer：执行渲染操作指定场景、相机作为参数

代码如下：

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

<head>
  <meta charset="UTF-8">
  <title>3D练习</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      margin: 0px;
      padding: 0px;
    }
  </style>
  <script src="./libs/threejs.min.js"></script>
</head>

<body>
  <script>
    /**
     * (1)创建场景对象Scene
     */
    var scene = new THREE.Scene();

    /**
     * (2)创建网格模型
     */
    //创建一个球体几何对象
    // var geometry = new THREE.SphereGeometry(60, 40, 40); 
    //创建一个立方体几何对象Geometry
    var geometry = new THREE.BoxGeometry(200, 200, 100);
    var material = new THREE.MeshLambertMaterial({
      color: "#d4380d"
    });
    //材质对象Material
    var mesh = new THREE.Mesh(geometry, material);
    //网格模型添加到场景中
    scene.add(mesh); 

    /**
     * (3)光源设置
     */
    //点光源
    var point = new THREE.PointLight("#fff");
    point.position.set(400, 300, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight("#000");
    scene.add(ambient);
    
    /**
     * (4)相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 230; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(300, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

    /**
     * (4)创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    //设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); 
    //设置背景颜色
    document.body.appendChild(renderer.domElement); 
    //body元素中插入canvas对象
    //执行渲染操作 指定场景、相机作为参数
    renderer.render(scene, camera);
  </script>
</body>
</html>

分步解析：

(1)创建场景

var scene = new THREE.Scene();

需要有了3D场景，我们才能在场景里面绘制3D图形。否则3D效果无法渲染

(2)几何体

//创建球体，x轴，y轴，z轴
var geometry = new THREE.SphereGeometry(60, 40, 40); 
//创建立方体，参数：x轴、y轴、z轴
var geometry = new THREE.BoxGeometry(200, 200, 100);

根据你自己的需求要调用不同的api创建不同的图形。

(3)光源设置

var point = new THREE.PointLight("#fff");
point.position.set(400, 300, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight("#000");
scene.add(ambient);

光源设置主要有两个概念

环境光，不同的环境下面你可以设置不同的光源。
点光源：可以理解为手电筒打开灯光，照射你指定的物体。这个颜色也可以自己设置

(4)相机设置

var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 230; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(300, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

设置相机的位置，不同的位置你看到物理的效果是不同的，跟我们拍照是一个原理。

(5)创建渲染器对象

var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
//设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); 
//设置背景颜色
document.body.appendChild(renderer.domElement); 
//body元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
renderer.render(scene, camera);

有了渲染器，我们才能将3D效果显示到我们3D场景里面

其中renderer.render(scene, camera); 这段代码就是在进行渲染器的渲染。

如果render在指定频率内不断被调用，那就意味着可以不断拍照，不断渲染。可以实现动态切换效果

119-搭建一个简单3D动画