Я визуализировал простой куб в Three.JS на экране, теперь, как я нашел в Интернете, мне нужно использовать PointerLockControls.js, заблокировать мышь и осмотреться. Мне удалось посмотреть ...

0
InexperiencedCoder 4 Мар 2021 в 02:38

1 ответ

Лучший ответ

"Осмотревшись", я полагаю, вы хотите переместить камеру? Для вас это может быть началом.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first three.js app</title>
        <style>
body { margin: 0; }
#js3canvas { width:800px; height:600px; }            
        </style>
    </head>
    <body>
<canvas id="js3canvas"></canvas>
    <script src="javascript/three.js"></script>
    <script>
  var scene, camera, renderer, geometry, material, cube;
  var canvaselt = document.getElementById("js3canvas");
  var init = function(){
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera( 75, canvaselt.clientWidth/canvaselt.clientHeight, 0.1, 1000 );
  renderer = new THREE.WebGLRenderer( { canvas:canvaselt } );
  renderer.setSize(canvaselt.clientWidth, canvaselt.clientHeight);
  geometry = new THREE.BoxGeometry();
  material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
  cube = new THREE.Mesh( geometry, material );
  scene.add( cube );
  camera.position.z = 5;
  canvaselt.addEventListener("mousemove", doMouseMove, false);
}
function doMouseMove(ev) { // point camera 
  camera.lookAt((ev.pageX-400)/100, -(ev.pageY-300)/100, 0);
}
function animate() { // need to animate, not just render once
  renderer.render( scene, camera );
  requestAnimationFrame( animate );
}
init();
animate();
        </script>
    </body>
</html>
0
dcromley 7 Мар 2021 в 02:45