js三维图形图表特效代码下载



6 23 8



特效描述:三维图形图表,js三维图形图表特效代码下载

代码结构

1. 引入JS

<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>

2. HTML代码

<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: html5动画导航菜单 html5图片动画 html5文字动画 html5表情动画 html5线条动画 html5飘落动画 html5光标动画 html5悬停动画 加载动画 html5弹窗动画 html5动画h5动画 html5按钮动画

×
×
51前端

注册

官方QQ群
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到