threejs 创建点线面

加油小吃货

已于 2024-02-01 17:01:50 修改

阅读量497

点赞数

文章标签： javascript 前端 threejs

于 2023-10-09 11:37:08 首次发布

本文链接：https://blog.csdn.net/Thea12138/article/details/133698145

版权

threejs基本操作，创建点线面

创建点：

import * as THREE from './build/three.module.js'

//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();

//类型化数组创建顶点数据
const vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  250, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标
  0, 0, 10, //顶点4坐标
  0, 0, 100, //顶点5坐标
  50, 0, 10, //顶点6坐标
]);

// 创建属性缓冲区对象
//3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3);
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;


 // 点渲染模式
 const material = new THREE.PointsMaterial({
   color: 0xffff00,
   size: 20.0 //点对象像素尺寸
 });
 const points = new THREE.Points(geometry, material); //点模型对象

// // 线材质对象
// const material = new THREE.LineBasicMaterial({
//   color: 0xffff00 //线条颜色
// });
// // 创建线模型对象
// const line = new THREE.LineSegments(geometry, material);

// 正面：逆时针
// 反面：顺时针
// const material = new THREE.MeshBasicMaterial({
  // color: 0x0000ff, //材质颜色
  // side: THREE.FrontSide, //默认只有正面可见
  // side: THREE.DoubleSide, //两面可见
  // side: THREE.BackSide, //设置只有背面可见
});

const mesh = new THREE.Mesh(geometry, material)

export default mesh

创建线：

import * as THREE from './build/three.module.js'

//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();

//类型化数组创建顶点数据
const vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  250, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标
  0, 0, 10, //顶点4坐标
  0, 0, 100, //顶点5坐标
  50, 0, 10, //顶点6坐标
]);

// 创建属性缓冲区对象
//3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3);
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;


// // 点渲染模式
// const material = new THREE.PointsMaterial({
//   color: 0xffff00,
//   size: 20.0 //点对象像素尺寸
// });
// const points = new THREE.Points(geometry, material); //点模型对象

 // 线材质对象
 const material = new THREE.LineBasicMaterial({
   color: 0xffff00 //线条颜色
 });
 // 创建线模型对象
 const line = new THREE.LineSegments(geometry, material);

// 正面：逆时针
// 反面：顺时针
//const material = new THREE.MeshBasicMaterial({
  //color: 0x0000ff, //材质颜色
 // side: THREE.FrontSide, //默认只有正面可见
  // side: THREE.DoubleSide, //两面可见
  // side: THREE.BackSide, //设置只有背面可见
});

const mesh = new THREE.Mesh(geometry, material)

export default mesh

创建面

import * as THREE from './build/three.module.js'

//创建一个空的几何体对象
const geometry = new THREE.BufferGeometry();

//类型化数组创建顶点数据
const vertices = new Float32Array([
  0, 0, 0, //顶点1坐标
  250, 0, 0, //顶点2坐标
  0, 100, 0, //顶点3坐标
  0, 0, 10, //顶点4坐标
  0, 0, 100, //顶点5坐标
  50, 0, 10, //顶点6坐标
]);

// 创建属性缓冲区对象
//3个为一组，表示一个顶点的xyz坐标
const attribue = new THREE.BufferAttribute(vertices, 3);
// 设置几何体attributes属性的位置属性
geometry.attributes.position = attribue;


// // 点渲染模式
// const material = new THREE.PointsMaterial({
//   color: 0xffff00,
//   size: 20.0 //点对象像素尺寸
// });
// const points = new THREE.Points(geometry, material); //点模型对象

// // 线材质对象
// const material = new THREE.LineBasicMaterial({
//   color: 0xffff00 //线条颜色
// });
// // 创建线模型对象
// const line = new THREE.LineSegments(geometry, material);

// 正面：逆时针
// 反面：顺时针
const material = new THREE.MeshBasicMaterial({
  color: 0x0000ff, //材质颜色
  side: THREE.FrontSide, //默认只有正面可见
  // side: THREE.DoubleSide, //两面可见
  // side: THREE.BackSide, //设置只有背面可见
});

const mesh = new THREE.Mesh(geometry, material)

export default mesh