1,先看效果:
2,代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个线条组合曲线CurvePath</title>
<script src="../three.js"></script>
<script src="../OrbitControls.js"></script>
</head>
<body>
<script>
// 1,创建场景对象
var scene = new THREE.Scene();
// -------------------------关键代码 start-----------------------------------
// 2,创建普通模型对象
var geometry = new THREE.Geometry();
var R = 200;
var p1 = new THREE.Vector3(40,0,0);
var p2 = new THREE.Vector3(-40,0,0);
// 创建圆弧
var arc = new THREE.ArcCurve(0,0,40,0,Math.PI,true);
// 创建直线(x轴正向的直线)
var line1 = new THREE.LineCurve3(p1,new THREE.Vector3(40,100,0));
// 创建直线(x轴负向的直线)
var line2 = new THREE.LineCurve3(p2,new THREE.Vector3(-40,100,0));
// 通过组合曲线CurvePath可以把多个圆弧线、样条曲线、直线等多个曲线合并成一个曲线。
var curvePath = new THREE.CurvePath();
curvePath.curves.push(line1,arc,line2);
var points = curvePath.getPoints(100);
geometry.setFromPoints(points);
// 创建材质对象
var material = new THREE.LineBasicMaterial({color:0xff11dd});
var line = new THREE.Line(geometry,material);
scene.add(line);
// -------------------------关键代码 end-----------------------------------
// 3,创建环境光对象
var ambient = new THREE.AmbientLight({color:0xffffff});
scene.add(ambient);
// 4,创建相机对象
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 150;
var camera = new THREE.OrthographicCamera(-s*k,s*k,s,-s,-1000,1000);
camera.position.set(200,300,200);
camera.lookAt(scene.position);
// 创建坐标系对象
var axes = new THREE.AxesHelper(500);
scene.add(axes);
// 5,创建渲染器对象
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height);
document.body.appendChild(renderer.domElement);
function render(){
renderer.render(scene,camera);
}
render();
// 创建鼠标控制对象
var controls = new THREE.OrbitControls(camera,renderer.domElement);
controls.addEventListener('change',render);
</script>
</body>
</html>