THREE.JS更新64--SpriteMaterial--定义有变。

Question

我目前有一个在Three.js V60上运行的应用程序，我想把它移植到V64上，但我发现其中一个功能有问题，就是鼠标工具提示。 我想把它移植到V64上，但是我对其中一个功能有问题，那就是鼠标工具提示。下面是一个例子 http:/stemkoski.github.ioThree.jsMouse-Tooltip.html。.

在V64中，我们没有useScreenCoordinates、sizeAttenuation和aligning属性，所以当我删除这些参数时，我的工具提示出现了奇怪的行为。我的行为是mousetooltip被固定在场景上。谁能帮帮我？

下面是我做的一个测试代码。

 <pre><code>
 // standard global variables
 var container, scene, camera, renderer, controls, stats;


 // custom global variables
 var cube;
 var projector, mouse = { x: 0, y: 0 }, INTERSECTED;
 var ballSprite;

 init();
 animate();

 // FUNCTIONS       
 function init() 
  {
// SCENE
scene = new THREE.Scene();
// CAMERA
var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
scene.add(camera);
camera.position.set(0,150,400);
camera.lookAt(scene.position);  
// RENDERER

renderer = new THREE.WebGLRenderer( {antialias:true} );
renderer.setClearColor(0xFFFFFF, 1.0);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container = document.getElementById( 'ThreeJS' );
container.appendChild( renderer.domElement );

// LIGHT
var light = new THREE.PointLight(0xffffff);
light.position.set(0,250,0);
scene.add(light);


////////////
// CUSTOM //
////////////
var cubeGeometry = new THREE.CubeGeometry( 50, 50, 50 );
var cubeMaterial = new THREE.MeshBasicMaterial( { color: 0x000088 } );
cube = new THREE.Mesh( cubeGeometry, cubeMaterial );
cube.position.set(0,26,0);
scene.add(cube);

// initialize object to perform world/screen calculations
projector = new THREE.Projector();

// when the mouse moves, call the given function
document.addEventListener( 'mousemove', onDocumentMouseMove, false );

var ballTexture = THREE.ImageUtils.loadTexture( 'http://stemkoski.github.io/Three.js/images/redball.png' );

var ballMaterial = new THREE.SpriteMaterial( { map: ballTexture} );
ballSprite = new THREE.Sprite( new THREE.SpriteMaterial(ballMaterial) );
ballSprite.scale.set( 32, 32, 1.0 );
ballSprite.position.set( 50, 50, 0 );
scene.add( ballSprite );    
 }

 function onDocumentMouseMove( event ) 
{
// the following line would stop any other event handler from firing
// (such as the mouse's TrackballControls)
// event.preventDefault();

// update sprite position
ballSprite.position.set( event.clientX, event.clientY, 0 );
}

function animate() 
{
    requestAnimationFrame( animate );
render();       
update();
}

function update()
{
}

function render() 
{
renderer.clear();
renderer.render( scene, camera );
}
</code></pre>

更新。

我看了一下webgl_sprites.html的例子，并修改了我的使用ortho cam。 它的部分工作：我现在有了正交显示的工具提示，但它不跟随鼠标（而在以前的V60中它可以工作）。

虽然这个例子使用的是图片，但我用canvas2D画了一些文字和线条，将其转换为纹理并应用到spriteMaterial上，并从中创建了一个mesh.当我拖动鼠标时，mesh的坐标发生了变化，但在屏幕上，它保持静态。

谁能帮帮我？

下面是代码。

 <pre><code>
 THREE.MouseTooltip = function (o) {

    Object.call(this);

    var defaults = { // default options                
        ResourcesPath: "", // Location of ressoruce file
        ImagesPath: "",
        Scene: null,
        Container: null
    };

    this.options = $.extend(defaults, o); // merge defaults and options object 

    if (this.options.Scene == null || this.options.Container == null) {
        throw "Error : MouseTooltip scene and container inputs must be specified";
        return;
    }
    this.canvas = null;
    this.context = null;
    this.texture = null;
    this.material = null;
    this.mesh = null;
    this.width = 0
    this.updateDisplay = false;
    this.init(this.options.Scene);

 };

 THREE.MouseTooltip.prototype = Object.create(Object.prototype);

 THREE.MouseTooltip.prototype.init = function (scene) {
    this.canvas = document.createElement('canvas');
    this.canvas.width = this.options.Container.offsetWidth;
    this.canvas.height = this.options.Container.offsetHeight;
    this.context = this.canvas.getContext('2d');
    this.context.font = "20px Arial";
    this.context.fillStyle = "rgba(0,0,0,0.95)";
    this.context.fillText('', 0, 20);
    this.width = 20;
    this.texture = new THREE.Texture(this.canvas);
    this.texture.needsUpdate = true;

    this.material = new THREE.SpriteMaterial({ map: this.texture/*, useScreenCoordinates: true, alignment: THREE.SpriteAlignment.topLeft */});

    this.mesh = new THREE.Sprite(this.material);
    this.mesh.name = "tooltip";
    this.mesh.scale.set(this.canvas.width/1.5, this.canvas.height/1.5, 1.0);
    this.mesh.material.depthTest = false;
    this.mesh.material.transparent = false;
    this.mesh.matrixAutoUpdate = false;    
    this.mesh.visible = false;
    this.mesh.userData = "";
    scene.add(this.mesh);
};

THREE.MouseTooltip.prototype.setContent = function (message) {
    if (message == this.mesh.userData) {
       return;
    }
    var metrics = this.context.measureText(message);
    var lineHeight = 20;
    this.width = metrics.width + 8;

    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);

    this.context.fillStyle = "rgba(0,0,0,1)"; // black border
    this.context.beginPath();
    this.context.moveTo(0, (lineHeight + 8) / 2);
    this.context.lineTo(10, (lineHeight + 8) / 2 + 10);
    this.context.lineTo(10, (lineHeight + 8) / 2 - 10);
    this.context.lineTo(0, (lineHeight + 8) / 2);
    this.context.fill();
    this.context.closePath();

    this.context.fillRect(12, 0, this.width, lineHeight + 8);
    this.context.fillStyle = "rgba(255,255,255,1)"; // white filler
    this.context.fillRect(14, 2, this.width - 4, lineHeight + 4);
    this.context.fillStyle = "rgba(0,0,0,1)"; // text color
    this.context.fillText(message, 16, lineHeight);
    this.mesh.userData = message;
    this.texture.needsUpdate = true;
};

THREE.MouseTooltip.prototype.isVisible = function (b) {
    return this.mesh.visible;
};

THREE.MouseTooltip.prototype.hide = function (b) {
    this.mesh.visible = false;
};

THREE.MouseTooltip.prototype.show = function (b) {
   this.mesh.visible = true;
};

THREE.MouseTooltip.prototype.clear = function () {
   this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
   this.texture.needsUpdate = true;
};

THREE.MouseTooltip.prototype.move = function (mouseX, mouseY) {
this.mesh.position.x = (mouseX - this.options.Container.offsetLeft+16) - this.canvas.width;
this.mesh.position.y = (mouseY - this.options.Container.offsetTop) -   this.canvas.height;



this.mesh.position.z = 1;

};
</pre></code>

Answer 1

关于这个例子 http:/threejs.orgexampleswebgl_sprites.html。 你的实际位置将是

this.mesh.position.x = -(SCREEN_WIDTH / 2) + mouseX;
this.mesh.poyition.y = (SCREEN_WIDTH / 2) - mouseY;