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.........完整代码请登录后点击上方下载按钮下载查看