基本信息
源码名称：three.js 绘制一个立方体和一个网格线
源码大小：0.30M
文件格式：.zip
开发语言：js
更新时间：2018-05-17
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 2 元　
   源码介绍 

<!DOCTYPE html>
<html>
	<head>
		<!-- 移动相机的位置-->
		<meta charset="UTF-8">
		<title>WebGL中文网</title>
		<script src="js/Three.js"></script>
        <script src="js/Stats.js"></script>
		<script src="js/tween.min.js"></script>
        <script src="js/loaders/OBJLoader.js"></script>

		
		<style type="text/css">
			div#canvas-frame {
				border: none;
				cursor: pointer;
				width: 100%;
				height: 600px;
				background-color: #EEEEEE;
			}

		</style>
		<script>
			/*
			* 围绕某个 x,y,z轴测试
			*/
			
			
            var renderer;
            var stats;

            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';
                document.getElementById('canvas-frame').appendChild(stats.domElement);
            }

            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 100;
                camera.position.y = 300;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });
            }

            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }

            var light;
            function initLight() {
                light = new THREE.AmbientLight(0xFF0000);
                light.position.set(100, 100, 200);
                scene.add(light);

            }

            var cube;
			var boxMesh,objMesh = undefined;
            var pivot = undefined;
			var axis1,axis2,axis3;
            function initObject() {

                var manager = new THREE.LoadingManager();
               
			    var loader = new THREE.OBJLoader( manager );
                loader.load( 'model.obj', function ( object ) {

                    //scene.add( object );
                    objMesh = object;

                    pivot = new THREE.Group();
                    box = new THREE.Box3().setFromObject( objMesh );
					
					pivot.add( objMesh );
					
                    box.center( objMesh.position ); 
                    
                    objMesh.position.multiplyScalar( - 1 );
					
                    scene.add( pivot );
					box.center( pivot.position ); 
					
					// 辅助坐标
					axis1 = new THREE.AxisHelper(100);
					axis1.position.copy( pivot.position );
					scene.add( axis1 );
					
					axis2 = new THREE.AxisHelper(100);
					axis2.position.copy( objMesh.position );
					scene.add( axis2 );
					

                });


                // 立方体
                var geometry = new THREE.BoxGeometry( 30, 30, 30 );
                
                for ( var i = 0; i < geometry.faces.length; i  = 2 ) {

                    var hex = Math.random() * 0xffffff;
                    geometry.faces[ i ].color.setHex( hex );
                    geometry.faces[ i   1 ].color.setHex( hex );

                }
                
                var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors} );
                boxMesh = new THREE.Mesh( geometry,material);
                boxMesh.position = new THREE.Vector3(0,0,0);
                scene.add(boxMesh);
				
				
            }
			
			function initGrid(){
				var helper = new THREE.GridHelper( 1000, 50 );
				helper.setColors( 0x0000ff, 0x808080 );
				scene.add( helper );
			}
			
            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();


                initObject();
				initGrid();
				
                animation();

            }

            // 帧循环、游戏循环
            function animation()
            {
				//mesh.rotation.y  =0.01;
                boxMesh.rotateY(0.01);
                if(pivot != undefined){
                    pivot.rotateY(0.01);
                }
     
                renderer.render(scene, camera);
                requestAnimationFrame(animation);

            }

		</script>
	</head>

	<body onload="threeStart();">
		<div style="margin-left:150px;">
			<p>课前准备，绘制一个立方体和一个网格线</p>
		</div>
		<div id="canvas-frame"></div>
	</body>
</html>