实现计划1——多顶点
形式：百度进去的例子，本人改改。原例子：https://wow.techbrood.com/fid…。他这里是依据有多少个定点，渲染多少段色彩，如果须要实现突变的线，则须要增加很多个定点，比方我这里增加了6个点造成的直线，再push六个色彩就好了。
*留神：必须要这个例子中73版本的ThreeJS文件能力胜利渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - lines - colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="./three.73.js"></script>
<script type="module">
// 创立场景对象Scene
const scene = new THREE.Scene();
// 创立相机对象 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创立渲染器对象
const renderer = new THREE.WebGLRenderer();
//设置渲染区域尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
//body元素中插入canvas对象
document.body.appendChild(renderer.domElement);
// 次要代码————————————————
function initObject() {
var geometry = new THREE.Geometry(); console.log(geometry)
var material = new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors
});
var color1 = new THREE.Color(0x444444),
color2 = new THREE.Color(0xFF0000),
color3 = new THREE.Color(0x0000CD),
color4 = new THREE.Color(0x9932CC),
color5 = new THREE.Color(0x00FFFF),
color6 = new THREE.Color(0x00FF7F);
// 线的材质能够由多点的色彩决定
var p1 = new THREE.Vector3(0, 0, -100);
var p2 = new THREE.Vector3(50, 0, -100);
var p3 = new THREE.Vector3(100, 0, -100);
var p4 = new THREE.Vector3(150, 0, -100);
var p5 = new THREE.Vector3(200, 0, -100);
var p6 = new THREE.Vector3(250, 0, -100);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices.push(p3);
geometry.vertices.push(p4);
geometry.vertices.push(p5);
geometry.vertices.push(p6);
geometry.colors.push(color1, color2, color3, color4, color5, color6);
var line = new THREE.Line(geometry, material);
scene.add(line);
}
initObject();
//设置相机地位
camera.position.z = 40;
//执行渲染操作
renderer.render(scene, camera);
</script>
</body>
</html>实现计划2——
发表回复