So I have loaded a 2D character into a 3D world & for some reason I get this line above my character’s head. Is there a way to fix this?
Here’s the screenshot :
Here’s the Spritesheet ( 64 x 32 | 8 tiles | indices : 0 - 7 ( for frames ) ) :
So inside SpriteMixer.js, I have changed it from SpriteMaterial to MeshBasicMaterial with a 3D plane in order to allow certain effects to happen to the sprite that you normally wouldn’t be able to do, and the code remains pretty much the same except where I changed it to a 3D plane & MeshBasicMaterial. It also still caused the line with SpriteMaterial as well.
Everything else works great.
Here’s the link to demo :
http://babylontesting.epizy.com/Three.js/link-controller/
view-source:http://babylontesting.epizy.com/Three.js/link-controller/js/game.js
view-source:http://babylontesting.epizy.com/Three.js/link-controller/js/libs/SpriteMixer.js
The following line{s} are inside of game.js
Line{s} 2 - 43 :
this.__CreateEntity = function ( __objData )
{
// Access the Data Object{s}
this.__objData = __objData;
// ACTIONSPRITE & ACTIONS INITIALIZATION
// An ActionSprite is initialized with these arguments ::
// - which THREE.Texture to use
// - the number of columns in your animation
// - the number of rows in your animation
// Create & Setup Link's Walk Texture{s}
this.__link_walkTexture = this.__objData.__loader.load ( "assets/textures/link-walk.png" );
this.__link_walkTexture.magFilter = THREE.NearestFilter;
this.__link_walkTexture.minFilter = THREE.NearestFilter;
this.__link_walk = this.__spriteMixer.ActionSprite ( this.__objData.__scene, this.__link_walkTexture, 4, 2 );
this.__link_walkLeft = this.__spriteMixer.Action ( this.__link_walk, 4, 5, 200 );
this.__link_walkRight = this.__spriteMixer.Action ( this.__link_walk, 6, 7, 200 );
this.__link_walk.setFrame ( 6 );
this.__link_walk.position.set ( 0.0, 0.1, 0.0 );
this.__link_walk.scale.set ( 1, 1, 0.01 );
this.__link_walk.visible = true;
// Create Link's "Entity"
this.__link = new THREE.Group ( );
this.__link.scale.set ( 1, 1, 0.001 );
this.__link.add ( this.__link_walk );
this.__objData.__scene.add ( this.__link );
// Return Link's "Entity"
return this.__link;
}
Line{s} 149 - 160 :
this.__loader = new THREE.TextureLoader ( );
this.__scene = new THREE.Scene ( );
this.__camera = new THREE.PerspectiveCamera
(
65.0, ( window.innerWidth / window.innerHeight ), 1.0,
10000.0
);
this.__camera.position.z = 1.0;
this.__controls = new THREE.OrbitControls ( this.__camera );
this.__spriteMixer = SpriteMixer ( );
// Create Link
this.__link = this.__CreateEntity
(
{
__loader : this.__loader, __scene : this.__scene,
}
);
The following line{s} are inside of SpriteMixer.js
Line{s} 213 - 246 :
function ActionSprite( scene, texture, tilesHoriz, tilesVert ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 1/tilesHoriz, 1/tilesVert );
spriteGeometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
spriteMaterial = new THREE.MeshBasicMaterial({
map:texture, color: 0xffffff, side: THREE.DoubleSide, alphaTest : 0.5, });
var actionSprite = new THREE.Mesh ( spriteGeometry, spriteMaterial );
scene.add( actionSprite );
actionSprite.isIndexedSprite = true ;
actionSprite.tilesHoriz = tilesHoriz;
actionSprite.tilesVert = tilesVert;
actionSprite.tiles = (tilesHoriz * tilesVert);
actionSprite.currentDisplayTime = 0;
actionSprite.currentTile = 0;
actionSprite.paused = true;
actionSprite.currentAction;
actionSprite.setFrame = setFrame;
actionSprite.getRow = getRow;
actionSprite.getColumn = getColumn;
offsetTexture( actionSprite );
actionSprites.push( actionSprite );
return actionSprite;
};