threejs 3d 动态螺旋线绘制 BufferGeometry 动态折线图

原文链接: 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;// 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>

threejs 3d 动态螺旋线绘制 BufferGeometry 动态折线图相关推荐

Matplotlib【学习大礼包】数据可视化基础掌获绘图基础语法与常用参数、设置pyplot的动态rc参数、绘制散点图、折线图、直方图、饼图
文章目录如何查看完整版!!(代码+图片) 第3章 Matplotlib 数据可视化基础 3.1 掌获绘图基础语法与常用参数 3.1.1 掌获pyplot基础语法 1.创建画布与创建子图 2.添加画布 ...
highcharts 动态生成x轴和折线图
highchart 动态生成x轴和折线图 <!DOCTYPE HTML> <html><head><meta charset="utf-8" ...
Echarts动态加载多条折线图
背景:动态加载多条折线图,折线图条数不确定页面效果: 页面代码 //气象数据function serchQx(beginTime, endTime, str, parameter) {$(" ...
python使用matplotlib可视化折线图、在可视化图像中同时绘制多条折线图
python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图目录 python使用matplotlib可视化折线图.在可视化图像中同时绘制多条折线图
matlab绘制多条折线图
%绘制多条折线图 clear clc n = 12; x = 1:n; C = 10 * rand(n,1); A = 10 * rand(n,1); J = 10 * rand(n,1); figu ...
绘制多个折线图_精品图表 | Excel绘制面板折线图
上一节的内容中给大家讲解了多系列折线图的绘制,还没有学会的小伙伴可以点击下面的链接学习,或者打开上面的[专辑]查看更多的文章. 精品图表 | Excel绘制多系列折线图本期内容将给大家带来的折线面板 ...
python中画折线图不同颜色的两段_matplotlib绘制精美的折线图——另附颜色、形状查找表...
0 配置及环境系统: win7 x64 python: 3.64 x64 包: matplotlib.numpy 本文主要是讲述如何利用python的matplotlib包来绘制精美的折线图,包括绘 ...
Matlab绘制多个折线图的方法
给出一个Matlab绘制折线图的例子:Matlab绘制多个折线图和子图的详细方法,并且字体设置为Times New Roman,可用于普通课程作业的撰写. %% 维数选择 % 人脸1.f Dim = ...
python matplotlib绘制多条折线图
python matplotlib绘制多条折线图代码 import matplotlib.pyplot as pltx = [6, 24, 48, 72] y1 = [87, 174, 225, 2 ...

threejs 3d 动态螺旋线绘制 BufferGeometry 动态折线图

threejs 3d 动态螺旋线绘制 BufferGeometry 动态折线图相关推荐

最新文章

热门文章