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);
};

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

Answer 1

mouseMesh消失了，因为它的原始位置在摄像机视图之外。另一个问题是您需要将light var设置为可在onMouseMove函数内访问。

我设置了一个编解码器，当mouseMesh是静态的时，显示鼠标跟随点光源：

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

在three.js中使用灯光跟随鼠标位置

1 个答案: