html5 3d立方体_HTML5 3D立方体幻灯片

最新推荐文章于 2023-05-22 13:53:34 发布
最新推荐文章于 2023-05-22 13:53:34 发布
阅读量153 收藏
点赞数
文章标签： js 3d webgl html5 vue ViewUI
原文链接：https://www.script-tutorials.com/html5-3d-cube-slideshow/
版权

html5 3d立方体

HTML5 3D Cube Slideshow
HTML5 3D Cube Slideshow

HTML5 3D Cube Slideshow Our new tutorial tells us about creation of animated 3D Cube slideshow (pictures are located within the walls of the cube). The cube itself rotates continuously.

HTML5 3D Cube幻灯片放映我们的新教程向我们介绍了动画3D Cube幻灯片放映的创建(图片位于立方体的壁内)。 立方体本身连续旋转。

Here are our demo and downloadable package:

这是我们的演示和可下载的软件包：

现场演示
打包下载

Ok, download the source files and lets start coding !

好的，下载源文件并开始编码！

步骤1. HTML (Step 1. HTML)

This is markup of our result slideshow page. Here it is.

这是我们的结果幻灯片页面的标记。 这里是。

index.html (index.html)

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 3D Cube Slideshow | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 3D Cube Slideshow</h2>
            <a href="https://www.script-tutorials.com/html5-3d-cube-slideshow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <canvas id="slideshow" width="1280" height="800"></canvas>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>HTML5 3D Cube Slideshow | Script Tutorials</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <script src="js/script.js"></script>
    </head>
    <body>
        <header>
            <h2>HTML5 3D Cube Slideshow</h2>
            <a href="https://www.script-tutorials.com/html5-3d-cube-slideshow/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <canvas id="slideshow" width="1280" height="800"></canvas>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

css / main.css (css/main.css)

That file available in package (because it just contains styles of page layout)

该文件在软件包中可用(因为它只包含页面布局样式)

步骤3. JS (Step 3. JS)

js / script.js (js/script.js)

