因此,当鼠标悬停在必要的对象(球体)上时,我想突出显示对象。由于某种原因,它会检测到球体并更改其颜色,但会与球一起弯曲。每当我将鼠标悬停在其他对象上时,它都不会发出光线,仍会更新当前所选对象(原始球体)的颜色。
我已经在Three.js官方示例中提到了原始示例:https://threejs.org/examples/#webgl_interactive_cubes
当然,大多数不必要的代码都被省略了:)
export default {
name: 'ThreeTest',
data() {
return {
mouse: new THREE.Vector2(),
rayCaster: new THREE.Raycaster(),
spheres: [],
intersectHighlighted: null,
highlighted: null
};
},
methods: {
init() {
//Map Creation:
let map = document.getElementById('map');
this.mapDimensions = map.getBoundingClientRect();
this.mapWidth = this.mapDimensions.width;
this.mapHeight = this.mapDimensions.height;
this.scene = new THREE.Scene();
this.scene.background = new THREE.Color( 0xf0f0f0 );
//Camera:
this.camera = new THREE.PerspectiveCamera(
60,
this.mapWidth/this.mapHeight,
0.1,
1000,
);
this.camera.position.z = 3;
// renderer and canvas creation:
this.renderer = new THREE.WebGLRenderer();
this.renderer.setSize(this.mapWidth, this.mapHeight);
map.appendChild(this.renderer.domElement);
// EVENT LISTENERS:
map.addEventListener('mouseover', this.highlightPoi, false);
map.addEventListener('mouseover', this.mouseOverScene, false);
},
// HELPER FUNCTIONS:
mouseOverScene (event) {
event.preventDefault();
let rect = event.target.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
this.mouse.x = ( x / this.mapWidth) * 2 - 1;
this.mouse.y = - ( y / this.mapHeight ) * 2 + 1;
this.rayCaster.setFromCamera(this.mouse, this.camera);
},
animate() {
requestAnimationFrame(this.animate);
this.render();
},
render() {
// find intersections
let highlighted = this.highlighted;
let renderedRaycaster = this.rayCaster;
renderedRaycaster.setFromCamera(this.mouse, this.camera);
let intersectHighlighted = this.intersectHighlighted;
intersectHighlighted = renderedRaycaster.intersectObjects(this.spheres);
if (intersectHighlighted.length > 0) {
console.log("I'm in if 1");
if (highlighted !== intersectHighlighted[0].object) {
if ( highlighted ) highlighted.material.color.setHex( highlighted.currentHex );
console.log("I'm in if 3");
highlighted = intersectHighlighted[0].object;
highlighted.currentHex = highlighted.material.color.getHex();
highlighted.material.emissive.setHex( 0xff0000 );
console.log(intersectHighlighted.length);
}
} else if (intersectHighlighted !== this.spheres.object) {
console.log("I'm in else");
if ( highlighted ) highlighted.material.color.setHex( highlighted.currentHex );
highlighted = null;
console.log(highlighted);
console.log(intersectHighlighted);
console.log(intersectHighlighted.length);
}
this.renderer.render(this.scene, this.camera);
},
},
预期结果:每当鼠标悬停在球体上时,鼠标都应突出显示,并且当鼠标悬停在球体上时会返回原始颜色。
实际:仅突出显示一个球体,将其悬停时不会恢复原始颜色。
答案 0 :(得分:1)
这是我的解决方法:
因此,显然,该问题已通过链表推理得以解决。我将全局变量重新分配给局部变量,这弄乱了我的代码,并且将mouseover事件处理程序更改为mousemove以不断更新鼠标坐标。这是更正的代码:
init(){
map.addEventListener('mousemove', this.mouseOverScene,false);
},
render() {
// find intersections
this.rayCaster.setFromCamera(this.mouse, this.camera);
this.intersectHighlighted = this.rayCaster.intersectObjects(this.spheres);
if ( this.intersectHighlighted.length > 0) {
if (this.highlighted != this.intersectHighlighted[0].object) {
if ( this.highlighted ) this.highlighted.material.emissive.setHex( this.highlighted.currentHex );
this.highlighted = this.intersectHighlighted[0].object;
this.highlighted.currentHex = this.highlighted.material.emissive.getHex();
this.highlighted.material.emissive.setHex( 0xff0000 );
}
} else {
if ( this.highlighted ) {
this.highlighted.material.emissive.setHex( this.highlighted.currentHex );
}
this.highlighted = null;
}
}