javascript - 在 Three.js 中用灯光跟随鼠标位置

Question

我最近刚刚开始探索 two.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);
};

我尝试简单地将 mouseMesh.position.copy(pos); 替换为 light.position.copy(pos);，但这只会使 mouseMesh 消失。

Answer 1

mouseMesh 消失了，因为它的原始位置位于相机 View 之外。另一个问题是您需要将 light 变量设置为可在 onMouseMove 函数内访问。

我设置了一个 codepen，在 mouseMesh 处于静态时显示点光源现在跟随鼠标:

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