Skip to content

Commit 5200ef6

Browse files
mrdoobmrdoob
authored
Merge pull request #15985 from Mugen87/dev27
 Mesh: Added support for morph targets with BufferGeometry in raycast().
2 parents 129a874 + 8b4970c commit 5200ef6

File tree

2 files changed

+69
-42
lines changed

2 files changed

+69
-42
lines changed

‎examples/webgl_morphtargets.html‎

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -51,9 +51,9 @@
5151

5252
var container;
5353

54-
var camera, scene, renderer;
54+
var camera, scene, renderer, raycaster;
5555

56-
var mesh;
56+
var mesh, mouse = new THREE.Vector2();
5757

5858
init();
5959
animate();
@@ -69,15 +69,16 @@
6969
scene.background = new THREE.Color( 0x222222 );
7070
scene.fog = new THREE.Fog( 0x000000, 1, 15000 );
7171

72-
var light = new THREE.PointLight( 0xff2200 );
72+
var light = new THREE.PointLight( 0xffffff );
73+
light.position.z = 500;
7374
camera.add( light );
7475
scene.add( camera );
7576

7677
var light = new THREE.AmbientLight( 0x111111 );
7778
scene.add( light );
7879

7980
var geometry = new THREE.BoxGeometry( 100, 100, 100 );
80-
var material = new THREE.MeshLambertMaterial( { color: 0xffffff, morphTargets: true } );
81+
var material = new THREE.MeshLambertMaterial( { color: 0xff0000, morphTargets: true } );
8182

8283
// construct 8 blend shapes
8384

@@ -169,6 +170,8 @@
169170

170171
//
171172

173+
raycaster = new THREE.Raycaster();
174+
172175
renderer = new THREE.WebGLRenderer();
173176
renderer.setPixelRatio( window.devicePixelRatio );
174177
renderer.setSize( window.innerWidth, window.innerHeight );
@@ -184,6 +187,27 @@
184187

185188
window.addEventListener( 'resize', onWindowResize, false );
186189

190+
document.addEventListener( 'click', onClick, false );
191+
192+
}
193+
194+
function onClick( event ) {
195+
196+
event.preventDefault();
197+
198+
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
199+
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
200+
201+
raycaster.setFromCamera( mouse, camera );
202+
203+
var intersects = raycaster.intersectObject( mesh );
204+
205+
if ( intersects.length > 0 ) {
206+
207+
mesh.material.color.set( Math.random() * 0xffffff );
208+
209+
}
210+
187211
}
188212

189213
function onWindowResize() {

‎src/objects/Mesh.js‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,10 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
126126
var tempB = new Vector3();
127127
var tempC = new Vector3();
128128

129+
var morphA = new Vector3();
130+
var morphB = new Vector3();
131+
var morphC = new Vector3();
132+
129133
var uvA = new Vector2();
130134
var uvB = new Vector2();
131135
var uvC = new Vector2();
@@ -164,12 +168,43 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
164168

165169
}
166170

