Javascript Three.js鼠标变量

我试图让我的球体根据鼠标位置改变变量。问题是，我甚至不能让它正常工作，我可能做错了什么，因为每次我试图将变量代码粘贴到屏幕上的任何地方，屏幕就会变黑；这是代码

我希望球体根据鼠标位置旋转，但如果有人能解决如何添加鼠标变量的问题，我会很高兴

我尝试过，但没有成功，每当我把代码放在我的任何地方，整个窗口都被黑屏遮住了

mouse.x = event.clientX;

及

var renderer=new THREE.WebGLRenderer（{canvas:document.getElementById（'myCanvas'），antialas:true}）；
渲染器.setClearColor（0x000044）；
renderer.setSize（window.innerWidth、window.innerHeight）；
var摄像机=新的三视角摄像机（15，window.innerWidth/window.innerHeight，0.1300）；
var scene=new THREE.scene（）；
var灯光=新的三个环境灯光（0xFFFFFF，0.5）；
场景。添加（灯光）；
var light2=新的三点光源（0xFFFFFF，0.5）；
场景。添加（light2）；
var几何=新的三种。球墨法（50,30,30）；
var材质=新的3.0网格材质({
颜色：0xEEED，
线框：正确
});
var mesh=新的三个网格（几何体、材质）；
网格位置设置（0,0，-500）；
网格旋转.x=-0.05；
场景。添加（网格）；
请求动画帧（渲染）；
函数render（）{
网格旋转.x+=0.005；
网格旋转y+=0.005；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}
//document.body.appendChild（renderer.doElement）；

您应该使用：

<script src="Detector.js"></script>
<script src="OrbitControls.js"></script>

我还注意到您没有正确设置摄像头，例如：

camera.position.set(0, 0, 40);

我建议将代码分成几个部分，最后调用它们

document.addEventListener('DOMContentLoaded', function(event) {
init();
initLight();
animate();
requestAnimationFrame(render);
controls.update(); 
});

你应使用：

<script src="Detector.js"></script>
<script src="OrbitControls.js"></script>

我还注意到您没有正确设置摄像头，例如：

camera.position.set(0, 0, 40);

我建议将代码分成几个部分，最后调用它们

document.addEventListener('DOMContentLoaded', function(event) {
init();
initLight();
animate();
requestAnimationFrame(render);
controls.update(); 
});

我建议使用

要使其正常工作并从正确初始化的摄影机和网格位置开始，应将摄影机位置设置为世界中心之外，但应将网格保留在世界中心

camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set( 0, 0, 500 );

请参见代码片段：

var渲染器、摄影机、控件、场景、网格；
函数init（）{
renderer=new THREE.WebGLRenderer（{canvas:document.getElementById（'myCanvas'），antialas:true}）；
渲染器.setClearColor（0x000044）；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（15，window.innerWidth/window.innerHeight，0.1300）；
摄像机位置设置（0,0,500）；
调整大小（）；
window.onresize=调整大小；
控制装置=新的三个控制装置（摄像机）；
var灯光=新的三个环境灯光（0xFFFFFF，0.5）；
场景。添加（灯光）；
var light2=新的三点光源（0xFFFFFF，0.5）；
场景。添加（light2）；
var几何=新的三种。球墨法（50,30,30）；
var材质=新的3.0网格材质({
颜色：0xEEED，
线框：正确
});
网格=新的三个网格（几何体、材质）；
网格旋转.x=-0.05；
场景。添加（网格）；
}
函数resize（）{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
}
函数render（）{
网格旋转.x+=0.005；网格旋转.y+=0.005；
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
init（）；render（）

我建议使用

要使其正常工作并从正确初始化的摄影机和网格位置开始，应将摄影机位置设置为世界中心之外，但应将网格保留在世界中心

camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set( 0, 0, 500 );

请参见代码片段：


var渲染器、摄影机、控件、场景、网格；
函数init（）{
renderer=new THREE.WebGLRenderer（{canvas:document.getElementById（'myCanvas'），antialas:true}）；
渲染器.setClearColor（0x000044）；
场景=新的三个。场景（）；
摄像头=新的三个透视摄像头（15，window.innerWidth/window.innerHeight，0.1300）；
摄像机位置设置（0,0,500）；
调整大小（）；
window.onresize=调整大小；
控制装置=新的三个控制装置（摄像机）；
var灯光=新的三个环境灯光（0xFFFFFF，0.5）；
场景。添加（灯光）；
var light2=新的三点光源（0xFFFFFF，0.5）；
场景。添加（light2）；
var几何=新的三种。球墨法（50,30,30）；
var材质=新的3.0网格材质({
颜色：0xEEED，
线框：正确
});
网格=新的三个网格（几何体、材质）；
网格旋转.x=-0.05；
场景。添加（网格）；
}
函数resize（）{
renderer.setSize（window.innerWidth、window.innerHeight）；
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
}
函数render（）{
网格旋转.x+=0.005；网格旋转.y+=0.005；
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
}
init（）；render（）

请看一看。大多数包括某种形式的鼠标交互。这里有一个（）响应鼠标移动，而不是拖动。请记住，在大多数情况下，移动相机比移动许多对象更容易（更有效），这就是大多数示例所做的。请看下面的示例。大多数包括某种形式的鼠标交互。这里有一个（）响应鼠标移动，而不是拖动。请记住，在大多数情况下，移动相机比移动许多对象更容易（更有效），这是大多数示例所做的。谢谢，我的代码现在更干净了，但是我不想使用轨道控制，我正在寻找类似的鼠标控件：但我的代码无法识别OnDocumentMouseMove（事件）我将为此提出一个单独的问题谢谢，我的代码现在更干净了，但是我不想使用Orbi
camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
camera.position.set( 0, 0, 500 );