#2 绘制线条

// 设置渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 设置相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 500);
camera.position.set(0,0,100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

// 创建场景
const scene = new THREE.Scene();

// 定义材质
// 对于线条 可以使用 LineBasicMaterial || LineDashedMaterial
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

// 添加几何体
// 添加顶点信息
// 可以使用 BufferGeometry 性能更好 这里为了简洁使用 Geometry
const geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));

const line = new THREE.Line(geometry, material);

scene.add(line);
renderer.render(scene, camera);
绘制线条.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容