在three.js中跟隨鼠標位置的光線

Question

我剛剛開始探索three.js的世界，我正在嘗試實現類似於this old topic的關於基本相同的事情的解決方案，但不完全。

我想在靜態和靜止的場景中間放置一個球體。移動鼠標時，我希望場景的指示燈跟隨鼠標移動。在上面的例子中，情況正好相反。

我剛開始學習JavaScript和jQuery，所以我在理解three.js的邏輯時遇到了一些麻煩。這是到目前爲止我的代碼，但它不工作：

// Define the standard global variables 
var container, 
scene, 
camera, 
renderer, 
plane, 
mouseMesh; 

// Custom global variables 
var mouse = {x: 0, y: 0}; 

init(); 
animate(); 

function init() { 

// Scene 
scene = new THREE.Scene(); 

window.addEventListener('resize', function() { 
    var WIDTH = window.innerWidth, 
     HEIGHT = window.innerHeight; 
    renderer.setSize(WIDTH, HEIGHT); 
    camera.aspect = WIDTH/HEIGHT; 
    camera.updateProjectionMatrix(); 
}); 

// Camera 
var screenWidth = window.innerWidth, 
     screenHeight = window.innerHeight, 
     viewAngle = 75, 
     nearDistance = 0.1, 
     farDistance = 1000; 
camera = new THREE.PerspectiveCamera(viewAngle, screenWidth/ screenHeight, nearDistance, farDistance); 
scene.add(camera); 
camera.position.set(0, 0, 5); 
camera.lookAt(scene.position); 

// Renderer engine together with the background 
renderer = new THREE.WebGLRenderer({ 
     antialias: true, 
    alpha: true 
}); 
renderer.setSize(screenWidth, screenHeight); 
container = document.getElementById('container'); 
container.appendChild(renderer.domElement); 

// Define the lights for the scene 
var light = new THREE.PointLight(0xff00ff); 
light.position.set(0, 0, 5); 
scene.add(light); 
var lightAmb = new THREE.AmbientLight(0x000000); 
scene.add(lightAmb); 


// Create a circle around the mouse and move it 
// The sphere has opacity 0 
var mouseGeometry = new THREE.SphereGeometry(1, 0, 1); 
var mouseMaterial = new THREE.MeshLambertMaterial({ }); 
mouseMesh = new THREE.Mesh(mouseGeometry, mouseMaterial); 

mouseMesh.position.set(0, 0, 5); 
scene.add(mouseMesh); 

// When the mouse moves, call the given function 
document.addEventListener('mousemove', onMouseMove, false); 
} 

// Follows the mouse event 
function onMouseMove(event) { 

// Update the mouse variable 
event.preventDefault(); 
mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

// Make the sphere follow the mouse 
var vector = new THREE.Vector3(mouse.x, mouse.y, 0.5); 
vector.unproject(camera); 
var dir = vector.sub(camera.position).normalize(); 
var distance = - camera.position.z/dir.z; 
var pos = camera.position.clone().add(dir.multiplyScalar(distance) ); 
mouseMesh.position.copy(pos); 

// Make the sphere follow the mouse 
// mouseMesh.position.set(event.clientX, event.clientY, 0); 
}; 

// Animate the elements 
function animate() { 
requestAnimationFrame(animate); 
    render(); 
} 


// Rendering function 
function render() { 

// For rendering 
renderer.autoClear = false; 
renderer.clear(); 
renderer.render(scene, camera); 
}; 

我試圖簡單地用light.position.copy(pos);取代mouseMesh.position.copy(pos);，但只是使mouseMesh消失。

Answer 1

mouseMesh因其原始位置在相機視圖外部而消失。另一個問題是您需要將light var設置爲在onMouseMove函數內可訪問。

我成立了一個codepen，顯示了點光，現在跟隨鼠標移動而mouseMesh是靜態的：

http://codepen.io/paulmg/pen/yJAwgx?editors=0010