我在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}
但我想将新的网格位置设置为从位置到位置附近。
答案 0 :(得分: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>
&#13;