three笔记

最新推荐文章于 2023-04-03 00:02:10 发布

RubyLinT

最新推荐文章于 2023-04-03 00:02:10 发布

阅读量260

点赞数 1

分类专栏： three 文章标签： three

本文链接：https://blog.csdn.net/RubyLinT/article/details/108261965

版权

three 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

整个程序的结构

容器

<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个为一组,表示一个顶点的法向量数据