import * as THREE from "three";
// 导入轨道控制器
import {
OrbitControls } from "three/examples/jsm/controls/OrbitControls";
// 导入动画库
import gsap from "gsap";
// 导入dat.gui 操作变量界面库
import * as dat from "dat.gui"; // https://www.npmjs.com/package/dat.gui
import webglGlobalOptions from "./config/webgl";
// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
// 设置相机的位置 0, 0, 10: x y z
camera.position.set(0, 0, 10);
// 将相机添加到场景
scene.add(camera);
// 循环50个三角形
for (let index = 0; index < 50; index++) {
// 创建几何体
const geometry = new THREE.BufferGeometry();
// 每个三角形面需要三个点 9个坐标
// Float32Array 保存的是BufferGeometry 缓冲区点位信息 所以需要设置Float32Array长度
const positionArray = new Float32Array(9);
for (let coordinate = 0; coordinate < 9; coordinate++) {
positionArray[coordinate] = Math.random() * 10 - 5 // -5 ~ 5
}
// 3 每3个点为一个坐标
geometry.setAttribute("position", new THREE.BufferAttribute(positionArray, 3));
// 设置几何体材质
let color = new THREE.Color(Math.random(),Math.random(),Math.random())
const material = new THREE.MeshBasicMaterial({
color,
transparent: true,
opacity: 0.5
});
// 根据几何体和材质 创建物体
const mesh = new THREE.Mesh(geometry, material)
// 添加物体到场景
scene.add(mesh)
}
// 初始化渲染器
const renderer = new THREE.WebGLRenderer();
// 设置渲染的尺寸大小
renderer.setSize(window.innerWidth, window.innerHeight);
// 将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
// 使用渲染器,通过相机将场景渲染进来
// renderer.render(scene, camera); // 只是渲染了一次
// 上面的是平面物体 需要看立体的 则需要创建轨道控制器
//物体添加轨道控制器(让物体可以随着鼠标360旋转)
const controls = new OrbitControls(camera, renderer.domElement);
// 设置控制器阻尼,让控制器具有惯性
controls.enableDamping = true; // 设置完后,必须在动画循环里调用update()
// 添加坐标轴辅助器
const axesHelper = new THREE.AxesHelper(
webglGlobalOptions.WEBGL_COORDINATE_AXIS_LENGTH
);
scene.add(axesHelper);
function render() {
controls.update();
renderer.render(scene, camera);
// requestAnimationFrame 浏览器自带函数: 浏览器每加载一帧执行一次render函数
requestAnimationFrame(render);
}
// 首次渲染
render();
Threejs之BufferGeometry实现酷炫三角形
猜你喜欢
转载自blog.csdn.net/weixin_44224921/article/details/129861549
今日推荐
周排行