167-
function checkBufferGeometryIntersection( object, material, raycaster, ray, position, uv, a, b, c ) {
171+
function checkBufferGeometryIntersection( object, material, raycaster, ray, position, morphPosition, uv, a, b, c ) {
168172

169173
vA.fromBufferAttribute( position, a );
170174
vB.fromBufferAttribute( position, b );
171175
vC.fromBufferAttribute( position, c );
172176

177+
var morphInfluences = object.morphTargetInfluences;
178+
179+
if ( material.morphTargets && morphPosition && morphInfluences ) {
180+
181+
morphA.set( 0, 0, 0 );
182+
morphB.set( 0, 0, 0 );
183+
morphC.set( 0, 0, 0 );
184+
185+
for ( var i = 0, il = morphPosition.length; i < il; i ++ ) {
186+
187+
var influence = morphInfluences[ i ];
188+
var morphAttribute = morphPosition[ i ];
189+
190+
if ( influence === 0 ) continue;
191+
192+
tempA.fromBufferAttribute( morphAttribute, a );
193+
tempB.fromBufferAttribute( morphAttribute, b );
194+
tempC.fromBufferAttribute( morphAttribute, c );
195+
196+
morphA.addScaledVector( tempA.sub( vA ), influence );
197+
morphB.addScaledVector( tempB.sub( vB ), influence );
198+
morphC.addScaledVector( tempC.sub( vC ), influence );
199+
200+
}
201+
202+
vA.add( morphA );
203+
vB.add( morphB );
204+
vC.add( morphC );
205+
206+
}
207+
173208
var intersection = checkIntersection( object, material, raycaster, ray, vA, vB, vC, intersectionPoint );
174209

175210
if ( intersection ) {
@@ -232,6 +267,7 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
232267
var a, b, c;
233268
var index = geometry.index;
234269
var position = geometry.attributes.position;
270+
var morphPosition = geometry.morphAttributes.position;
235271
var uv = geometry.attributes.uv;
236272
var groups = geometry.groups;
237273
var drawRange = geometry.drawRange;
@@ -259,7 +295,7 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
259295
b = index.getX( j + 1 );
260296
c = index.getX( j + 2 );
261297

262-
intersection = checkBufferGeometryIntersection( this, groupMaterial, raycaster, ray, position, uv, a, b, c );
298+
intersection = checkBufferGeometryIntersection( this, groupMaterial, raycaster, ray, position, morphPosition, uv, a, b, c );
263299

264300
if ( intersection ) {
265301

@@ -284,7 +320,7 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
284320
b = index.getX( i + 1 );
285321
c = index.getX( i + 2 );
286322

287-
intersection = checkBufferGeometryIntersection( this, material, raycaster, ray, position, uv, a, b, c );
323+
intersection = checkBufferGeometryIntersection( this, material, raycaster, ray, position, morphPosition, uv, a, b, c );
288324

289325
if ( intersection ) {
290326

@@ -317,7 +353,7 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
317353
b = j + 1;
318354
c = j + 2;
319355

320-
intersection = checkBufferGeometryIntersection( this, groupMaterial, raycaster, ray, position, uv, a, b, c );
356+
intersection = checkBufferGeometryIntersection( this, groupMaterial, raycaster, ray, position, morphPosition, uv, a, b, c );
321357

322358
if ( intersection ) {
323359

@@ -342,7 +378,7 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
342378
b = i + 1;
343379
c = i + 2;
344380

345-
intersection = checkBufferGeometryIntersection( this, material, raycaster, ray, position, uv, a, b, c );
381+
intersection = checkBufferGeometryIntersection( this, material, raycaster, ray, position, morphPosition, uv, a, b, c );
346382

347383
if ( intersection ) {
348384

@@ -380,39 +416,6 @@ Mesh.prototype = Object.assign( Object.create( Object3D.prototype ), {
380416
fvB = vertices[ face.b ];
381417
fvC = vertices[ face.c ];
382418

383-
if ( faceMaterial.morphTargets === true ) {
384-
385-
var morphTargets = geometry.morphTargets;
386-
var morphInfluences = this.morphTargetInfluences;
387-
388-
vA.set( 0, 0, 0 );
389-
vB.set( 0, 0, 0 );
390-
vC.set( 0, 0, 0 );
391-
392-
for ( var t = 0, tl = morphTargets.length; t < tl; t ++ ) {
393-
394-
var influence = morphInfluences[ t ];
395-
396-
if ( influence === 0 ) continue;
397-
398-
var targets = morphTargets[ t ].vertices;
399-
400-
vA.addScaledVector( tempA.subVectors( targets[ face.a ], fvA ), influence );
401-
vB.addScaledVector( tempB.subVectors( targets[ face.b ], fvB ), influence );
402-
vC.addScaledVector( tempC.subVectors( targets[ face.c ], fvC ), influence );
403-
404-
}
405-
406-
vA.add( fvA );
407-
vB.add( fvB );
408-
vC.add( fvC );
409-
410-
fvA = vA;
411-
fvB = vB;
412-
fvC = vC;
413-
414-
}
415-
416419
intersection = checkIntersection( this, faceMaterial, raycaster, ray, fvA, fvB, fvC, intersectionPoint );
417420

418421
if ( intersection ) {

0 commit comments

Comments
 (0)