Three.jsマウス変数

Question

私は、マウスの位置に応じて変数を変更するには、私の球を取得しようとしています。問題は、私はそれが正常に動作するようにもできないということです、私はおそらく何か間違っています。なぜなら、画面が黒くなっている場所で可変コードを貼り付けようとするたびに、これがコードです。私が望む何

は、マウスの位置決幅に応じて回転する球体のためにある、誰かがマウス変数を追加する方法をトラブルシューティングすることができれば、私は幸せです。

私は私が私の内の任意の場所だけblackscreenedウィンドウ全体を、コードを入れたときに、大成功せずにこれをしようと試みてきました。

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>

Answer 2

は、あなたが使用する必要があります。

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

が、その後、次のとおりです

controls = new THREE.OrbitControls(camera, renderer.domElement); 
controls.enableDamping = true; 
controls.dampingFactor = 0.25; 
controls.enableZoom = true; 

はまた、私はたとえば、あなたが適切にカメラを設定しているドント気づく：

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

私はセクション内のコードを分割することをお勧めし、最後にそれらを呼び出します。

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