три js длина линии и угол от земли или оси X - PullRequest
0 голосов
/ 28 апреля 2020

Я новичок с тремя JS, и я разрабатываю проект для клиента. Простая линия проводится между двумя точками A и B, и там необходимо рассчитать расстояние. Кроме того, мне нужно вычислить угол линии, проведенной от оси x, и показать длину и угол линии в html. Я также хочу сбросить точки, когда рисуется одна линия, в настоящее время это dr aws линия от точки, где заканчивается первая линия, поэтому я хочу рисовать несвязанные линии. Более того, если кто-нибудь может помочь мне восстановить нарисованную линию, это тоже будет здорово. Я поделюсь кодом, который я использую ниже: `

// three.js animataed line using BufferGeometry



var renderer, renderer1,renderer2,renderer3, controls, scene, camera, camera1,camera2, camera3;
var line;
var count = 0;
var mouse = new THREE.Vector3();
var positions;
init();
animate();

function init() {

  // renderer
  renderer = new THREE.WebGLRenderer({ antialias: false,alpha:true });

  renderer.setSize(window.innerWidth/2.5, window.innerHeight/2.5);

  renderer.domElement.setAttribute("id","canvas1");
  document.body.appendChild(renderer.domElement);

  // renderer
  renderer1 = new THREE.WebGLRenderer({ antialias: false,alpha:true });

  renderer1.setSize(window.innerWidth/2.5, window.innerHeight/2.5);
  document.body.appendChild(renderer1.domElement);
  renderer1.domElement.setAttribute("id","canvas2");
// renderer
  renderer2 = new THREE.WebGLRenderer({ antialias: false,alpha:true });

  renderer2.setSize(window.innerWidth/2.5, window.innerHeight/2.5);
  document.body.appendChild(renderer2.domElement);
  renderer2.domElement.setAttribute("id","canvas3");
  // renderer
  renderer3 = new THREE.WebGLRenderer({ antialias: false,alpha:true });

  renderer3.setSize(window.innerWidth/2.5, window.innerHeight/2.5);
  document.body.appendChild(renderer3.domElement);
  renderer3.domElement.setAttribute("id","canvas4");

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  // add the camera to the scene

    // the camera defaults to position (0,0,0)
    //  so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
    camera.position.set(0, 0, 100);
    camera.up.set(0,0,1);
    camera.lookAt(scene.position);  
    scene.add(camera);
    // camera1
  camera1 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  // add the camera to the scene

    // the camera defaults to position (0,0,0)
    //  so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
    camera1.position.set(0, -100, 0);
    camera1.up.set(0,0,1);
    camera1.lookAt(scene.position); 
    scene.add(camera1);

    // camera2
  camera2 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  // add the camera to the scene

    // the camera defaults to position (0,0,0)
    //  so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
    camera2.position.set(-100, 0, 0);
    camera2.up.set(0,0,1);
    camera2.lookAt(scene.position); 
    scene.add(camera2);

    // camera1
  camera3 = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
  // add the camera to the scene

    // the camera defaults to position (0,0,0)
    //  so pull it back (z = 400) and up (y = 100) and set the angle towards the scene origin
    camera3.position.set(100, 0, 0);
    camera3.up.set(0,0,1);
    camera3.lookAt(scene.position); 
    scene.add(camera3);

controls = new THREE.OrbitControls( camera, renderer.domElement );

                //controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)

                controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
                controls.dampingFactor = 0.05;

                controls.screenSpacePanning = false;

                controls.minDistance = 100;
                controls.maxDistance = 500;

                controls.maxPolarAngle = Math.PI / 2;

  // geometry
  var geometry = new THREE.BufferGeometry();
  var MAX_POINTS = 500;
  positions = new Float32Array(MAX_POINTS * 3);
  geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));

  // material
  var material = new THREE.LineBasicMaterial({
    color: 0xff0000,
    linewidth: 2
  });

  // line
  line = new THREE.Line(geometry, material);
  scene.add(line);
  // create a set of coordinate axes to help orient user
    //    specify length in pixels in each direction
    var axes = new THREE.AxesHelper(500);
    scene.add( axes );
  ///////////
    // LIGHT //
    ///////////

    // create a light
    var light = new THREE.PointLight(0xffffff);
    light.position.set(0,250,0);
    scene.add(light);
    var ambientLight = new THREE.AmbientLight(0x111111);
    // scene.add(ambientLight);

    // Create an array of materials to be used in a cube, one for each side
    var cubeMaterialArray = [];
    // order to add materials: x+,x-,y+,y-,z+,z-
    cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff3333 } ) );
    cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xff8800 } ) );
    cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0xffff33 } ) );
    cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x33ff33 } ) );
    cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x3333ff } ) );
    cubeMaterialArray.push( new THREE.MeshBasicMaterial( { color: 0x8833ff } ) );
    var cubeMaterials = new THREE.MeshFaceMaterial( cubeMaterialArray );
    // Cube parameters: width (x), height (y), depth (z), 
    //        (optional) segments along x, segments along y, segments along z
    var cubeGeometry = new THREE.CubeGeometry( 10, 10, 10, 1, 1, 1 );
    // using THREE.MeshFaceMaterial() in the constructor below
    //   causes the mesh to use the materials stored in the geometry
    var cube = new THREE.Mesh( cubeGeometry, cubeMaterials );
    cube.position.set(0, 0, 0);
    scene.add( cube );      


  document.addEventListener("mousemove", onMouseMove, false);
  document.addEventListener('mousedown', onMouseDown, false);
}

// update line
function updateLine() {
  positions[count * 3 - 3] = mouse.x;
  positions[count * 3 - 2] = mouse.y;
  positions[count * 3 - 1] = mouse.z;
  line.geometry.attributes.position.needsUpdate = true;
}

// mouse move handler
function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  mouse.z = 0;
  mouse.unproject(camera3);
  //mouse.unproject(camera1);
  //mouse.unproject(camera2);
  //mouse.unproject(camera3);
  if( count%3 !== 0 ){
    updateLine();
  }
}

// add point
function addPoint(event){
  console.log("point nr " + count + ": " + mouse.x + " " + mouse.y + " " + mouse.z);
  positions[count * 3 + 0] = mouse.x;
  positions[count * 3 + 1] = mouse.y;
  positions[count * 3 + 2] = mouse.z;
  count++;
  console.log('count = ' + count);
  line.geometry.setDrawRange(0, count);
  updateLine();
   var distance1 = line.computeLineDistances();
   console.log('LINE DISTANCE==');
   console.log(distance1);
}

// mouse down handler
function onMouseDown(evt) {
  // on first click add an extra point
  if( count === 0 ){
      addPoint();
  }

  addPoint();
}

// render
function render() {
  renderer.render(scene, camera);
  renderer1.render(scene, camera1);
  renderer2.render(scene, camera2);
  renderer3.render(scene, camera3);
  //console.log('x = '+ camera.position.x);
  //console.log('y = '+ camera.position.y);
  //console.log('z = '+ camera.position.z);
}

// animate
function animate() {
  requestAnimationFrame(animate);
  controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
  render();

}

`

также доступен на живом сайте http://kaizenpak.com/interactive/index2.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...