20170406 MorphTarget Trackers

Attach a mesh to a Morphing Mesh

by steveow

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r75/three.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<div id="container"></div>
<div class="infoBox">
Vert Y: <span id="info"></span>
</div>

CSS

body {
  margin: 0;
}

.infoBox {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 10px;
  color: white;
  font-family: sans-serif;
}

JavaScript

//... SteveOw 20170406.
//... Based on jsfiddle by WestLangley...
//... in his answer here:- http://stackoverflow.com/questions/36461699/three-js-get-updated-vertices-with-morph-targets

//-------------------------------------------------------
//... Global Variables

var renderer, scene, camera;
var geometry, geometryMorph, mesh, material;

var elContainer = document.getElementById( 'container' );
var elInfo = document.getElementById( 'info' );

var redSphere, greenSphere, blueSphere, blueCyl;
var count=0;
var influence_changed = false;

//-------------------------------------------------------
// Basic Three JS setup
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
elContainer.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.z = 300;


//-------------------------------------------------------
// Create two different cubes for morphing

geometry = new THREE.BoxGeometry(100, 100, 100);
geometryMorph = new THREE.BoxGeometry(200, 400, 200);

//... Add extra vertices (8,9,10) e.g. for Bones
geometry.vertices.push(new THREE.Vector3(-50,0,0)); //... Green sphere position
geometry.vertices.push(new THREE.Vector3(-50,50,0));//... BlueCyl position
geometry.vertices.push(new THREE.Vector3(0, 0, 0));  //... BlueCyl rotation

geometryMorph.vertices.push(new THREE.Vector3(50,0,0)); //... Green sphere position
geometryMorph.vertices.push(new THREE.Vector3(50,50,0));//... BlueCyl position
geometryMorph.vertices.push(new THREE.Vector3(Math.PI ,0 ,0)); //... BlueCyl rotation


material = new THREE.MeshBasicMaterial( {color: 0xffffff, wireframe: true, morphTargets: true  } );

// Set morphtargets for cube
geometry.morphTargets[0] = {name: 't1', vertices: geometryMorph.vertices};
geometry.computeMorphNormals();

mesh = new THREE.Mesh( geometry, material...