drawLineBox(new THREE.Vector3(100, 50, 0), new THREE.Vector3(200, 100, 100));

function drawLineBox(start, end) {

//开始点用cube标出来方便观察

geometry = new THREE.CubeGeometry(10, 10, 10);
material = new THREE.MeshNormalMaterial({
opacity: 0.5,
transparent: true
});

var mesh1 = new THREE.Mesh(geometry, material);
mesh1.position.set(start.x, start.y, start.z);
scene.add(mesh1);

//结束点

geometry2 = new THREE.CubeGeometry(10, 10, 10);
material2 = new THREE.MeshNormalMaterial({
opacity: 1,
transparent: true
});
var mesh2 = new THREE.Mesh(geometry2, material2);
mesh2.position.set(end.x, end.y, end.z);
scene.add(mesh2);

//cube2 边缘线
let cubeEdges = new THREE.EdgesGeometry(geometry2, 1);
let edgesMtl = new THREE.LineBasicMaterial({
color: 0xff0000, linewidth: 4
});
//edgesMtl.depthTest = false;
let cubeLine = new THREE.LineSegments(cubeEdges, edgesMtl);
cubeLine.position.set(end.x, end.y, end.z);
scene.add(cubeLine);

//画一条直线方便观察

var geometry3 = new THREE.Geometry();
geometry3.vertices.push(start);
geometry3.vertices.push(end);
var line = new THREE.Line(geometry3, new THREE.LineBasicMaterial({
color: 'red'
}), THREE.LineSegments);
scene.add(line);
console.log("line center", line);

//两种方法

//画立方体1

var c = createCylinderByTwoPoints(start, end);
scene.add(c);

//画立方体2 短一点的立方体
var d = createCylinderByTwoPoints2(start, end);
scene.add(d);
//d.position.set(midPoint.x, midPoint.y, midPoint.z);
}

//两个点的中心点
function getPointInBetweenByPerc(pointA, pointB, percentage) {
//https://stackoverflow.com/questions/27426053/find-specific-point-between-2-points-three-js
//https://answers.unity.com/questions/52747/how-i-can-create-a-cube-with-specific-coordenates.html
var dir = pointB.clone().sub(pointA);
var len = dir.length();
dir = dir.normalize().multiplyScalar(len * percentage);
return pointA.clone().add(dir);

}

//search: threejs two point draw a cylinder

function createCylinderByTwoPoints(pointX, pointY) {
//https://stackoverflow.com/questions/15316127/three-js-line-vector-to-cylinder
var direction = new THREE.Vector3().subVectors(pointY, pointX);
var orientation = new THREE.Matrix4();
orientation.lookAt(pointX, pointY, new THREE.Object3D().up);
orientation.multiply(new THREE.Matrix4().set(1, 0, 0, 0,
0, 0, 1, 0,
0, -1, 0, 0,
0, 0, 0, 1));
var edgeGeometry = new THREE.CylinderGeometry(2, 2, direction.length(), 8, 1);
var material = new THREE.MeshLambertMaterial({
color: 'orange'
});
var edge = new THREE.Mesh(edgeGeometry, material);
edge.applyMatrix(orientation);
//两个点的中心点 position based on midpoints - there may be a better solution than this
edge.position.x = (pointY.x + pointX.x) / 2;
edge.position.y = (pointY.y + pointX.y) / 2;
edge.position.z = (pointY.z + pointX.z) / 2;
return edge;
}

function createCylinderByTwoPoints2(vstart, vend) {
//https://stackoverflow.com/questions/15139649/three-js-two-points-one-cylinder-align-issue/15160850#15160850
var HALF_PI = Math.PI * .5;
var distance = vstart.distanceTo(vend) - 100;  //短一点的立方体
var position = vend.clone().add(vstart).divideScalar(2);
console.log("pos", position);

var material = new THREE.MeshLambertMaterial({
color: 0x0000ff
});
var cylinder = new THREE.CylinderGeometry(10, 10, distance, 4, 4, false);

var orientation = new THREE.Matrix4(); //a new orientation matrix to offset pivot
var offsetRotation = new THREE.Matrix4(); //a matrix to fix pivot rotation
var offsetPosition = new THREE.Matrix4(); //a matrix to fix pivot position
orientation.lookAt(vstart, vend, new THREE.Vector3(0, 1, 0)); //look at destination
offsetRotation.makeRotationX(HALF_PI); //rotate 90 degs on X
orientation.multiply(offsetRotation); //combine orientation with rotation transformations
cylinder.applyMatrix(orientation)

var mesh = new THREE.Mesh(cylinder, material);
mesh.position.set(position.x, position.y, position.z);
return mesh;
}

其他方法

