效果图:
由于OpenGL Core Profile与 大多数平台上WebGL渲染器的限制,无论如何设置该值,线宽始终为1。
可以用Line2和MeshLine库来设置线宽,
这里介绍第三种方法:使用大佬写的three.path.js库
https://github.com/shawn0326/three.pathhttps://github.com/shawn0326/three.path1、就正常搭建threejs环境,将scene场景搭建出来,
var scene = new THREE.Scene();
scene.background = new THREE.Color(0.3, 0.3, 0.3);
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 1000 );
camera.position.set( 0, 15, 0 );
var renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set(0, 0, 0);
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff);
directionalLight.position.set( 2, 2, - 3 );
directionalLight.position.normalize();
scene.add( directionalLight );
2、使用three.path库将路线点创建连续移动点
PathPointList.set 设置属性:
/**
* set points
* @param {THREE.Vector3[]} 路线点集合
* @param {number} 拐角处的圆角半径,如果为0就是直角
* @param {number} 拐角处的圆滑程度。默认是10
* @param {number} 朝向,默认为自动向上
* @param {boolean} 线段是否收尾闭合
*/
list.set(points, 0.1, 10, undefined, false);
// 线路径
var points = [
new THREE.Vector3(-5, 0, 5),
new THREE.Vector3(-5, 0, -5),
new THREE.Vector3(5, 0, -5),
new THREE.Vector3(5, 0, 5)
];
var up = new THREE.Vector3(0, 1, 0);
// 创建路线点列表
var pathPointList = new THREE.PathPointList();
pathPointList.set(points, 0.5, 10, up, false);
3、创建 geometry
设置线宽和是否带箭头
var geometry = new THREE.PathGeometry();
geometry.update(pathPointList, {
width: 1,
arrow: false
});
4、加载纹理,创建材质
var texture = new THREE.TextureLoader().load( 'images/jiantou.png', function( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
});
// 创建材质
var material = new THREE.MeshPhongMaterial({
color : 0xFFFFFF,
depthWrite: true,
transparent: true,
opacity: 1,
side: THREE.DoubleSide,
map: texture,
});
5、生成Mesh对象,加载到场景中
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>three.path corner</title>
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
font-family: Monospace;
background-color: #f0f0f0;
margin: 0px;
overflow: hidden;
}
#info {
position: absolute;
top: 10px;
width: 100%;
color: #fff;
text-align: center;
}
a {
color: #ff0
}
</style>
</head>
<body>
<div id="container" ></div>
<div id="info">
corner radius
</div>
</body>
<script src="js/libs/three.js"></script>
<script src="js/libs/OrbitControls.js"></script>
<script src="../build/three.path.js"></script>
<script>
var scene = new THREE.Scene();
scene.background = new THREE.Color(0.3, 0.3, 0.3);
var camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .1, 1000 );
camera.position.set( 0, 15, 0 );
var renderer = new THREE.WebGLRenderer( { antialias: true, alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setPixelRatio( window.devicePixelRatio );
container.appendChild( renderer.domElement );
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.target.set(0, 0, 0);
var ambientLight = new THREE.AmbientLight(0xffffff);
scene.add( ambientLight );
var directionalLight = new THREE.DirectionalLight( 0xffffff);
directionalLight.position.set( 2, 2, - 3 );
directionalLight.position.normalize();
scene.add( directionalLight );
// 线路径
var points = [
new THREE.Vector3(-5, 0, 5),
new THREE.Vector3(-5, 0, -5),
new THREE.Vector3(5, 0, -5),
new THREE.Vector3(5, 0, 5)
];
var up = new THREE.Vector3(0, 1, 0);
// 创建路线点列表
var pathPointList = new THREE.PathPointList();
pathPointList.set(points, 0.5, 10, up, false);
// 创建 geometry
var geometry = new THREE.PathGeometry();
geometry.update(pathPointList, {
width: 1,
arrow: false
});
// 加载纹理
var texture = new THREE.TextureLoader().load( 'images/jiantou.png', function( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
});
// 创建材质
var material = new THREE.MeshPhongMaterial({
color : 0xFFFFFF,
depthWrite: true,
transparent: true,
opacity: 1,
side: THREE.DoubleSide,
map: texture,
});
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
function render() {
requestAnimationFrame( render );
controls.update();
if(texture) {
texture.offset.x -= 0.03;
texture.repeat.x = 0.4;
}
renderer.render( scene, camera );
}
render();
</script>
</html>