three.js前端学习笔记

小熊对对碰

已于 2024-01-09 06:50:24 修改

阅读量577

点赞数 3

分类专栏： Web 文章标签： js webgl three.js 前端 3d渲染

于 2020-11-10 16:52:17 首次发布

本文链接：https://blog.csdn.net/weixin_43561635/article/details/109600238

版权

Web 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

使用了threejs的一个项目，https://github.com/luomi16/PHP-VirtuFittingMall

three.js视频教程

three.js快速入门

three.js快速入门

1 第一个3D场景

在这里插入图片描述
代码示例：
（以后学习要掌握的最基础的代码）

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

<head>
  <meta charset="UTF-8">
  <title>源码对应电子书:百度"three.js 郭隆邦"</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- three.js文件位置目录地址：three.js-master/build/three.js -->
  <!-- <script src="./three.js"></script> -->
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    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
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    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);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    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); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
  </script>

</body>

</html>

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

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

2 requestAnimationFrame周期性渲染

上节课代码：
在这里插入图片描述
把上面红框改成下面图中代码，即可实现旋转动画。
原理即是
利用 requestAnimationFrame函数进行周期性渲染

旋转动画

渲染器 render方法

setInterval()周期性调用render方法
setInterval() 是按照一定周期执行函数，不推荐使用

// 渲染函数
    function render() {
        renderer.render(scene,camera);//执行渲染操作
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
    }
    //间隔20ms周期性调用函数fun,20ms也就是刷新频率是50FPS(1s/20ms)
    setInterval("render()",20);
    //设置调用render函数的周期为200ms，刷新频率相当于5你能明显的感受到卡顿
    // setInterval("render()",200);

requestAnimationFrame两帧渲染时间间隔
记录两帧渲染时间间隔

// 渲染函数
    let T0 = new Date();//上次时间
    function render() {
        let T1 = new Date();//本次时间
        let t = T1-T0;//时间差
        console.log(t);//两帧之间时间间隔  单位：ms
        // console.log(Math.round(1000/t));//渲染频率
        T0 = T1;//把本次时间赋值给上次时间
        renderer.render(scene,camera);//执行渲染操作
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render，渲染下一帧
    }
    render();

1 代码中执行这句话
console.log(t); //在console中打印两帧之间时间间隔单位：ms
在这里插入图片描述
例如18 就是1s 1000/18~=55次
即1s刷新55次画面
即 renderer.render(scene,camera); //执行渲染操作

2 代码中执行这句话
console.log(Math.round(1000/t)); //在console中打印渲染频率

在这里插入图片描述

3 鼠标操作三维场景旋转缩放

在第一节代码基础上改进
第一步：引入threejs扩展控件OrbitControls.js

<!-- 引入threejs扩展控件OrbitControls.js -->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>

第二步：将renderer.render(scene, camera);放到一个函数中

	// 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
    }
    render();

第三步：

	//创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener('change', render);

4 场景插入新的几何体

示例代码：

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

<head>
  <meta charset="UTF-8">
  <title>源码对应电子书:百度"three.js 郭隆邦"</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- 引入threejs扩展控件OrbitControls.js -->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // 立方体网格模型
    var geometry1 = new THREE.BoxGeometry(100, 100, 100);
    var material1 = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
    scene.add(mesh1); //网格模型添加到场景中

    // 球体网格模型
    var geometry2 = new THREE.SphereGeometry(60, 40, 40);
    var material2 = new THREE.MeshLambertMaterial({
      color: 0xff00ff
    });
    var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
    mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
    scene.add(mesh2);

    // 圆柱网格模型
    var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
    var material3 = new THREE.MeshLambertMaterial({
      color: 0xffff00
    });
    var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
    // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
    mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
    scene.add(mesh3); //

    // 辅助坐标系
    var axisHelper = new THREE.AxisHelper(250);
    scene.add(axisHelper);
    /**
     * 光源设置
     */
    //点光源
    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 = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    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(0x666666, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象

    // 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
      requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧
    }
    render();
    var controls = new THREE.OrbitControls(camera,renderer.domElement); //创建控件对象
  </script>
</body>
</html>

引用各种几何体api
var geometry1 = new THREE.BoxGeometry(100, 100, 100);
//长方体参数：长，宽，高

用translateY向右平移
mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
源于：
在这里插入图片描述

