threecanvas实现3d三维立方体像素堆积木建造效果代码-html代码-BFW代码库

threecanvas实现3d三维立方体像素堆积木建造效果代码

代码语言：html

所属分类：三维

代码描述：threecanvas实现3d三维立方体像素堆积木建造效果代码，点击就可以增加立方体。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE HTML>
<html lang="en">

<head>

    <meta charset="utf-8">
    <style type="text/css">
        body {
        				font-family: Monospace;
        				font-size: 12px;
        				background-color: #f0f0f0;
        				margin: 0px;
        				overflow: hidden;
        			}
    </style>
</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ThreeCanvas.28.js"></script>
    <script type="text/javascript">
        /**
     * @author mr.doob / http://mrdoob.com/
     */
    
    var Cube = function (width, height, depth) {
    
    	THREE.Geometry.call(this);
    
    	var scope = this,
    	width_half = width / 2,
    	height_half = height / 2,
    	depth_half = depth / 2;
    
    	v(  width_half,  height_half, -depth_half );
    	v(  width_half, -height_half, -depth_half );
    	v( -width_half, -height_half, -depth_half );
    	v( -width_half,  height_half, -depth_half );
    	v(  width_half,  height_half,  depth_half );
    	v(  width_half, -height_half,  depth_half );
    	v( -width_half, -height_half,  depth_half );
    	v( -width_half,  height_half,  depth_half );
    
    	f4( 0, 1, 2, 3 );
    	f4( 4, 7, 6, 5 );
    	f4( 0, 4, 5, 1 );
    	f4( 1, 5, 6, 2 );
    	f4( 2, 6, 7, 3 );
    	f4( 4, 0, 3, 7 );
    
    	function v(x, y, z) {
    
    		scope.vertices.push( new THREE.Vertex( new THREE.Vector3( x, y, z ) ) );
    	}
    
    	function f4(a, b, c, d) {
    
    		scope.faces.push( new THREE.Face4( a, b, c, d ) );
    	}
    
    	this.computeCentroids();
    	this.computeNormals();
    
    }
    
    Cube.prototype = new THREE.Geometry();
    Cube.prototype.constructor = Cube;
    </script>
    <script type="text/javascript">
        /**
     * @author mr.doob / http://mrdoob.com/
     * based on http://papervision3d.googlecode.com/svn/trunk/as3/trunk/src/org/papervision3d/objects/primitives/Plane.as
     */
    
    var Plane = function ( width, height, segments_width, segments_height ) {
    
    	THREE.Geometry.call( this );
    
    	var ix, iy,
    	width_half = width / 2,
    	height_half = height / 2,
    	gridX = segments_width || 1,
    	gridY = segments_height || 1,
    	gridX1 = gridX + 1,
    	gridY1 = gridY + 1,
    	segment_width = width / gridX,
    	segment_height = height / gridY;
    
    
    	for( iy = 0; iy < gridY1; iy++ ) {
    
    		for( ix = 0; ix < gridX1; ix++ ) {
    
    			var x = ix * segment_width - width_half;
    			var y = iy * segment_height - height_half;
    
    			this.vertices.push( new THREE.Vertex( new THREE.Vector3( x, - y, 0 ) ) );
    
    		}
    
    	}
    
    	for( iy = 0; iy < gridY; iy++ ) {
    
    		for( ix = 0; ix < gridX; ix++ ) {
    
    			var a = ix + gridX1 * iy;
    			var b = ix + gridX1 * ( iy + 1 );
    			var c = ( ix + 1 ) + g.........完整代码请登录后点击上方下载按钮下载查看