three笔记

蔚落 2022-12-01 14:14 140阅读 0赞

### 整个程序的结构 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70][]  
容器

<div id="container"></div>
    let container = document.getElementById('container');

场景Scene

var scene = new Three.Scene();

相机Camera

var camera = new Three.PerspectiveCamera(70,container.clientWidth/container.clientHeight,0.01, 1000);

渲染器Renderer

var renderer = new Three.WebGLRenderer({antialias: true})
    renderer.setSize(container.clientWidth, container.clientHeight);
    container.appendChild(renderer.domElement);

几何体Geometry

//创建一个立方体几何对象Geometry
    let geometry = new Three.BoxGeometry(0.1,0.1, 0.1);

材质Material

var material=new THREE.MeshLambertMaterial({color:0x0000f

# 辅助三维坐标系`AxisHelper` #

var axisHelper = new Three.AxisHelper(5);

### BufferGeometry ###

// 创建一个Buffer类型几何体对象
          var geometry3 = new Three.BufferGeometry();
          //类型数组创建顶点数据
          var vertices = new Float32Array([
            0, 0, 0, //顶点1坐标
            0.5, 0, 0, //顶点2坐标
            0, 1, 0, //顶点3坐标
    
            0, 0, 0, //顶点4坐标
            0, 0, 1, //顶点5坐标
            0.5, 0, 0, //顶点6坐标
          ]);
          // 创建属性缓冲区对象
          var attribue = new Three.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标
          // 设置几何体attributes属性的位置属性
          geometry3.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属性
          geometry3.attributes.color = new Three.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB
          // 定义几何体顶点法向量数据
          var normals = new Float32Array([
            0, 0, 1, //顶点1法向量
            0, 0, 1, //顶点2法向量
            0, 0, 1, //顶点3法向量
    
            0, 1, 0, //顶点4法向量
            0, 1, 0, //顶点5法向量
            0, 1, 0, //顶点6法向量
          ]);
          // 设置几何体attributes属性的位置normal属性
          geometry3.attributes.normal = new Three.BufferAttribute(normals, 3); //3个为一组,表示一个顶点的法向量数据

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70]: /images/20221123/69c436e4472f4a0abb07d1d013751357.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1J1YnlMaW5U_size_16_color_FFFFFF_t_70 1]: /images/20221123/5ffffe284544413a9e327679b967cf88.png