用position.set向右平移
mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
即直接把x轴设置在120

ctrl+f 可以在网页上搜索关键字

5 设置材质效果

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

<head>
  <meta charset="UTF-8">
  <title>源码对应电子书:百度"three.js 郭隆邦"</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- 引入threejs扩展控件OrbitControls.js -->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/examples/js/controls/OrbitControls.js"></script>
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    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.MeshBasicMaterial({
      color: 0x0000ff,
      wireframe:true,//线条模式渲染
    });

    // 与光照计算  漫反射   产生棱角感
    // var material = new THREE.MeshLambertMaterial({
    //   color: 0x00ff00,
    // });

    // 与光照计算  高光效果（镜面反射）    产生棱角感
    // var material = new THREE.MeshPhongMaterial({
    //   color: 0xff0000,
    //   specular:0x444444,
    //   shininess:30,
    // });
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    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 = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    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); //body元素中插入canvas对象

    // 渲染函数
    function render() {
      renderer.render(scene, camera); //执行渲染操作
    }
    render();
    //创建控件对象  相机对象camera作为参数   控件可以监听鼠标的变化，改变相机对象的属性
    var controls = new THREE.OrbitControls(camera,renderer.domElement);
    //监听鼠标事件，触发渲染函数，更新canvas画布渲染效果
    controls.addEventListener('change', render);
  </script>

</body>

</html>

6 光照效果设置

在这里插入图片描述
只有三面被照亮

/**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    // 通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算
    scene.add(point); //点光源添加到场景中
    //环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

加入一个位置关于原点对称的点光源

/**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    // 点光源2  位置和point关于原点对称
    var point2 = new THREE.PointLight(0xffffff);
    point2.position.set(-400, -200, -300); //点光源位置
    scene.add(point2); //点光源添加到场景中
    //环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);

----2020/11/10 更新到此处

顶点概念、几何体结构

1 顶点位置数据解析渲染

/**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
    //类型数组创建顶点数据
    var vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      50, 0, 0, //顶点2坐标
      0, 100, 0, //顶点3坐标
      0, 0, 10, //顶点4坐标
      0, 0, 100, //顶点5坐标
      50, 0, 10, //顶点6坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
    // 设置几何体attributes属性的位置属性
    geometry.attributes.position = attribue;

    // 三角面(网格)渲染模式
    var material = new THREE.MeshBasicMaterial({
      color: 0x0000ff, //三角面颜色
      side: THREE.DoubleSide //两面可见
    }); //材质对象
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

    // 点渲染模式
    var material = new THREE.PointsMaterial({
      color: 0xff0000,
      size: 5.0 //点对象像素尺寸
    }); //材质对象
    var points = new THREE.Points(geometry, material); //点模型对象
    scene.add(points); //点对象添加到场景中

    // 线条渲染模式
    var material=new THREE.LineBasicMaterial({
        color:0xff0000 //线条颜色
    });//材质对象
    var line=new THREE.Line(geometry,material);//线条模型对象
    scene.add(line);//线条对象添加到场景中

三角面(网格)渲染模式
请添加图片描述
点渲染模式

线条渲染模式

2 顶点颜色数据插值计算

每个顶点显示一种颜色

 /**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

    //类型数组创建顶点位置position数据
    var vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      50, 0, 0, //顶点2坐标
      0, 100, 0, //顶点3坐标

      0, 0, 10, //顶点4坐标
      0, 0, 100, //顶点5坐标
      50, 0, 10, //顶点6坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
    // 设置几何体attributes属性的位置position属性
    geometry.attributes.position = attribue;


    //类型数组创建顶点颜色color数据
    var colors = new Float32Array([
      1, 0, 0, //顶点1颜色
      0, 1, 0, //顶点2颜色
      0, 0, 1, //顶点3颜色

      1, 1, 0, //顶点4颜色
      0, 1, 1, //顶点5颜色
      1, 0, 1, //顶点6颜色
    ]);
    // 设置几何体attributes属性的颜色color属性
    geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB

在这里插入图片描述

/**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

    //类型数组创建顶点位置position数据
    var vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      100, 100, 100, //顶点2坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
    // 设置几何体attributes属性的位置position属性
    geometry.attributes.position = attribue;


    //类型数组创建顶点颜色color数据
    var colors = new Float32Array([
      1, 0, 0, //顶点1颜色
      0, 0, 1, //顶点2颜色
    ]);
    // 设置几何体attributes属性的颜色color属性
    geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB

彩色线条
在这里插入图片描述
彩色三角面

 /**
     * 创建网格模型
     */
    var geometry = new THREE.BufferGeometry(); //声明一个缓冲几何体对象

    //类型数组创建顶点位置position数据
    var vertices = new Float32Array([
      0, 0, 0, //顶点1坐标
      50, 0, 0, //顶点2坐标
      0, 100, 0, //顶点3坐标

      0, 0, 10, //顶点4坐标
      0, 0, 100, //顶点5坐标
      50, 0, 10, //顶点6坐标
    ]);
    // 创建属性缓冲区对象
    var attribue = new THREE.BufferAttribute(vertices, 3); //3个为一组，作为一个顶点的xyz坐标
    // 设置几何体attributes属性的位置position属性
    geometry.attributes.position = attribue;


    //类型数组创建顶点颜色color数据
    var colors = new Float32Array([
      1, 0, 0, //顶点1颜色
      0, 1, 0, //顶点2颜色
      0, 0, 1, //顶点3颜色

      1, 1, 0, //顶点4颜色
      0, 1, 1, //顶点5颜色
      1, 0, 1, //顶点6颜色
    ]);
    // 设置几何体attributes属性的颜色color属性
    geometry.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB

