three.js 顶点颜色数据插值计算

汉武大帝·

已于 2022-02-09 11:16:18 修改

阅读量877

点赞数

分类专栏： three.js 文章标签： javascript 开发语言 ecmascript

于 2022-02-09 10:47:18 首次发布

本文链接：https://blog.csdn.net/yinge0508/article/details/122837201

版权

three.js 专栏收录该内容

111 篇文章 11 订阅

订阅专栏

先看效果：

three.js 渲染几个顶点，分别设置不同的颜色；

<!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>顶点颜色数据插值计算</title>
  <script src="./three.js"></script>
  <script src="./OrbitControls.js"></script>
</head>

<body>
  <script>
    // 1,创建场景对象
    var scene = new THREE.Scene();
    // 2,创建几何体模型对象
    // 2.1创建缓冲几何体对象
    var buffer_geometry = new THREE.BufferGeometry();
    // 2.2 使用类型数组创建顶点位置数据
    var vertices = new Float32Array([
      0,0,0,
      0,100,1,
      0,0,100
    ])
    // 创建 属性缓冲区对象
    var buffer_attribute = new THREE.BufferAttribute(vertices,3);
    buffer_geometry.attributes.position = buffer_attribute;
    // 2.3 使用类型数组创建颜色数据
    var colors = new Float32Array([
      1,0,0,
      0,1,1,
      0,0,1
    ])
    // 创建 属性缓冲区对象
    var buffer_color = new THREE.BufferAttribute(colors,3);
    buffer_geometry.attributes.color = buffer_color;
    // 创建点材料对象
    var pointer_material = new THREE.PointsMaterial({
      size: 20, // 点尺寸
      vertexColors: THREE.VertexColors // 点颜色设置；vertexColors有三个属性值，
      // 可用值为 THREE.NoColors, THREE.FaceColors 和 THREE.VertexColors。缺省值为 THREE.NoColors.
      // 设置为THREE.VertexColors,threejs渲染模型的时候就会使用几何体的顶点颜色
    });
    // 创建点对象；Points,以可变大小的点形式来显示粒子的类（参数是缓冲几何体对象，点材料对象）
    var points = new THREE.Points(buffer_geometry, pointer_material);
    scene.add(points);
    // 创建网格模型对象
    var mesh = new THREE.Mesh(buffer_geometry, pointer_material);
    // scene.add(mesh); // 场景中添加该网格模型
    // 3，创建环境光对象
    var ambient = new THREE.AmbientLight(0xffffff);
    scene.add(ambient); // 场景中添加环境光对象
    // 4，创建正交相机
    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 axisHelper = new THREE.AxisHelper(500); // 创建坐标轴对象
    scene.add(axisHelper);
    // 5，创建渲染器对象
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width,height); // 设置渲染器渲染的尺寸
    document.body.appendChild(renderer.domElement); // body元素中插入canvas对象

    function render(){
      // points.translateZ(0.1);
      mesh.translateZ(0.1);
      renderer.render(scene,camera);
      requestAnimationFrame(render);
    }
    render();
    var constrols = new THREE.OrbitControls(camera,renderer.domElement); // 创建鼠标控制对象
    // constrols.addEventListener('change',render);
  </script>
</body>

</html>

汉武大帝·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js 顶点颜色数据插值计算

先看效果：three.js 渲染几个顶点，分别设置不同的颜色；<!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-s.
复制链接

扫一扫