shape +extrudeSettings +curvepath

From:https://www.cnblogs.com/xuejianxiyang/p/9809906.html

ThreeJS两个点作为起始坐标画一个立方体的更多相关文章

  1. 有趣html5(两)----使用canvas结合剧本画在画布上的简单图(html5另一个强大)

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...

  2. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  3. 利用canvas画一个实时时钟

    先放一张效果图: 下面是源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  4. Android画一个随意拖动的圆形

    import android.content.Context; import android.graphics.Bitmap; import android.graphics.BitmapFactor ...

  5. 用C语言画一个心

    用C语言图形库画一个心 --环家伟 这次我教大家用代码画一个心,这样你们就可以送给你们的女(男)朋友了.没找到对象的也可以用来表白啊. 1.首先,我去百度找了心形线的函数,如下: 2.  联系高中的数 ...

  6. OpenGL学习笔记(1) 画一个三角形

    最近找实习有一丢丢蛋疼,沉迷鬼泣5,四周目通关,又不想写代码,写篇笔记复习一下,要好好学图形学啊 用OpenGL画一个三角形 项目的简介 记录一下跟着learnOpenGL学习的过程 笔记里的代码放在 ...

  7. 使用H5 canvas画一个坦克

      具体步骤如下:   1. 首先做出绘图区,作为坦克的战场   <canvas id="floor" width="800px" height=&quo ...

  8. Java坦克大战 (二) 之画一个能动的圆圈代表坦克

    本文来自:小易博客专栏.转载请注明出处:http://blog.csdn.net/oldinaction 在此小易将坦克大战这个项目分为几个版本,以此对J2SE的知识进行回顾和总结,希望这样也能给刚学 ...

  9. 用canvas画一个的小画板(PC端移动端都能用)

    前言 本篇的内容主要包括: canvas标签简介 画板的功能简介 画板的JS部分(包括:1.获取画布 2.使画板全屏幕显示且自适应 3.如何绘制直线 4.绘画时的三种状态(鼠标点击.移动.离开)5.画 ...

随机推荐

  1. day 51 随机验证码, 验证登陆 ,以及 装饰器在函数中的应用

    前端很好的session 的例子 (随机验证码登陆) https://github.com/Endless-Clould/qianduan 参考: 验证码登录 https://www.cnblogs. ...

  2. iOS多线程---NSOperation介绍和使用

    1.  NSOperation实现多线程编程,需要和NSOperationQueue一起使用. (1)先将要执行的操作封装到NSOperation中 (2)将NSOperation对象添加到NSOpe ...

  3. 【OpenCV3】cvRound()、cvFloor()、cvCeil()函数详解

    函数cvRound().cvFloor().cvCeil()都是按照一种舍入方式将浮点型数据转换为整型数据. cvRound():返回跟参数最接近的整数值,即四舍五入: cvFloor()  :返回不 ...

  4. CSS3 :nth-child(n)使用注意

    :nth-child(n)    ---->选中某个元素,该元素必须是某个父元素下的第n个子元素: p:nth-child(n)   ---->选中p元素,且该p元素必须是某个父元素下的第 ...

  5. HTTP2.0探究

    http1.1和http2.0在请求379张图片的对比演示(HTTP2.0性能惊人). HTTP2.0是HTTP协议自1999年HTTP1.1发布后的首个更新,主要基于SPDY(读speedy).  ...

  6. Spring Security构建Rest服务-1201-Spring Security OAuth开发APP认证框架之实现服务提供商

    实现服务提供商,就是要实现认证服务器.资源服务器. 现在做的都是app的东西,所以在app项目写代码  认证服务器: 新建 ImoocAuthenticationServerConfig 类,@Ena ...

  7. MongoDB运行状态、性能监控,分析

    转载自这位仁兄:地址 mongostat详解 mongostat是mongdb自带的状态检测工具,在命令行下使用.它会间隔固定时间获取mongodb的当前运行状态,并输出.如果你发现数据库突然变慢或者 ...

  8. 友盟在部分手机上在进程被kill的情况下接收不到推送的问题

    app集成友盟推送后就能接收推送消息,即使在进程被kill的情况下也能接收.这个因为友盟有长连互保,用户设备中任何一个集成过友盟推送的app打开,即使他的app没打开也能启动push service, ...

  9. Chapter 3 Phenomenon——12

    Naturally, the ambulance got a police escort to the county hospital. 自然而然的,救护车让一个警察陪护到县医院去. 自然,救护车一路 ...

  10. protocol buffers的编码原理

    protocol buffers使用二进制传输格式传递消息,因此相比于xml,json来说要轻便很多. 示例:假设定义了一个Message message Test1 { required int32 ...