【ThreeJs 初学习】随机三角形的实现方案

随机三角形的实现方案

根据官网的文档整理出一份API文档, 地址是:ThreeJs 官网文档,其目的还是为了方便查阅


下列代码源码地址

在这里插入图片描述

上述的截图 就是大致的实现效果。

实现内容

首先我们需要对法向量 以及如何完成一个面有一定的了解,具体了解的内容如下图。
其实最简单的理解就是一个点 由三个坐标组成(X轴,Y轴,Z轴)一根线最少由两个点组成那一个面 最少由三个点组成

在这里插入图片描述

import * as THREE from "three";
import dat from "dat.gui";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

// 创建场景
const scene = new THREE.Scene();

// 创建相机
const camera = new THREE.PerspectiveCamera(
  75,
  window.innerWidth / window.innerHeight,
  1,
  10000
);
// 设置相机的位置
camera.position.set(0, 0, 10);
scene.add(camera);

// 通过循环添加立方体
for (let i = 0; i < 50; i++) {
  const geometry = new THREE.BufferGeometry();
  const vertices = new Float32Array(9);
  for (let j = 0; j < 9; j++) {
    vertices[j] = Math.random() * 10 - 5;
  }
  geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
  const color = new THREE.Color(Math.random(), Math.random(), Math.random());
  // 设置材质
  const material = new THREE.MeshBasicMaterial({ color, transparent: true });
  // 通过几何体 以及材质 合成物体
  const cube = new THREE.Mesh(geometry, material);
  // 设置透明度
  cube.material.opacity = 0.6;
  scene.add(cube);
}

// 创建渲染器
const renderer = new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 添加辅助线
const axesHelper = new THREE.AxesHelper(7);
scene.add(axesHelper);

// 创建轨道
const orbitControls = new OrbitControls(camera, renderer.domElement);
orbitControls.enableDamping = true;
// 开启轨道自动旋转
orbitControls.autoRotate = true;
// 控制自动旋转的速度
orbitControls.autoRotateSpeed = 10.0;

// 可视化设置
const gui = new dat.GUI();
gui.add(orbitControls, "autoRotateSpeed", 1.0, 10.0, 0.5).name("旋转速度");
gui.add(orbitControls, "autoRotate").name("是否旋转");

function render() {
  orbitControls.update();
  renderer.render(scene, camera);

  requestAnimationFrame(render);
}
render();

  • 其实创建整个页面的过程 还是大致分为几步走:
    • 我们需要一个场景,因为所有的物体 以及相机等 都会存放到场景中的
    • 我们需要一个相机,因为看到的所有的内容,都是通过相机的视角看到的
    • 添加物体, 将物体添加到场景中
      • 因为是三个点确定一个面,一个点由三个坐标组成,所以是9个坐标。如代码const vertices = new Float32Array(9);
      • 通过代码vertices[j] = Math.random() * 10 - 5; 产生随机坐标
      • const color = new THREE.Color(Math.random(), Math.random(), Math.random()); 产生随机颜色
      • 最后 通过几何 + 材质 = 物体。 将物体 添加到 场景中
    • 创建渲染器,同时设置渲染器的大小, 将渲染器dom 添加到body中
    • 添加辅助线
    • 创建轨道,同时开启自旋转
    • 最后通过渲染器 渲染场景 以及相机

结论

以上就是随机渲染三角形的内容。源码可见, 为了能让效果更好看点,如果有什么新的建议 欢迎及时留言,一起学习

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值