如何在线设置新的mesh对象+三个js答案

【问题标题】：How to set new mesh object on line + three js如何在线设置新的mesh对象+三个js
【发布时间】：2018-09-07 03:37:09
【问题描述】：

我在 2 个向量之间有一条线。

我正在尝试在线添加新的精灵网格。和新的网格（精灵）设置位置到线的中心。通过下面的代码

        let midLoc = {
            x: ((fromLoc.x + toLoc.x) / 2),
            y: ((fromLoc.y + toLoc.y) / 2),
            z: ((fromLoc.z + toLoc.z) / 2)
        };

        let midOffset = new THREE.Vector3(midLoc.x, midLoc.y, midLoc.z);

        this.setPosition(midOffset.x, midOffset.y + 20, midOffset.z);

中心位置的新网格：-

new mesh on center location {请点击此链接获取图片，因为没有超过 10 的声誉，所以无法粘贴图片：P }

但我想将新的网格位置设置为 near to from location 或 to location。

【问题讨论】：

标签： 3d three.js mesh

【解决方案1】：

作为一种选择，您可以这样做：

绿色 - 开始，蓝色 - 结束，红色 - 中间。

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

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

scene.add(new THREE.GridHelper(10, 10));

var points = [
  new THREE.Vector3(-5, 1, 2), //start
  new THREE.Vector3(4, 3, -1)  //end
]

var lineGeom = new THREE.Geometry();
lineGeom.vertices = points;
var line = new THREE.Line(lineGeom, new THREE.LineBasicMaterial({
  color: "yellow"
}));
scene.add(line);

var midPoint = new THREE.Vector3().addVectors(points[0], points[1]).multiplyScalar(0.5);

var midMarker = new THREE.Mesh(new THREE.SphereGeometry(0.125, 4, 2), new THREE.MeshBasicMaterial({
  color: "red"
}));
midMarker.position.copy(midPoint);
scene.add(midMarker);

var directionFrom = new THREE.Vector3().subVectors(points[1], points[0]).normalize();
var directionTo = directionFrom.clone().negate();

var fromMarker = new THREE.Mesh(new THREE.SphereGeometry(0.25, 4, 2), new THREE.MeshBasicMaterial({
  color: "green"
}));
fromMarker.position.copy(points[0]).add(directionFrom);
scene.add(fromMarker);

var toMarker = new THREE.Mesh(new THREE.SphereGeometry(0.25, 4, 2), new THREE.MeshBasicMaterial({
  color: "blue"
}));
toMarker.position.copy(points[1]).add(directionTo);
scene.add(toMarker);

render();

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

【讨论】：

非常感谢您快速正确的回复。 它有效！ 我很想计算线方向上的点。奇妙的逻辑。