HTML5/Three.js三维网格（Mesh）操作：推拉深度

3D Mesh Manipulation, Push & Pull Depth，通过鼠标点击来编辑图像，使2D图像变成凸凹不平的3D图像。可在此基础上制作简单的交互式在线3D模型编辑器。

webgl, mesh, editor

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

let opts = {

variance: {
        x: 3,
        y: 3,
        z: 10
    },
    planeSize: 30,

power: 0.5,
    brushSize: 30,
    subtract: false,
    speed: 2,
    rotate: false,
    image: '/uploads/161101/face-optim.png',

randomImage() {
        this.image = '//wow.techbrood.com/img?s=512_512';
        loadTexture(this.image);
    },

reset() {
        if (plane) {
            plane.geometry.vertices.forEach((point, i) => {
                point.z = 0
            });

}

easing: Elastic.easeOut //Linear.easeNone
};

/*////////////////////////////////////////*/

let gui = new dat.GUI();
gui.closed = window.innerWidth < 600;

let image = gui.add(opts, 'image', {
    Face: '/uploads/161101/face-optim.png',
    Bottle: '/uploads/160201/bottle.png',
    Beauty: '/uploads/151001/model riding horse.png'
});
image.onChange(loadTexture);
let random = gui.add(opts, 'randomImage');

/*////////////////////////////////////////*/

let sub = gui.add(opts, 'subtract').listen();
sub.onChange(drawBrush);
gui.add(opts, 'power', 0.1, 2).step(0.1);

/*////////////////////////////////////////*/

let brush = gui.add(opts, 'brushSize', 5, 200).step(1).listen();

var canvas = document.createElement('canvas'),
    ctx = canvas.getContext('2d');
canvas.className = 'brush';
document.body.appendChild(canvas);

function drawBrush() {
    let s = opts.brushSize;
    canvas.width = canvas.height = s;
    ctx.clearRect(0, 0, s, s);

ctx.font = s / 2 + "px monospace";
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.strokeStyle = ctx.fillStyle = opts.subtract ? '#FAA' : '#AFA';
    ctx.lineWidth = 1;

ctx.beginPath();
    ctx.arc(s / 2, s / 2, s / 2.1, 0, 2 * Math.PI);
    ctx.stroke();

ctx.fillText(opts.subtract ? '-' : '+', s / 2, s / 2);
}
brush.onChange(drawBrush);
drawBrush();

let mouseX = 0;
let mouseY = 0;
let frame;

function updateBrush() {
    canvas.style.transform = 'translate(' + (mouseX - opts.brushSize / 2) + 'px,' + (mouseY - opts.brushSize / 2) + 'px)';
    frame = false;
}

document.addEventListener('mousemove', (e) => {
    mouseX = e.pageX;
    mouseY = e.pageY;
    frame = frame || requestAnimationFrame(updateBrush);
});

gui.add(opts, 'rotate');

gui.add(opts, 'reset');

/*////////////////////////////////////////*/

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1200);
camera.position.z = 500;
camera.position.x = 100;
camera.rotation.y = -100;

let renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x000000, 1);
document.body.appendChild(renderer.domElement);

window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

/*////////////////////////////////////////*/

let orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.enableZoom = false;

/*////////////////////////////////////////*/

let lights = [];
lights[0] = new THREE.PointLight(0xffffff, 1, 0);
lights[1] = new THREE.PointLight(0xffffff, 1, 0);

lights[0].position.set(0, 200, 0);
lights[1].position.set(100, 200, 100);

scene.add.apply(scene, lights);

/*////////////////////////////////////////*/

let plane;
let geometry;
let defaultVertices;

function loadTexture(image) {

document.body.className = 'loading';
    let loader = new THREE.TextureLoader();
    loader.load(
        image, //https://unsplash.it/512/512?image=1053',
        function(texture) {

document.body.className = '';
            geometry = new THREE.PlaneGeometry(texture.image.width, texture.image.height, opts.planeSize, opts.planeSize);

let material = new THREE.MeshBasicMaterial({
                map: texture,
                side: THREE.DoubleSide
            });

if (plane) {
                scene.remove(plane);
            }

plane = new THREE.Mesh(geometry, material);
            scene.add(plane);
            defaultVertices = plane.geometry.clone().vertices;

render();

});
}

