我有一个在Three.js V60上运行的当前应用程序。我想将它迁移到V64，但我遇到了一个函数，它是一个鼠标工具提示。它遵循http://stemkoski.github.io/Three.js/Mouse-Tooltip.html的例子。
在V64中，我们没有useScreenCoordinates，sizeAttenuation和alignment属性，所以当我删除这些参数时，我对工具提示有奇怪的行为。我的行为是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并从中创建网格。 当我拖动鼠标时，网格coordonates已更改，但在屏幕上，它保持静止。
有人可以帮助我吗？
以下是代码：
<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>
答案 0 :(得分：0)
关于http://threejs.org/examples/webgl_sprites.html中的示例，您的实际位置将是
this.mesh.position.x = -(SCREEN_WIDTH / 2) + mouseX;
this.mesh.poyition.y = (SCREEN_WIDTH / 2) - mouseY;