var canvas, ctx;
var aImages = [];
var points = [];
var triangles = [];
var textureWidth, textureHeight;
var lev = 3;
var angle = 0;
// scene vertices
var vertices = [
    new Point3D(-2,-1,2),
    new Point3D(2,-1,2),
    new Point3D(2,1,2),
    new Point3D(-2,1,2),
    new Point3D(-2,-1,-2),
    new Point3D(2,-1,-2),
    new Point3D(2,1,-2),
    new Point3D(-2,1,-2)
];
// scene faces (6 faces)
var faces  = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]];
function Point3D(x,y,z) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.rotateX = function(angle) {
        var rad, cosa, sina, y, z
        rad = angle * Math.PI / 180
        cosa = Math.cos(rad)
        sina = Math.sin(rad)
        y = this.y * cosa - this.z * sina
        z = this.y * sina + this.z * cosa
        return new Point3D(this.x, y, z)
    }
    this.rotateY = function(angle) {
        var rad, cosa, sina, x, z
        rad = angle * Math.PI / 180
        cosa = Math.cos(rad)
        sina = Math.sin(rad)
        z = this.z * cosa - this.x * sina
        x = this.z * sina + this.x * cosa
        return new Point3D(x,this.y, z)
    }
    this.rotateZ = function(angle) {
        var rad, cosa, sina, x, y
        rad = angle * Math.PI / 180
        cosa = Math.cos(rad)
        sina = Math.sin(rad)
        x = this.x * cosa - this.y * sina
        y = this.x * sina + this.y * cosa
        return new Point3D(x, y, this.z)
    }
    this.projection = function(viewWidth, viewHeight, fov, viewDistance) {
        var factor, x, y
        factor = fov / (viewDistance + this.z)
        x = this.x * factor + viewWidth / 2
        y = this.y * factor + viewHeight / 2
        return new Point3D(x, y, this.z)
    }
}
// array of photos
var aImgs = [
    'images/pic1.jpg',
    'images/pic2.jpg',
    'images/pic3.jpg',
    'images/pic4.jpg'
];
for (var i = 0; i < aImgs.length; i++) {
    var oImg = new Image();
    oImg.src = aImgs[i];
    aImages.push(oImg);
    oImg.onload = function () {
        textureWidth = oImg.width;
        textureHeight = oImg.height;
    }
}
window.onload = function(){
    // creating canvas objects
    canvas = document.getElementById('slideshow');
    ctx = canvas.getContext('2d');
    // prepare points
    for (var i = 0; i <= lev; i++) {
        for (var j = 0; j <= lev; j++) {
            var tx = (i * (textureWidth / lev));
            var ty = (j * (textureHeight / lev));
            points.push({
                tx: tx,
                ty: ty,
                nx: tx / textureWidth,
                ny: ty / textureHeight,
                ox: i,
                oy: j
            });
        }
    }
    // prepare triangles ----
    var levT = lev + 1;
    for (var i = 0; i < lev; i++) {
        for (var j = 0; j < lev; j++) {
            triangles.push({
                p0: points[j + i * levT],
                p1: points[j + i * levT + 1],
                p2: points[j + (i + 1) * levT],
                up: true
            });
            triangles.push({
                p0: points[j + (i + 1) * levT + 1],
                p1: points[j + (i + 1) * levT],
                p2: points[j + i * levT + 1],
                up: false
            });
        }
    }
    drawScene();
};
function drawScene() {
    // clear context
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    // rotate scene
    var t = new Array();
    for (var iv = 0; iv < vertices.length; iv++) {
        var v = vertices[iv];
        var r = v.rotateY(angle);
        //var r = v.rotateX(angle).rotateY(angle);
        var prj = r.projection(ctx.canvas.width, ctx.canvas.height, 1000, 3);
        t.push(prj)
    }
    var avg_z = new Array();
    for (var i = 0; i < faces.length; i++) {
        var f = faces[i];
        avg_z[i] = {"ind":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z) / 4.0};
    }
    // get around through all faces
    for (var i = 0; i < faces.length; i++) {
        var f = faces[avg_z[i].ind];
        if (t[f[3]].z+t[f[2]].z+t[f[1]].z+t[f[0]].z > -3) {
            ctx.save();
            // draw surfaces
            ctx.fillStyle = "rgb(160,180,160)";
            ctx.beginPath();
            ctx.moveTo(t[f[0]].x,t[f[0]].y);
            ctx.lineTo(t[f[1]].x,t[f[1]].y);
            ctx.lineTo(t[f[2]].x,t[f[2]].y);
            ctx.lineTo(t[f[3]].x,t[f[3]].y);
            ctx.closePath();
            ctx.fill();
            // draw stretched images
            if (i < 4) {
                var ip = points.length;
                while (--ip > -1) {
                    var p = points[ip];
                    var mx = t[f[0]].x + p.ny * (t[f[3]].x - t[f[0]].x);
                    var my = t[f[0]].y + p.ny * (t[f[3]].y - t[f[0]].y);
                    p.px = (mx + p.nx * (t[f[1]].x + p.ny * (t[f[2]].x - t[f[1]].x) - mx)) + p.ox;
                    p.py = (my + p.nx * (t[f[1]].y + p.ny * (t[f[2]].y - t[f[1]].y) - my)) + p.oy;
                }
                var n = triangles.length;
                while (--n > -1) {
                    var tri = triangles[n];
                    var p0 = tri.p0;
                    var p1 = tri.p1;
                    var p2 = tri.p2;
                    var xc = (p0.px + p1.px + p2.px) / 3;
                    var yc = (p0.py + p1.py + p2.py) / 3;
                    ctx.save();
                    ctx.beginPath();
                    ctx.moveTo((1.05 * p0.px - xc * 0.05), (1.05 * p0.py - yc * 0.05));
                    ctx.lineTo((1.05 * p1.px - xc * 0.05), (1.05 * p1.py - yc * 0.05));
                    ctx.lineTo((1.05 * p2.px - xc * 0.05), (1.05 * p2.py - yc * 0.05));
                    ctx.closePath();
                    ctx.clip();
                    // transformation
                    var d = p0.tx * (p2.ty - p1.ty) - p1.tx * p2.ty + p2.tx * p1.ty + (p1.tx - p2.tx) * p0.ty;
                    ctx.transform(
                        -(p0.ty * (p2.px - p1.px) -  p1.ty * p2.px  + p2.ty *  p1.px + (p1.ty - p2.ty) * p0.px) / d, // m11
                         (p1.ty *  p2.py + p0.ty  * (p1.py - p2.py) - p2.ty *  p1.py + (p2.ty - p1.ty) * p0.py) / d, // m12
                         (p0.tx * (p2.px - p1.px) -  p1.tx * p2.px  + p2.tx *  p1.px + (p1.tx - p2.tx) * p0.px) / d, // m21
                        -(p1.tx *  p2.py + p0.tx  * (p1.py - p2.py) - p2.tx *  p1.py + (p2.tx - p1.tx) * p0.py) / d, // m22
                         (p0.tx * (p2.ty * p1.px  -  p1.ty * p2.px) + p0.ty * (p1.tx *  p2.px - p2.tx  * p1.px) + (p2.tx * p1.ty - p1.tx * p2.ty) * p0.px) / d, // dx
                         (p0.tx * (p2.ty * p1.py  -  p1.ty * p2.py) + p0.ty * (p1.tx *  p2.py - p2.tx  * p1.py) + (p2.tx * p1.ty - p1.tx * p2.ty) * p0.py) / d  // dy
                    );
                    ctx.drawImage(aImages[i], 0, 0);
                    ctx.restore();
                }
            }
        }
    }
    // shift angle and redraw scene
    angle += 0.3;
    setTimeout(drawScene, 40);
}


