three实现拖动三维铅笔签名绘画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：three实现拖动三维铅笔签名绘画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html, body {
	margin: 0;
	padding: 0;
	cursor: none;
}

#bg {
	position: absolute;
	width: 100%;
	height: 100%;
  left: 0;
  top: 0;
	background-color: #6eccdf;
}

#intro {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-image:   url('//repo.bfw.wiki/bfwrepo/images/pencil/pencil-intro.jpg');
	background-repeat: no-repeat;
	background-position: center;
}

#wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

canvas {
	position: absolute;
	top: 0;
	left: 0;
}

#pencil3D {
	pointer-events: none;
}

#sketchpad {
	position: absolute;
	left: 50px;
	top: 50px;
	background-color: #fafafa;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0px 3px 12px -2px rgba(0,0,0,0.75);
	-moz-box-shadow: 0px 3px 12px -2px rgba(0,0,0,0.75);
	box-shadow: 0px 3px 12px -2px rgba(0,0,0,0.75);
}
</style>



</head>

<body  >
  <div id="wrapper">
	<div id="bg"></div>
<div id="intro"></div>
	<div id="sketchpad"></div>
	<canvas id="sketch"></canvas>
	<div id="shadow"></div>
	<canvas id="pencil3D"></canvas>
</div>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.84.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/MTLLoader.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OBJLoader.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/paper-core.min.js"></script>
      <script >
// Set up the sketchpad.  This uses paper.js to render the pencil markings.
// The pencil itself is rendered as a 3D object using THREE.js, but we'll get to that later.
// There are 2 canvases in use, one for the pencil and one for the actual sketch.

(function (window) {

  function Sketch() {
    this.group = new paper.Group();
    this.isDrawing = false;

    // paper.js allows us to use the mouse easily to create vector lines.
    // more here http://paperjs.org/tutorials/interaction/creating-mouse-tools/
    this.mouseTool = new paper.Tool();
    this.mouseTool.minDistance = 5;
    this.mouseTool.maxDistance = 30;
    this.mouseTool.on('mousedown', this.onMouseDown.bind(this));
    this.mouseTool.on('mousedrag', this.onMouseDrag.bind(this));
    this.mouseTool.on('mouseup', this.onMouseUp.bind(this));
  }

  Sketch.prototype.onMouseDown = function (e) {
    this.isDrawing = true;
    this.currPath = new paper.Path();

    this.currPath.fillColor = '#424242';

    this.currPath.add(e.point);
  };

  Sketch.prototype.onMouseDrag = function (e) {
    if (!this.isDrawing) return;

    if (!e.point.isInside(this.sketchingBounds)) {
      this.onMouseUp(e);
      return;
    }

    var step = e.delta.divide(2);
    step.angle += 10;

    var top = e.middlePoint.add(step);
    var bottom = e.middlePoint.subtract(step);

    this.currPath.add(top);
    this.currPath.insert(0, bottom);
    this.currPath.smooth(10);
  };

  Sketch.prototype.onMouseUp = function (e) {
    if (!this.isDrawing) return;

    this.isDrawing = false;

    if (e.point.isInside(this.sketchingBounds)) {
      this.currPath.add(e.point);
      this.currPath.closed = true;
    }

    this.group.addChild(this.currPath);
  };

  Sketch.prototype.setSketchingBounds = function (x, y, width, height) {
    this.sketchingBounds = new paper.Rectangle(x, y, width, height);
  };

  window.Sketch = Sketch;

})(window);



/* Set up the Pencil */

var pencil = function () {
  var pencil,
  isDrawing,
  rangeX = 0,
  rangeY = 0,
  scale = 1.5,
  canvasW,
  canvasH,
  moveRotationRange = { x: 100, y: 30 };

  function init(_canvasW, _canvasH, onReady) {
    canvasW = _canvasW;
    canvasH = _canvasH;
    isDrawing = false;
    pencil = new THREE.Object3D();

    // Load the 3D model and its materials
    var mtlLoader = new THREE.MTLLoader();
    mtlLoader.load('//repo.bfw.wiki/bfwrepo/threemodel/PENCIL.mtl', function (materials) {
      materials.preload();

      var objLoader = new THREE.OBJLoader();
      objLoader.setMaterials(materials);
      objLoader.load('//repo.bfw.wiki/bfwrepo/threemodel/PENCIL.obj', function (object) {
        var scale = 1.5;
        object.rotation.x = toRad(90);
        object.scale.set(scale, scale, scale);
        pencil.add(object);
        scene.add(pencil);
      });

      stopDrawing();
      onReady();
    });
  }

  function startDrawing() {
    isDrawing = true;
    TweenLite.to(pencil.position, 0.2, { z: 0, ease: Expo.easeOut });
  }

  function stopDrawing() {
    isDrawing = false;
    TweenLite.to(pencil.position, 0.2, { z: 2, ease: Quad.easeInOut });
  }

  function move(x, y) {
    rangeX = x / wW - 0.5;
    rangeY = y / wH - 0.5;

    // Convert the current mouse position to a point in 3D space.  This involves 'unprojecting' the
    // 2D values into 3D space.  More info here: 
    // https://barkofthebyte.azurewebsites.net/post/2014/05/05/three-js-projecting-mouse-clicks-to-a-3d-scene-how-to-do-it-and-how-it-works
    var mouse3D = new THREE.Vector3(x / wW * 2 - 1, -(y / wH) * 2 + 1, 0.5);
    mouse3D.unproject(camera);
    var dir = mouse3D.sub(camera.position).normalize();
    dir.x *= wW / canvasW;
    dir.y *= wH / canvasH;
    var distance = -camera.position.z / dir.z;
    var pos = camera.position.clone().add(dir.multiplyScalar(distance));

    pencil.position.x = pos.x;
    pencil.position.y = pos.y;
    TweenLite.to(pencil.rotation, 0.2, { y: rangeX * toRad(moveRotationRange.x), x: rangeY * toRad(moveRotationRange.y), z: toRad(rangeY * 200) });
  }

  // Utility function for converting degrees to radians
  function toRad.........完整代码请登录后点击上方下载按钮下载查看