原文链接: threejs 3d 动态螺旋线绘制 BufferGeometry 动态折线图
上一篇: threejs 入门 绕定点旋转和自旋
下一篇: 阿米诺 海韵键盘 背光灯和模式 设置
主要思路是用BufferGeometry绘制折线图, 每次向点集中添加点的坐标, 然后动态去修改
还是官网靠谱
/docs/index.html#manual/en/introduction/How-to-update-things
/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;// geometryconst geometry = new THREE.BufferGeometry();// attributesconst positions = new Float32Array(MAX_POINTS * 3); // 3 vertices per pointgeometry.setAttribute("position",new THREE.BufferAttribute(positions, 3));// draw rangeconst drawCount = 2; // draw the first 2 points, onlygeometry.setDrawRange(0, 0);// materialconst material = new THREE.LineBasicMaterial({ color: 0xff0000 });// lineconst 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 renderrenderer.render(scene, camera); //执行渲染操作}setInterval(render, 16);const controls = new THREE.OrbitControls(camera, renderer.domElement); //创建控件对象controls.addEventListener("change", render); //监听鼠标、键盘事件</script></body></html>
