<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js三维图形图表特效 - 【更多源码：www.96flw.com】</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
</style>
</head>
<body>
<script src="libs/dat.gui.min.js"></script>
<script src="libs/stats.min.js"></script>
<script src="libs/three.js"></script>
<script src="libs/OrbitControls.js"></script>
<script src="CPCharts.js"></script>
<script src="libs/echarts.min.js"></script>
<script src="libs/jquery-3.3.1.min.js"></script>
<script>
var container, stats;
var camera, scene, renderer, controls;
var meshs = [];
var objects = [];
var pCharts = null;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 30000 );
camera.position.set(0,200,100);
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xf0f0f0 );
var light = new THREE.DirectionalLight( 0xffffff, 1 );
// light.position.set( 1, 1, 1 ).normalize();
light.position.set( 0, 500, 300 );
scene.add( light );
scene.add( new THREE.AmbientLight(0xcccccc) );
var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
var groundMat = new THREE.MeshLambertMaterial( { color: 0x808080 } );
// groundMat.color.setHSL( 0.095, 1, 0.75 );
var ground = new THREE.Mesh( groundGeo, groundMat );
ground.position.y = - 5;
ground.rotation.x = - Math.PI / 2;
ground.receiveShadow = true;
scene.add( ground );
var geometry = new THREE.BoxGeometry( 10,10, 10 );
for ( var i = 0; i < 200; i ++ ) {
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
object.position.x = Math.random() * 1000 - 400;
object.position.y = 0;
object.position.z = Math.random() * 1000 - 400;
// object.rotation.x = Math.random() * 2 * Math.PI;
// object.rotation.y = Math.random() * 2 * Math.PI;
// object.rotation.z = Math.random() * 2 * Math.PI;
object.scale.x = Math.random() + 0.5;
object.scale.y = Math.random() + 0.5;
object.scale.z = Math.random() + 0.5;
scene.add( object );
meshs.push( object );
objects.push( object );
}
renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild(renderer.domElement);
controls = new THREE.OrbitControls( camera, renderer.domElement );
var gui = new dat.GUI();
gui.close();
stats = new Stats();
container.appendChild( stats.dom );
var charts = [
{
id: 1,
name:"",
type:"plane",
charttype:"line",
visible:true,
color:"",
transparent:true,
istop:true,
opacity: 1,
chartsize: {x: 512, y: 512 },
size: {x: 60, y: 40 , z: 32},
rotation: { x: 0, y: 0, z: 0 },
position:{x: -10, y: 120 , z: 1.499}
},
{
id: 2,
name:"",
type:"plane",
charttype:"line",
visible:true,
color:"#404a59",
transparent:true,
istop:false,
opacity: 1,
chartsize: {x: 512, y: 512 },
size: {x: 60, y: 40 , z: 32},
rotation: { x: 0, y: 0, z: 0 },
position:{x: 261.718, y: 65 , z: 159.52}
},
{
id: 3,
name:"",
type:"plane",
charttype:"bar",
visible:true,
color:"",
istop:false,
transparent:true,
opacity: 0.9,
chartsize: {x: 512, y: 512 },
size: {x: 60, y: 40 , z: 32},
rotation: { x: 0, y: 0, z: 0 },
position:{x: 22.0097, y: 50 , z: 90.51}
},
{
id: 4,
name:"",
type:"plane",
charttype:"pie",
visible:true,
color:"",
transparent:true,
istop:false,
opacity: 0.9,
chartsize: {x: 512, y: 512 },
size: {x: 50, y: 50 , z: 32},
rotation: { x: 0, y: 0, z: 0 },
position:{x: 117.68, y: 70 , z: -97.13}
},
{
id: 5,
name:"",
type:"circle",
charttype:"gauge",
visible:true,
color:"#333",
transparent:true,
istop:true,
opacity: 1,
chartsize: {x: 512, y: 512 },
size: {x: 32, y: 0 , z: 6.283185307179586},
rotation: { x: 0, y: 0, z: 0 },
position:{x: 250, y: 8.4067 , z: -47.533}
},
{
id: 6,
name:"",
type:"circle",
charttype:"elecgauge",
visible:true,
color:"#333",
transparent:true,
istop:true,
opacity: 1,
chartsize: {x: 512, y: 512 },
size: {x: 32, y: 0.5235987755982988 , z: 2.094395102393195},
rotation: { x: 0, y: 0, z: 0 },
position:{x: 400, y: 4.3 , z: -49.540}
}
];
pCharts = new SZ.PCharts(scene, '');
pCharts.addCharts(charts);
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
var angularSpeed = 0.2;
var lastTime = 0;
function rendertime() {
// update
var time = (new Date()).getTime();
var timeDiff = time - lastTime;
// var angleChange =Math.PI/4;
if (meshs) {
// console.log(mesh)
// mesh.rotation.y +=0.02;
for(var i =0;i<meshs.length;i++ ){
meshs[i].rotation.y +=0.05;
}
// mesh.rotation.y = angleChange;
// console.log( mesh.rotation.y)
// pyra.rotation.y += angleChange / 5;
// pyra.rotation.x += angleChange / 10;
// // pyram.rotation.x += angleChange / 10;
// pyram.rotation.y += angleChange / 15;
// octa.rotation.y += angleChange;
// if (mesh.rotation.y > Math.PI * 2) {
// mesh.rotation.y -= Math.PI * 2;
// }
lastTime = time;
// render
}
}
function animate() {
requestAnimationFrame( animate );
rendertime()
render();
stats.update();
if (pCharts) pCharts.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
three.js三维图形图表特效.zip （8个子文件） 
jiaoben7385 libs 
OrbitControls.js 23KB three.js 1.08MB stats.min.js 2KB dat.gui.min.js 56KB jquery-3.3.1.min.js 85KB echarts.min.js 691KB
index.html 6KB CPCharts.js 14KB资源评论
ZXH110242024-11-05资源很实用，内容详细，值得借鉴的内容很多，感谢分享。
码云笔记
- 粉丝: 3w+
最新资源
- 基于Matlab开发的实时视频监控异常人体姿势识别与行为分析系统_跌倒检测_打架识别_行走异常_站立不稳_手臂伸展异常_动作捕捉_姿态估计_行为预警_安全监控_智能分析_视频处理_.zip
- 基于Matlab开发的实时视频监控中人体异常姿态与行为智能识别预警系统_跌倒检测_打架行为识别_异常行走姿态分析_站立失衡监测_手臂异常伸展动作捕捉_视频帧分析_运动轨迹追踪_行为.zip
- 基于Matlab开发的实时视频监控异常人体姿态检测与行为识别系统_跌倒识别_打架检测_异常行走姿态分析_站立不稳预警_手臂异常伸展监测_公共场所安全防护_智能监控预警_行为模式分析.zip
- 基于Matlab开发的实时视频监控异常人体姿势识别与行为分析系统_跌倒检测_打架识别_异常行走姿态分析_站立不稳预警_手臂异常伸展监测_公共场所安全监控_智能预警提示_视频帧处理_.zip
- 基于Matlab开发的视频异常行为识别与预警系统_人体姿态检测_跌倒识别_打架行为分析_异常行走模式判断_站立姿态异常监测_手臂伸展动作捕捉_实时视频流处理_运动轨迹追踪_行为模式.zip
- 基于Matlab开发的异常姿势识别与行为分析系统_跌倒检测_打架识别_行走姿态异常_站立不稳_手臂异常伸展_视频监控_实时预警_安全防护_行为模式分析_智能监控系统_公共安全_老人.zip
- 基于Matlab开发的视频异常行为智能监测系统_跌倒检测_打架识别_异常姿态分析_行为预警_实时监控_运动轨迹追踪_姿态估计算法_深度学习模型_OpenCV集成_图像处理技术_多目.zip
- 基于OpenCV和Python的手势识别与控制系统_通过摄像头实时捕捉手部动作并利用计算机视觉算法进行动态手势识别_实现非接触式的人机交互控制_包括视频采集图像处理色域转换高斯滤波.zip
- 基于Matlab开发的异常姿势识别与行为分析系统_跌倒检测_打架识别_行走姿态异常_站立不稳_手臂异常伸展_视频监控预警_实时行为分析_运动轨迹追踪_姿态特征提取_人体关键点检测_.zip
- 基于Python和OpenCV的手势识别与控制系统_通过摄像头实时捕捉手部动作并利用计算机视觉算法进行精确识别_实现无接触式人机交互和自动化控制_包括图像处理色域转换高斯滤波OST.zip
- 基于Python与MediaPipe_Pose库的羽毛球运动员训练视频姿势识别与移动距离计算系统_实时姿态估计_骨骼关节点标注_姿势标准性判断_球场参考线辅助定位_运动员移动轨迹追.zip
- 基于Vuforia引擎开发的增强现实生日贺卡应用_图片识别触发三维模型与视频播放_手势交互控制旋转缩放与暂停功能_支持Windows10环境与Android80以上移动端部署_集.zip
- 基于计算机视觉与串行通信的手势识别系统_实时视频流捕获与手部动作检测_精准识别单手双手多指组合手势_视频画面动态标注识别结果_通过串口发送编码数据与外部设备交互_适用于智能家居控制.zip
- 基于卷积神经网络的手写数字识别、FGSM 攻击及对抗训练防御的华中科技大学计算机视觉实验
- 3D医学图像语义分割系统设计与实现
- 2024年全国大学生数学建模竞赛A题“板凳龙”元宵活动方案解析与实现代码及高分论文
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
