极客观点
项目管理
HarmonyOS
我只画出来虚线和实线，渐变颜色的线怎么画呢？百度的代码要不就是.vertices.push报错，要不就是啥都不报错但是视图出不来....
里面引用的两个JS文件是官网下载three-master文件夹里的。https://threejs.org/
线段代码：
具体代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first three.js app</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<script src="three.min.js"></script>
<script src="OrbitControls.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);
// 线
const lineMaterial = new THREE.LineBasicMaterial({ color: '#fff' });
//声明一个几何体对象Geometry
var lineGeometry = new THREE.BufferGeometry();
//顶点坐标添加到geometry对象
lineGeometry.setFromPoints([new THREE.Vector3(0, 10, 10), new THREE.Vector3(10, 20, 20), new THREE.Vector3(20, 30, 30)]);
var lineMesh = new THREE.Line(lineGeometry, lineMaterial);
scene.add(lineMesh); //线条对象添加到场景中
// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
var axesHelper = new THREE.AxesHelper(250);
scene.add(axesHelper);
//设置相机位置
camera.position.x = 30;
camera.position.y = 20;
camera.position.z = 40;
function render() {
renderer.render(scene, camera);//执行渲染操作
}
render();
var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
controls.addEventListener('change', render);//监听鼠标、键盘事件
</script>
</body>
</html>
目前解决方案：根据https://wow.techbrood.com/fid...这个例子举一反三的，实现代码详见：https://segmentfault.com/a/11...