I've been attempting to make my sphere change variables based on the movement of the mouse cursor. Unfortunately, I seem to be encountering some issues as every time I try to include the variable code, the screen goes black. Here is the code snippet:
My goal is for the sphere to rotate in response to the position of the mouse cursor. However, I would appreciate any assistance in troubleshooting how to incorporate a mouse variable.
I have attempted this without success; whenever I insert the code into my existing one, the entire window blacks out.
mouse.x = event.clientX;
and
var mouse.x = event.clientX;
<script src="js/three.min.js"></script>
<script>
var renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
renderer.setClearColor(0x000044);
renderer.setSize(window.innerWidth, window.innerHeight);
var camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
var scene = new THREE.Scene();
var light = new THREE.AmbientLight(0xFFFFFF, 0.5);
scene.add(light);
var light2 = new THREE.PointLight(0xFFFFFF, 0.5);
scene.add(light2);
var geometry = new THREE.SphereGeometry(50, 30, 30);
var material = new THREE.MeshPhongMaterial({
color: 0xEEEEED,
wireframe: true
});
var mesh = new THREE.Mesh(geometry,material);
mesh.position.set(0, 0, -500);
mesh.rotation.x = -0.05;
scene.add(mesh);
requestAnimationFrame(render);
function render() {
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.005;
renderer.render(scene, camera);
requestAnimationFrame(render);
}
//document.body.appendChild(renderer.domElement);
</script>