Переменная мыши Three.js

Question

Переменная мыши Three.js

1

Я пытаюсь заставить свою сферу изменять переменные в зависимости от положения мыши. Проблема в том, что я даже не могу заставить его работать правильно, я, вероятно, что-то делаю неправильно, потому что каждый раз, когда я пытаюсь вставить переменный код в любом месте экрана, просто черный цвет; это код.

Я бы хотел, чтобы сфера вращалась в зависимости от положения мыши, но я рад, если кто-то может устранить проблему с добавлением переменной мыши.

Я пробовал это без успеха, всякий раз, когда я помещал код где-то в пределах моего всего окна, просто черный экран.

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>

jh heuvel 28 нояб. 2017, в 17:36

Источник

0

Пожалуйста, ознакомьтесь с примерами three.js . Большинство из них включают некоторую форму взаимодействия с мышью. Вот одна из них ( threejs.org/examples/?q=geometry#webgl_geometry_colors ), которая реагирует на движение мыши, а не на перетаскивание. Имейте в виду, что в большинстве ситуаций легче (эффективнее) перемещать камеру, чем перемещать многие объекты, и именно это и делает большинство примеров.
TheJim01 28 нояб. 2017, в 16:30

Теги:

javascript

three.js

mouse

2 ответа

0

Вы должны использовать:

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

LucasRT 28 нояб. 2017, в 20:58

Ещё вопросы

Пожалуйста, ознакомьтесь с примерами three.js . Большинство из них включают некоторую форму взаимодействия с мышью. Вот одна из них ( threejs.org/examples/?q=geometry#webgl_geometry_colors ), которая реагирует на движение мыши, а не на перетаскивание. Имейте в виду, что в большинстве ситуаций легче (эффективнее) перемещать камеру, чем перемещать многие объекты, и именно это и делает большинство примеров.

Rabbid76 · Accepted Answer · 2017-11-28T20-11-00.000Z

Я рекомендую использовать 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>

Спасибо, мой код теперь намного чище, однако я не хочу использовать элементы управления орбитой, я ищу элементы управления мышью, похожие на: threejs.org/examples/#webgl_geometry_colors Но мой код просто не распознает событие OnDocumentMouseMove (событие ) Я задам отдельный вопрос для этого