javascript - 三.js鼠标变量

Question

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

我想要的是球体根据鼠标位置旋转，但如果有人可以解决如何添加鼠标变量的问题，我很高兴。

我尝试过但没有成功，每当我将代码放在我的任何位置时，整个窗口都会黑屏。

mouse.x = event.clientX;

和

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>

Answer 1

我建议使用THREE.OrbitControls .

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

 controls = new THREE.OrbitControls( camera );

为了使其工作并从正确初始化的相机和网格位置开始，您应该将相机位置设置在世界中心之外，但应该将网格保留在世界中心。

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

查看片段:

var renderer, camera, controls, scene, mesh;

function init() {  

    renderer = new THREE.WebGLRenderer({canvas: document.getElementById('myCanvas'), antialias: true});
    renderer.setClearColor(0x000044);
    
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(15, window.innerWidth/window.innerHeight, 0.1, 3000);
    camera.position.set( 0, 0, 500 );
    resize();
    window.onresize = resize;
    controls = new THREE.OrbitControls( camera );

    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
    });
    mesh = new THREE.Mesh(geometry,material);
    mesh.rotation.x = -0.05;

    scene.add(mesh);
}

function resize() {
    renderer.setSize(window.innerWidth, window.innerHeight);
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
}

function render() {
    mesh.rotation.x += 0.005; mesh.rotation.y += 0.005;
    requestAnimationFrame( render );
    renderer.render( scene, camera );
}

init(); render();

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<canvas id="myCanvas"></canvas>