在这里插入图片描述

3 定点法向量数据光照计算

5 设置Geometry顶点位置、顶点颜色数据

在这里插入图片描述

 /**
     * 创建网格模型
     */
    var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

    // Vector3向量对象表示顶点位置数据
    var p1 = new THREE.Vector3(50, 0, 0); //顶点1坐标
    var p2 = new THREE.Vector3(0, 70, 0); //顶点2坐标
    var p3 = new THREE.Vector3(80, 70, 0); //顶点3坐标
    
    //顶点坐标添加到geometry对象
    geometry.vertices.push(p1, p2, p3);
    // Color对象表示顶点颜色数据
    var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
    var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
    var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
    //顶点颜色数据添加到geometry对象
    geometry.colors.push(color1, color2, color3);

    //材质对象
    var material = new THREE.LineBasicMaterial({
      // 使用顶点颜色数据渲染模型，不需要再定义color属性
      // color: 0xff0000,
      vertexColors: THREE.VertexColors, //以顶点颜色为准
    });
    //线条模型对象
    var line = new THREE.Line(geometry, material);
    scene.add(line); //线条对象添加到场景中

    // 点渲染模式
    // var material = new THREE.PointsMaterial({
    //   // 使用顶点颜色数据渲染模型，不需要再定义color属性
    //   // color: 0xff0000,
    //   vertexColors: THREE.VertexColors, //以顶点颜色为准
    //   size: 10.0 //点对象像素尺寸
    // }); //材质对象
    // var points = new THREE.Points(geometry, material); //点模型对象
    // scene.add(points); //点对象添加到场景中

    // 辅助坐标系
    var AxesHelper = new THREE.AxesHelper(250);
    // scene.add(AxesHelper);

在这里插入图片描述

6 Face3对象定义Geometry的三角面

在这里插入图片描述

	var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

    var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
    var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
    var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
    var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
    //顶点坐标添加到geometry对象
    geometry.vertices.push(p1, p2, p3, p4);

    // Face3构造函数创建一个三角面
    var face1 = new THREE.Face3(0, 1, 2);
    //三角面每个顶点的法向量
    var n1 = new THREE.Vector3(0, 0, -1); //三角面Face1顶点1的法向量
    var n2 = new THREE.Vector3(0, 0, -1); //三角面2Face2顶点2的法向量
    var n3 = new THREE.Vector3(0, 0, -1); //三角面3Face3顶点3的法向量
    // 设置三角面Face3三个顶点的法向量
    face1.vertexNormals.push(n1,n2,n3);

    // 三角面2
    var face2 = new THREE.Face3(0, 2, 3);
    // 设置三角面法向量
    face2.normal=new THREE.Vector3(0, -1, 0);

    //三角面face1、face2添加到几何体中
    geometry.faces.push(face1,face2);

