当前位置：首页 > article >正文

Threejs的学习-几何点线面

article 2025/1/23 23:57:47

所有的界面都可以理解为点组成，由点组成线，由线组成面，本质上都是对象

这些形状大致思路就是创建对应对象，然后用scene对象添加进去就完了

相关对象说明放在 Threejs的学习-常用的API-CSDN博客这个文章里面了

线

需要创建一个几何体，定义其中的顶点，会沿着顶点连线，然后定义颜色，最后创建线对象就完了

主要代码

<body>
  <script>
    let renderer = new THREE.WebGLRenderer({
      antialias:true
    })
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
    renderer.setClearColor(0xFFFFFF, 1.0)

    let camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 1, 1000)
    camera.position.x = 0
    camera.position.y = 1000
    camera.position.z = 0
    camera.lookAt({
      x : 0,
      y : 0,
      z : 0
    })

    let scene = new THREE.Scene()

    // 绘制线主要代码 开始
    // Geometry 定义一个几何体
    let geometry = new THREE.Geometry();
    // LineBasicMaterial 定义线条的材质
    let material = new THREE.LineBasicMaterial({vertexColors:true});
    let color1 = new THREE.Color(0x444444)
    let color2 = new THREE.Color(0xFF0000)

    // Vector3 定义一个点 参数分别是 x轴 y轴 z轴上的值
    let p1 = new THREE.Vector3(-100,0,100);
    // 定义两个点实现一条线， 一条线由点，材质和颜色组成
    let p2 = new THREE.Vector3(100,0,-100);

    // 设置定点
    geometry.vertices.push(p1, p2)
    // 定点设置不同颜色
    geometry.colors.push(color1, color2)

    // 绘制线
    let line = new THREE.Line(geometry, material, THREE.LinePieces);
    scene.add(line)
    // 绘制线主要代码 结束

    renderer.clear()
    renderer.render(scene, camera)

  </script>
</body>

坐标平面

多个线组成的而已，注意修改position的位置

let geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-500,0,0))
geometry.vertices.push(new THREE.Vector3(500,0,0))
for(let i=0; i<=20; i++){
  var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000, opacity:0.2}))
  line.position.z = (i * 50) - 500
  scene.add(line)

  var line = new THREE.Line(geometry,new THREE.LineBasicMaterial({color:0x000000, opacity:0.2}))
  line.position.x = ( i * 50 ) - 500;
  line.rotation.y = 90 * Math.PI / 180; // 旋转90%
  scene.add(line)
}

画一个圆

let camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 1, 1000)
camera.position.z = 5

let scene = new THREE.Scene()

// 绘制圆
const geometry = new THREE.CircleGeometry(1, 32); // 半径为1，32个分段
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const circle = new THREE.Mesh(geometry, material);
scene.add(circle);

画个方块

let camera = new THREE.PerspectiveCamera(75, innerWidth/innerHeight, 1, 1000)
camera.position.z = 5

let scene = new THREE.Scene()

var geometry = new THREE.CubeGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color:0x00ff00});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);