loadTexture('/uploads/161101/face-optim.png');

/*////////////////////////////////////////*/

let rotateCount = 0;

function render() {
    requestAnimationFrame(render);

if (plane) {

if (opts.rotate) {
            rotateCount += 0.008;
            plane.rotation.y = Math.sin(rotateCount) * Math.PI / 2;
        }

plane.geometry.verticesNeedUpdate = true;
        plane.geometry.normalsNeedUpdate = true;
        plane.geometry.computeFaceNormals();
    }

renderer.render(scene, camera);
};

/*////////////////////////////////////////*/

const PI2 = Math.PI * 2;
let raycaster = new THREE.Raycaster();
let mouse = new THREE.Vector2();
let particleMaterial = new THREE.SpriteCanvasMaterial({
    color: 0x000000,
    program: function(context) {
        context.beginPath();
        context.arc(0, 0, 0.5, 0, PI2, true);
        context.fill();
    }
});

function distance(first, second) {
    let dx = first.x - second.x;
    let dy = first.y - second.y;
    let dz = 0;
    if (first.z && second.z) {
        dz = first.z - second.z
    }
    return Math.sqrt(dx * dx + dy * dy + dz * dz)
}

/*////////////////////////////////////////*/

let mousedown = false;
let lastMouse = mouse.clone();

document.addEventListener('mousedown', (event) => {
    mousedown = mouseIntersects().length > 0;
    if (mousedown) {
        event.preventDefault();
        lastMouse.x = 0;
        lastMouse.y = 0;
        setMouse(event);
        adjustMesh();
    }
});

document.addEventListener('mouseup', mouseEnd);
document.addEventListener('mouseleave', mouseEnd);

function mouseEnd() {
    mousedown = false;
    orbit.enabled = true;
    lastMouse.x = 0;
    lastMouse.y = 0;
}

function setMouse(event) {
    mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
    mouse.y = -(event.clientY / renderer.domElement.clientHeight) * 2 + 1;
}

function mouseIntersects(target) {
    raycaster.setFromCamera(mouse, camera);
    return raycaster.intersectObjects(target || scene.children);
}

function adjustMesh(intersects) {
    intersects = intersects || mouseIntersects();

if (intersects.length > 0) {

orbit.enabled = false;

let INTERSECTED = intersects[0];
        let object = intersects[0].object;
        let mousePoint = intersects[0].point;

var geometry = INTERSECTED.object.geometry;
        var face = INTERSECTED.face;

var vertices = geometry.vertices;
        var v1 = vertices[face.a];
        var v2 = vertices[face.b];
        var v3 = vertices[face.c];

// calculate the centroid
        var position = new THREE.Vector3();
        position.x = (v1.x + v2.x + v3.x) / 3;
        position.y = (v1.y + v2.y + v3.y) / 3;
        position.z = (v1.z + v2.z + v3.z) / 3;

plane.geometry.vertices.forEach((point, i) => {
            let dist = distance(point, position);
            if (dist < opts.brushSize) {
                //console.log(dist);
                point.z += opts.power / ((dist + 1) / opts.brushSize) * (opts.subtract ? -1 : 1);
            }

});

}
}

document.addEventListener('mousemove', onDocumentMouseMove);

function onDocumentMouseMove(event) {

setMouse(event);
    let intersects = mouseIntersects(scene.children);

let dist = distance(mouse, lastMouse);
    if (!mousedown || dist < 0.03) {
        return;
    }

lastMouse = mouse.clone();
    adjustMesh(intersects);

event.preventDefault();

}

编译

CSS

HTML

3D Mesh Manipulation, Push & Pull Depth，通过鼠标点击来编辑图像，使2D图像变成凸凹不平的3D图像。可在此基础上制作简单的交互式在线3D模型编辑器。

webgl, mesh, editor

编辑器支持Emmet

快捷键

3D Mesh Manipulation, Push & Pull Depth，通过鼠标点击来编辑图像，使2D图像变成凸凹不平的3D图像。可在此基础上制作简单的交互式在线3D模型编辑器。

webgl, mesh, editor

HTML5 Three.js读取Kinect数据并在网页呈现（人体摇头晃脑动作的捕捉数据3D可视化）

HTML5/Three.js 3D版本的毛线球（棉球）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：