Mannequin

Mannequin for drawing

by A A

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { display: block; }
		</style>
	</head>
	<body>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script>
    <script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>
    <!-- <script src="https://threejs.org/examples/js/controls/DragControls.js"></script> -->
    <div id="test"></div>
	</body>
</html>

JavaScript

var scene, camera, renderer, pivot, raycaster;
var mouse = new THREE.Vector2(),
  INTERSECTED, objects = [];
var lastMPos_right_wrist = {},
  lastMPos_right_hand_bottom = {},
  clicked = false;
var right_wrist, right_wrist_pivot, right_hand_bottom_pivot;
var selected;
var plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
var intersectPoint = new THREE.Vector3();


//main
init();
animate();

//onDocumentMouseDown
function onDocumentMouseDown(event) {
  clicked = true;
  event.preventDefault();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);

  var scene_intersects = raycaster.intersectObjects(objects);
  if (scene_intersects[0] && scene_intersects[0].object && scene_intersects[0].object.userData && scene_intersects[0].object.userData.name) {
    selected = scene_intersects[0].object.userData.name;
    var clientX = event.clientX;
    var clientY = event.clientY;
    console.log("mouse down", clientX,clientY)
    console.log("mouse mouse", mouse)
  }
  /* 	  console.log("scene_intersects[0].object.userData.name", scene_intersects[0].object.userData.name);
  	  if (scene_intersects[0].object.userData.name == "right_wrist") {
  	    right_wrist_pivot.rotation.z += 0.01
  	  }
  	  console.log("down x,y", mouse.x, mouse.y);
  	   */
  /* if (scene_intersects[0]) {
    console.log("scene_intersects[0].object.userData.name", scene_intersects[0].object.userData.name);
    console.log("scene_intersects[0].userData", scene_intersects[0].userData);
    console.log("scene_intersects[0].material.color", scene_intersects[0].object.material.color);
    scene_intersects[0].object.material.color.setHex(0x000000);
  } */
}

function onDocumentMouseUp() {
  clicked = false;
}

function onDocumentMouseMove(event) {
  event.preventDefault();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 ...