threejs 3d 动态螺旋线绘制 BufferGeometry 动态折线图
最编程
2024-01-15 14:39:55
...
原文链接: threejs 3d 动态螺旋线绘制 BufferGeometry 动态折线图
上一篇: threejs 入门 绕定点旋转和自旋
下一篇: 阿米诺 海韵键盘 背光灯和模式 设置
主要思路是用BufferGeometry 绘制折线图, 每次向点集中添加点的坐标, 然后动态去修改
还是官网靠谱
https://threejs.org/docs/index.html#manual/en/introduction/How-to-update-things
http://www.yanhuangxueyuan.com/Three.js/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="../build/three.js"></script>
<script src="../examples/js/controls/OrbitControls.js"></script>
</head>
<body>
<script>
const scene = new THREE.Scene();
const speed = 1; // 移动速度
const initX = 0;
const initY = 0;
const limit = 2000; // 点的个数限制
const radius = 100;
const MAX_POINTS = 5000;
// geometry
const geometry = new THREE.BufferGeometry();
// attributes
const positions = new Float32Array(MAX_POINTS * 3); // 3 vertices per point
geometry.setAttribute(
"position",
new THREE.BufferAttribute(positions, 3)
);
// draw range
const drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange(0, 0);
// material
const material = new THREE.LineBasicMaterial({ color: 0xff0000 });
// line
const line = new THREE.Line(geometry, material);
scene.add(line);
//点光源
const point = new THREE.PointLight(0xffffff);
point.position.set(0, 0, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
const width = window.innerWidth; //窗口宽度
const height = window.innerHeight; //窗口高度
const k = width / height; //窗口宽高比
const s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
const camera = new THREE.OrthographicCamera(
-s * k,
s * k,
s,
-s,
1,
1000
);
camera.position.set(200, 200, 200); //设置相机位置
camera.lookAt(0, 0, 0); //设置相机方向(指向的场景对象)
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height); //设置渲染区域尺寸
renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
const axisHelper = new THREE.AxesHelper(500);
scene.add(axisHelper);
let degree = 0;
let z = 0;
let index = 0;
let count = 0;
function render() {
const positions = line.geometry.attributes.position.array;
if (index >= MAX_POINTS) {
return;
}
const d = (++degree * Math.PI) / 180;
const x = 200 * Math.cos(d);
const y = 200 * Math.sin(d);
z++;
const i = index * 3;
positions[i] = x;
positions[i + 1] = y;
positions[i + 2] = z;
index++;
line.geometry.setDrawRange(0, index);
line.geometry.attributes.position.needsUpdate = true; // required after the first render
renderer.render(scene, camera); //执行渲染操作
}
setInterval(render, 16);
const controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象
controls.addEventListener("change", render); //监听鼠标、键盘事件
</script>
</body>
</html>
上一篇: 3种javascript中将字符串转换为json的方法
下一篇: C# 字符串转简单运算表达式