var canvas, ctx;
var aImages = [];
var points = [];
var triangles = [];
var textureWidth, textureHeight;
var lev = 3;
var angle = 0;
// scene vertices
var vertices = [
    new Point3D(-2,-1,2),
    new Point3D(2,-1,2),
    new Point3D(2,1,2),
    new Point3D(-2,1,2),
    new Point3D(-2,-1,-2),
    new Point3D(2,-1,-2),
    new Point3D(2,1,-2),
    new Point3D(-2,1,-2)
];
// scene faces (6 faces)
var faces  = [[0,1,2,3],[1,5,6,2],[5,4,7,6],[4,0,3,7],[0,4,5,1],[3,2,6,7]];
function Point3D(x,y,z) {
    this.x = x;
    this.y = y;
    this.z = z;
    this.rotateX = function(angle) {
        var rad, cosa, sina, y, z
        rad = angle * Math.PI / 180
        cosa = Math.cos(rad)
        sina = Math.sin(rad)
        y = this.y * cosa - this.z * sina
        z = this.y * sina + this.z * cosa
        return new Point3D(this.x, y, z)
    }
    this.rotateY = function(angle) {
        var rad, cosa, sina, x, z
        rad = angle * Math.PI / 180
        cosa = Math.cos(rad)
        sina = Math.sin(rad)
        z = this.z * cosa - this.x * sina
        x = this.z * sina + this.x * cosa
        return new Point3D(x,this.y, z)
    }
    this.rotateZ = function(angle) {
        var rad, cosa, sina, x, y
        rad = angle * Math.PI / 180
        cosa = Math.cos(rad)
        sina = Math.sin(rad)
        x = this.x * cosa - this.y * sina
        y = this.x * sina + this.y * cosa
        return new Point3D(x, y, this.z)
    }
    this.projection = function(viewWidth, viewHeight, fov, viewDistance) {
        var factor, x, y
        factor = fov / (viewDistance + this.z)
        x = this.x * factor + viewWidth / 2
        y = this.y * factor + viewHeight / 2
        return new Point3D(x, y, this.z)
    }
}
// array of photos
var aImgs = [
    'images/pic1.jpg',
    'images/pic2.jpg',
    'images/pic3.jpg',
    'images/pic4.jpg'
];
for (var i = 0; i < aImgs.length; i++) {
    var oImg = new Image();
    oImg.src = aImgs[i];
    aImages.push(oImg);
    oImg.onload = function () {
        textureWidth = oImg.width;
        textureHeight = oImg.height;
    }
}
window.onload = function(){
    // creating canvas objects
    canvas = document.getElementById('slideshow');
    ctx = canvas.getContext('2d');
    // prepare points
    for (var i = 0; i <= lev; i++) {
        for (var j = 0; j <= lev; j++) {
            var tx = (i * (textureWidth / lev));
            var ty = (j * (textureHeight / lev));
            points.push({
                tx: tx,
                ty: ty,
                nx: tx / textureWidth,
                ny: ty / textureHeight,
                ox: i,
                oy: j
            });
        }
    }
    // prepare triangles ----
    var levT = lev + 1;
    for (var i = 0; i < lev; i++) {
        for (var j = 0; j < lev; j++) {
            triangles.push({
                p0: points[j + i * levT],
                p1: points[j + i * levT + 1],
                p2: points[j + (i + 1) * levT],
                up: true
            });
            triangles.push({
                p0: points[j + (i + 1) * levT + 1],
                p1: points[j + (i + 1) * levT],
                p2: points[j + i * levT + 1],
                up: false
            });
        }
    }
    drawScene();
};
function drawScene() {
    // clear context
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    // rotate scene
    var t = new Array();
    for (var iv = 0; iv < vertices.length; iv++) {
        var v = vertices[iv];
        var r = v.rotateY(angle);
        //var r = v.rotateX(angle).rotateY(angle);
        var prj = r.projection(ctx.canvas.width, ctx.canvas.height, 1000, 3);
        t.push(prj)
    }
    var avg_z = new Array();
    for (var i = 0; i < faces.length; i++) {
        var f = faces[i];
        avg_z[i] = {"ind":i, "z":(t[f[0]].z + t[f[1]].z + t[f[2]].z + t[f[3]].z) / 4.0};
    }
    // get around through all faces
    for (var i = 0; i < faces.length; i++) {
        var f = faces[avg_z[i].ind];
        if (t[f[3]].z+t[f[2]].z+t[f[1]].z+t[f[0]].z > -3) {
            ctx.save();
            // draw surfaces
            ctx.fillStyle = "rgb(160,180,160)";
            ctx.beginPath();
            ctx.moveTo(t[f[0]].x,t[f[0]].y);
            ctx.lineTo(t[f[1]].x,t[f[1]].y);
            ctx.lineTo(t[f[2]].x,t[f[2]].y);
            ctx.lineTo(t[f[3]].x,t[f[3]].y);
            ctx.closePath();
            ctx.fill();
            // draw stretched images
            if (i < 4) {
                var ip = points.length;
                while (--ip > -1) {
                    var p = points[ip];
                    var mx = t[f[0]].x + p.ny * (t[f[3]].x - t[f[0]].x);
                    var my = t[f[0]].y + p.ny * (t[f[3]].y - t[f[0]].y);
                    p.px = (mx + p.nx * (t[f[1]].x + p.ny * (t[f[2]].x - t[f[1]].x) - mx)) + p.ox;
                    p.py = (my + p.nx * (t[f[1]].y + p.ny * (t[f[2]].y - t[f[1]].y) - my)) + p.oy;
                }
                var n = triangles.length;
                while (--n > -1) {
                    var tri = triangles[n];
                    var p0 = tri.p0;
                    var p1 = tri.p1;
                    var p2 = tri.p2;
                    var xc = (p0.px + p1.px + p2.px) / 3;
                    var yc = (p0.py + p1.py + p2.py) / 3;
                    ctx.save();
                    ctx.beginPath();
                    ctx.moveTo((1.05 * p0.px - xc * 0.05), (1.05 * p0.py - yc * 0.05));
                    ctx.lineTo((1.05 * p1.px - xc * 0.05), (1.05 * p1.py - yc * 0.05));
                    ctx.lineTo((1.05 * p2.px - xc * 0.05), (1.05 * p2.py - yc * 0.05));
                    ctx.closePath();
                    ctx.clip();
                    // transformation
                    var d = p0.tx * (p2.ty - p1.ty) - p1.tx * p2.ty + p2.tx * p1.ty + (p1.tx - p2.tx) * p0.ty;
                    ctx.transform(
                        -(p0.ty * (p2.px - p1.px) -  p1.ty * p2.px  + p2.ty *  p1.px + (p1.ty - p2.ty) * p0.px) / d, // m11
                         (p1.ty *  p2.py + p0.ty  * (p1.py - p2.py) - p2.ty *  p1.py + (p2.ty - p1.ty) * p0.py) / d, // m12
                         (p0.tx * (p2.px - p1.px) -  p1.tx * p2.px  + p2.tx *  p1.px + (p1.tx - p2.tx) * p0.px) / d, // m21
                        -(p1.tx *  p2.py + p0.tx  * (p1.py - p2.py) - p2.tx *  p1.py + (p2.tx - p1.tx) * p0.py) / d, // m22
                         (p0.tx * (p2.ty * p1.px  -  p1.ty * p2.px) + p0.ty * (p1.tx *  p2.px - p2.tx  * p1.px) + (p2.tx * p1.ty - p1.tx * p2.ty) * p0.px) / d, // dx
                         (p0.tx * (p2.ty * p1.py  -  p1.ty * p2.py) + p0.ty * (p1.tx *  p2.py - p2.tx  * p1.py) + (p2.tx * p1.ty - p1.tx * p2.ty) * p0.py) / d  // dy
                    );
                    ctx.drawImage(aImages[i], 0, 0);
                    ctx.restore();
                }
            }
        }
    }
    // shift angle and redraw scene
    angle += 0.3;
    setTimeout(drawScene, 40);
}

