创建线
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>My first three.js app</title>
<style>
* { margin: 0; padding: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
// 相机 正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）、全景相机（CubeCamera）和3D相机（StereoCamera）。
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 600 );
// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
// 实线
function createLine(){
let geometry = new THREE.Geometry();
const p1 = new THREE.Vector3(-10,0,0);
const p2 = new THREE.Vector3(0,10,0);
const p3 = new THREE.Vector3(10,0,0);
geometry.vertices.push(p1, p2, p3);
//注意这里使用的是LineBasicMaterial 实线
//https://threejs.org/docs/index.html#api/zh/materials/LineBasicMaterial
let material = new THREE.LineBasicMaterial({
color:0xff0000
});
let line = new THREE.Line(geometry,material);
return line;
}
// 虚线
function createDashedLine(){
let geometry = new THREE.Geometry();
const p1 = new THREE.Vector3(15,15,0);
const p2 = new THREE.Vector3(-15,2,0);
geometry.vertices.push(p1, p2);
let material = new THREE.LineDashedMaterial({
color:0xff0000,
dashSize:3, // 虚线的大小，是指破折号和间隙之和。默认值为 3。
gapSize:1, // 间隙的大小，默认值为 1。
linewidth:1, // 控制线宽。默认值为 1。
scale: 1 // 线条中虚线部分的占比。默认值为 1。
});
// 这里可以换了Objects,添加一个顶点看看效果，即 Line 和 LineLoop
let line = new THREE.LineSegments(geometry,material);
//计算LineDashedMaterial所需的距离的值的数组。对于几何体中的每一个顶点，这个方法计算出了当前点到线的起始点的累积长度。
line.computeLineDistances();
return line;
}
var line = createLine();
// var line = createDashedLine();
scene.add( line );
camera.position.z = 100;
function render() {
renderer.render( scene, camera );
}
render();
</script>
</body>
</html>
效果：
createLine()
createDashedLine()
替换连线的 Objects 为 Line
Line
效果：
Line
替换连线的 Objects 为 LineLoop
LineLoop
LineLoop
网友评论