利用jQuery实现3D自由立体旋转



10 36 13



特效描述:利用jQuery实现 3D自由 立体旋转,利用jQuery实现3D自由立体旋转

代码结构

1. 引入JS

<script type="text/javascript" src="js/three.min.js"></script>
<script type="text/javascript" src="js/TrackballControls.js"></script>
<script type="text/javascript" src="js/CSS3DRenderer.js"></script>

2. HTML代码

		<script>
			var camera, scene, renderer;
			var geometry, material, mesh;
			var scene2, renderer2;
			var controls;
			init();
			animate();
			function init() {
				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 1000 );
				camera.position.set( 500, 100, 100 );
				controls = new THREE.TrackballControls( camera );
				controls.rotateSpeed = 1.0;
				controls.zoomSpeed = 1.2;
				controls.panSpeed = 0.8;
				controls.noZoom = false;
				controls.noPan = false;
				controls.staticMoving = false;
				controls.dynamicDampingFactor = 0.3;
				controls.keys = [ 70, 90, 75 ];
				scene = new THREE.Scene();
				geometry = new THREE.CubeGeometry( 200,200, 200 );
				material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1} );
				mesh = new THREE.Mesh( geometry, material );
				scene.add( mesh );
				renderer = new THREE.CanvasRenderer();
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );
				//
				scene2 = new THREE.Scene();
				for ( var i = 0; i < 20; i ++ ) {
					var element = document.createElement( 'div' );
					element.style.width = '100px';
					element.style.height = '100px';
					element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
					var object = new THREE.CSS3DObject( element );
					object.position.x = Math.random() * 200 - 100;
					object.position.y = Math.random() * 200 - 100;
					object.position.z = Math.random() * 200 - 100;
					object.scale.x = Math.random() + 0.5;
					object.scale.y = Math.random() + 0.5;
					scene2.add( object );
				}
				//
				renderer2 = new THREE.CSS3DRenderer();
				renderer2.setSize( window.innerWidth, window.innerHeight );
				renderer2.domElement.style.position = 'absolute';
				renderer2.domElement.style.top = 0;
				document.body.appendChild( renderer2.domElement );
			}
			function animate() {
				requestAnimationFrame( animate );
				controls.update();
				renderer.render( scene, camera );
				renderer2.render( scene2, camera );
			}
		</script>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;clear:both">
</div>



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


热门标签: 加载动画 h5弹窗动画 html5弹窗动画 旋转翻转 旋转 翻转 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 图片翻转 图片旋转 h5光标动画 html5光标动画

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

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

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