At the first, I have defined all vertices and faces (walls) of our virtual cube. Then I have defined rules of rotating. After – the most difficult thing – transformation of images with using ‘clip’ and ‘transform’.

首先，我定义了虚拟立方体的所有顶点和面(墙)。 然后，我定义了旋转规则。 之后(最困难的事情)是使用“剪辑”和“变换”对图像进行变换。

现场演示
打包下载

结论 (Conclusion)

I hope that today’s 3D html5 cube lesson has been interesting for you. We have done another one nice html5 example. I will be glad to see your thanks and comments. Good luck!

我希望今天的3D html5多维数据集课程对您来说很有趣。 我们还做了另一个很好的html5示例。 看到您的感谢和评论，我将非常高兴。 祝好运！

翻译自: https://www.script-tutorials.com/html5-3d-cube-slideshow/

html5 3d立方体

cukengwei3786
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html怎么做成3d正方体,使用css3创建动态3d立方体(html5实践)
weixin_30280267的博客
05-30 892
在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。下面我们开始介绍如何制作。复制代码 代码如下:One faceUp, down, left, rightLorem ipsum.New forms of navigation are fun.Rotating 3D cubeMore content上面的html...
html5 3D幻灯片播放特效
11-24
html5 3D幻灯片播放特效
html5 3d宽屏幻灯片代码
红色伪妆
04-16 242
[url=http://www.huiyi8.com/jiaoben/tag-html5/]html5[/url] 3d宽屏幻灯片代码,html5,js,3d效果,图片切换,html5 3d宽屏幻灯片代码是一款原生js+html5实现的3d幻灯片宽屏图片切换效果代码. [img]http://dl2.iteye.com/upload/attachment/0096/1523/612ce119...
html5 3D旋转立方体
07-19
使用html5+css3+jquery组合，一个可以通过按键控制立方体旋转的demo，具有3D效果。
HTML5的3D翻转轮播幻灯片特效代码
10-22
一款HTML5 3D幻灯片轮播特效代码推荐，过渡效果有极酷的3D特效，带有缩略图预览和加载进度条提示。
3d立方体背景的幻灯片流程图下载PPT模板
03-20
关键词：3d，立体，立方体，PPT流程图，并列关系幻灯片图表，PowerPoint图表素材，.PPTX格式； 淡雅蓝色与灰色搭配的PowerPoint流程图模板；关键词：3d，立体，立方体，PPT流程图，并列关系幻灯片图表，PowerPoi
3d立方体背景的幻灯片流程图下载.rar
07-16
标题中的“3d立方体背景的幻灯片流程图下载.rar”揭示了这个压缩包包含的资源是一款3D立方体风格的PowerPoint流程图模板。3D立方体设计为流程图提供了一种新颖且视觉吸引人的表现形式，使得信息展示更加立体、直观，...
基于flux.js的5种jQuery超酷3d幻灯片效果
03-18
flux.js是一款能做出3D效果的jQuery幻灯片插件。这款jQuery幻灯片插件共有5种效果：爆炸效果、3D翻转效果、3D旋转效果、立方体效果和翻页效果。需要注意的是flux需要浏览器支持CSS3 transitions才能正常工作。
纯CSS3炫酷全屏3D立方体旋转展示幻灯片特效
12-13
这是一款效果非常酷的纯CSS3全屏3D立方体旋转展示幻灯片特效。该幻灯片使用全屏的3D立方体作为slide的载体，通过上下导航按钮，可以垂直旋转立方体，将立方体各个面上的幻灯片图片展示出来，效果非常炫酷。
3d立方体PowerPoint图表PPT模板
03-20
关键词：3d立体幻灯片图表，立方体，魔方幻灯片背景图片，强调关系，并列关系，组合关系PPT关系图，.PPTX格式； 精美的3d立方体PowerPoint图表模板免费下载；关键词：3d立体幻灯片图表，立方体，魔方幻灯片背景
HTML5+CSS3实现3d立方体源码
05-06
HTML5_CSS3实现3d立方体HTML5_CSS3实现3d立方体HTML5_CSS3实现3d立方体HTML5_CSS3实现3d立方体HTML5_CSS3实现3d立方体
html5正方体旋转
09-11
html5正方体旋转
html做3d的正方形,HTML 3d动画立方体的实现
weixin_34030345的博客
05-30 663
Title.outer{transform-style: preserve-3d;width: 300px;height: 300px;position: absolute;left: 600px;top: 300px;transform: rotateX(45deg) rotateY(45deg) ;transition: all 20s;}.outer1{position: absolute;...
HTML 3d动画立方体的实现
Lanou_XuWeiJie的博客
09-05 868
Title .outer{ transform-style: preserve-3d; width: 300px; height: 300px; position: absolute; left: 600px; top: 300p
html5和css3实现3D立方体效果
weixin_44388435的博客
02-27 2531
1. rotateX() 方法 通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。 2. rotateY() 旋转 通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。 3. rotateZ() 旋转 通过 rotateZ() 方法，元素围绕其 Z 轴以给定的度数进行旋转。 transform 向元素应用 2D 或 3D 转换。 transform-or...
用HTML5+CSS实现3d动画立方体
qq_60205334的博客
05-05 3071
本文章描述如何用HTML5与CSS做出一个3d动画的立方体。 一，主要思路： 1.制作一个立方体，需要六个面，令： Z轴前后两个面分别为 1号 6号 X轴左右两个面分别为 2号 5号 Y轴上下两个面分别为 3号 4号 这里是给div添加样式来分别来作为1-6号“面”。 注： 1. 平移与旋转主要是找准中心点：一开始使六个面都重叠在一起，即放在同一位置的不同层级，从里到外依次是1-6号面，最开始是以最外面的6号正方形的中心为中心点来平移和旋转的。 2. ...
纯HTML + css实现一个3D旋转的立方体
最新发布
tangpinger的博客
05-22 540
3D自动旋转，阴影效果
html5制作一个立方体,CSS3 3D transforms系列教程-立方体
weixin_39712705的博客
06-10 600
学习制作3D翻转卡片是开始学习3D transform的一个好方法。一旦你掌握了3D翻转卡片的制作方法，是不是迫不及待的想制作更复杂的3D物体？我们在这个教程中将开始学习制作3D立方体。3D立方体的HTML结构和3D卡片的HTML结构一样简单，它需要6个元素来制作立方体的6个面：123456给立方体的六个面设置基本的定位方式和尺寸：.container {width: 200px;height: ...
java3d立方体_3d立方体贴图
05-18
要绘制一个 3D 立方体并进行贴图，可以按照以下步骤进行： 1. 导入必要的 Java3D 类库。 ```java import javax.media.j3d.*; import javax.vecmath.*; import com.sun.j3d.utils.geometry.*; import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值