使用多图片拍摄实现的3D虚拟试衣应用

本例使用水平面180°拍摄的20几张图片使用简单的Canvas动画衔接在一起的3D虚拟试衣，是一款伪3D非真实建模的试衣方案。可用于一些简单的需要3D浏览而不支持WebGL的场景。

3d, cloth

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2596
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// mouse event
    canvas.addEventListener("mousedown", doMouseDown, false);
    canvas.addEventListener('mousemove', doMouseMove, false);
    canvas.addEventListener('mouseup',   doMouseUp, false);
    // loaded();

// frame = 1
    frame = 1;
    images[frame].onload = function() {
        redraw();
        bar.style.display = 'none';
    }
}
function doMouseDown(event) {
    var x = event.pageX;
    var y = event.pageY;
    var canvas = event.target;
    var loc = getPointOnCanvas(canvas, x, y);
    console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");
    startedX = loc.x;
    started = true;
}

if(frame >= 24)
            {
                frame = 1;
            }
            if(frame <= 0)
            {
                frame = 23;
            }
            redraw();
        }
    }
}

function doMouseUp(event) {
    console.log("mouse up now");
    if (started) {
        doMouseMove(event);
        startedX = -1;
        started = false;
    }
}

function getPointOnCanvas(canvas, x, y) {
    var bbox = canvas.getBoundingClientRect();
    return { x: x - bbox.left * (canvas.width  / bbox.width),
            y: y - bbox.top  * (canvas.height / bbox.height)
            };
}

编译

CSS

HTML

本例使用水平面180°拍摄的20几张图片使用简单的Canvas动画衔接在一起的3D虚拟试衣，是一款伪3D非真实建模的试衣方案。可用于一些简单的需要3D浏览而不支持WebGL的场景。

3d, cloth

编辑器支持Emmet

快捷键

本例使用水平面180°拍摄的20几张图片使用简单的Canvas动画衔接在一起的3D虚拟试衣，是一款伪3D非真实建模的试衣方案。 可用于一些简单的需要3D浏览而不支持WebGL的场景。

3d, cloth

使用SVG图片实现的3D悬挂标语（标牌）

使用CSS3实现的3D热点监控

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

本例使用水平面180°拍摄的20几张图片使用简单的Canvas动画衔接在一起的3D虚拟试衣，是一款伪3D非真实建模的试衣方案。可用于一些简单的需要3D浏览而不支持WebGL的场景。