Как провести отрезок из одной точки сцены в другую

Question

Создать цилиндр и переместить в нужную точку кординат не является трудной задачей. Но не нашел правильного функции (и вообще такая существует?)

Answer 1

Вариант с цилиндром и .lookAt():

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(5, 8, 13);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 5, 0);
controls.update();

var gridXZ = new THREE.GridHelper(10, 10, 0x400000, 0x400000);
var gridXY = new THREE.GridHelper(10, 10, 0x004000, 0x004000);
gridXY.rotation.x = Math.PI * 0.5;
gridXY.position.set(0, 5, -5);
var gridYZ = new THREE.GridHelper(10, 10, 0x000040, 0x000040);
gridYZ.rotation.z = -Math.PI * 0.5;
gridYZ.position.set(-5, 5, 0);
scene.add(gridXZ, gridXY, gridYZ);

var cylGeom = new THREE.CylinderBufferGeometry(0.125, 0.125, 1, 6);
cylGeom.translate(0, 0.5, 0);
cylGeom.rotateX(Math.PI * 0.5);
var cylMat = new THREE.MeshBasicMaterial({
  color: "aqua"
});
var cyl = new THREE.Mesh(cylGeom, cylMat);
cyl.position.set(Math.random() * -5, Math.random() * 5, Math.random() * 5, );
scene.add(cyl);

var clock = new THREE.Clock();

var cylLookAt = new THREE.Vector3();
var temp = new THREE.Vector3();

renderer.setAnimationLoop(() => {
  let t = clock.getElapsedTime();
  cylLookAt.set(
    Math.cos(t * 0.27) * 5,
    Math.sin(t * 0.314) * 5 + 5,
    Math.sin(t * 0.15) - 2.5
  );
  let len = temp.copy(cylLookAt).sub(cyl.position).length();
  cyl.scale.z = len;
  cyl.lookAt(cylLookAt);
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

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

С линиями попроще:

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(5, 8, 13);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 5, 0);
controls.update();

var gridXZ = new THREE.GridHelper(10, 10, 0x400000, 0x400000);
var gridXY = new THREE.GridHelper(10, 10, 0x004000, 0x004000);
gridXY.rotation.x = Math.PI * 0.5;
gridXY.position.set(0, 5, -5);
var gridYZ = new THREE.GridHelper(10, 10, 0x000040, 0x000040);
gridYZ.rotation.z = -Math.PI * 0.5;
gridYZ.position.set(-5, 5, 0);
scene.add(gridXZ, gridXY, gridYZ);

var geom = new THREE.BufferGeometry().setFromPoints([
  new THREE.Vector3(1, 2, 3),
  new THREE.Vector3()
]);
var mat = new THREE.LineBasicMaterial({
  color: "yellow"
});
var line = new THREE.LineSegments(geom, mat);
scene.add(line);

var clock = new THREE.Clock();

renderer.setAnimationLoop(() => {
  let t = clock.getElapsedTime();

  line.geometry.attributes.position.setXYZ(
    1, // меняем координаты второй точки
    Math.cos(t * 0.27) * 5,
    Math.sin(t * 0.314) * 5 + 5,
    Math.sin(t * 0.15) - 2.5
  );
  line.geometry.attributes.position.needsUpdate = true;
  renderer.render(scene, camera);
});

body {
  overflow: hidden;
  margin: 0;
}

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

БЛОГ НА HUSL

Как провести отрезок из одной точки сцены в другую

Ответы (1 шт):