解释：本来要定义六个顶点，但有两个位置重合，就只定义四个，另外两个可以复用。
定义四个顶点
->顶点坐标添加到geometry对象vertices中
-> Face3构造函数创建一个三角面
var face1 = new THREE.Face3(0, 1, 2); //Face3构造函数创建一个三角面
->定义每个顶点的法向量
->设置三角面每个顶点的法向量
->定义三角面2
var face2 = new THREE.Face3(0, 2, 3); //三角面2 //0,2 两个顶点实现了复用
->设置三角面2的法向量
->三角面face1、face2添加到几何体中

Face3颜色和geometry的colors属性

/**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    var geometry = new THREE.Geometry(); //声明一个几何体对象Geometry

    var p1 = new THREE.Vector3(0, 0, 0); //顶点1坐标
    var p2 = new THREE.Vector3(0, 100, 0); //顶点2坐标
    var p3 = new THREE.Vector3(50, 0, 0); //顶点3坐标
    var p4 = new THREE.Vector3(0, 0, 100); //顶点4坐标
    //顶点坐标添加到geometry对象
    geometry.vertices.push(p1, p2, p3, p4);

    // Color对象表示顶点颜色数据
    var color1 = new THREE.Color(0x00ff00); //顶点1颜色——绿色
    var color2 = new THREE.Color(0xff0000); //顶点2颜色——红色
    var color3 = new THREE.Color(0x0000ff); //顶点3颜色——蓝色
    var color4 = new THREE.Color(0xffff00); //顶点3颜色——黄色
    //顶点颜色数据添加到geometry对象
    geometry.colors.push(color1, color2, color3, color4);

    // Face3构造函数创建一个三角面
    var face1 = new THREE.Face3(0, 1, 2);
    //设置三角面face1每个顶点的法向量
    var n1 = new THREE.Vector3(0, 0, -1);
    var n2 = new THREE.Vector3(0, 0, -1);
    var n3 = new THREE.Vector3(0, 0, -1);
    // 设置三角面Face3三个顶点的法向量
    face1.vertexNormals.push(n1, n2, n3);
    // 设置三角面face1三个顶点的颜色
    face1.vertexColors = [
      new THREE.Color(0xffff00),
      new THREE.Color(0xff00ff),
      new THREE.Color(0x00ffff),
    ]

    // 三角面2
    var face2 = new THREE.Face3(0, 2, 3);
    // 设置三角面法向量
    face2.normal = new THREE.Vector3(0, -1, 0);
    face2.color = new THREE.Color(0x00ff00);

    //三角面face1、face2添加到几何体中
    geometry.faces.push(face1, face2);

    //材质对象
    var material = new THREE.MeshLambertMaterial({
      // color: 0xffff00,
      vertexColors: THREE.VertexColors, //以顶点颜色为准
      // vertexColors: THREE.FaceColors,  //以三角面颜色为准
      side: THREE.DoubleSide, //两面可见
    });
    //网格模型对象
    var mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh); //网格模型对象添加到场景中

更新于2020/11/18

7 访问几何体对象的数据

1.设置立方体顶点颜色

    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // 遍历几何体的face属性
    geometry.faces.forEach(face => {
      // 设置三角面face三个顶点的颜色
      face.vertexColors = [
        new THREE.Color(0xffff00),
        new THREE.Color(0xff00ff),
        new THREE.Color(0x00ffff),
      ]
    });
    var material = new THREE.MeshBasicMaterial({
      // color: 0x0000ff,
      vertexColors: THREE.FaceColors,
      // wireframe:true,//线框模式渲染
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

在这里插入图片描述
2.删除立方体一个面

/**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // pop()：删除数组的最后一个元素   shift：删除数组的第一个元素
    geometry.faces.pop();
    geometry.faces.pop();
    // geometry.faces.shift();
    // geometry.faces.shift();
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff,
      side: THREE.DoubleSide, //两面可见
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中

在这里插入图片描述

8 旋转平移缩放变换、复制、克隆

 var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    // 几何体xyz三个方向都放大2倍
    // geometry.scale(2, 2, 2);
    // 几何体沿着x轴平移50
    // geometry.translate(50, 0, 0);
    // 几何体绕着x轴旋转45度
    // geometry.rotateX(Math.PI / 4);
    // 居中：偏移的几何体居中
    // geometry.center();
    console.log(geometry.vertices);