three.js 创建线

最新推荐文章于 2024-04-25 22:36:02 发布

A873054267

最新推荐文章于 2024-04-25 22:36:02 发布

阅读量751

点赞数

分类专栏： webgl

本文链接：https://blog.csdn.net/A873054267/article/details/106611574

版权

webgl 专栏收录该内容

35 篇文章 8 订阅

订阅专栏

初学three，发现创建线的代码有一些区别，以下两种方式可以发现，最后实际上都是以line来构建渲染对象最终，添加到scene中

还有一种方式是直接根据mesh来创建，目前还无法掌握，暂不列

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/three.min.js"></script>
    <script src="../js/OrbitControls.js"></script>  <!--引入控制js，可以旋转视角-->

    <link rel="stylesheet" href="../css/common.css">
</head>
<body>
<div class="ys-absolute-container" id="box" style="overflow: hidden"></div>
<script src="../js/init_bak.js"></script>
<script>
    let ele=document.getElementById('box')
    let app=new viewer(ele,{})
    let scene=app.scene
    let camera=app.camera
    let renderer=app.renderer
    //create a blue LineBasicMaterial
    var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );  // 定义线条的材料，接收字典类型的参数

        //基本方式
    var geometry = new THREE.Geometry();  // 声明一个几何体geometry

    geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );
    geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );


    var points=[new THREE.Vector3(-20,0,0),new THREE.Vector3(0,20,0)]
    //buffergeometry方式传入坐标，此种方式还可以传入顶点属性，颜色等信息，后续遇到再学习
    //这种方式更加高效
   let   geo = new THREE.BufferGeometry().setFromPoints( points );

    var line = new THREE.Line( geometry, material );
    scene.add(line);
    var line2 = new THREE.Line( geo, material );  // 根据材料创建线条
    scene.add(line2);
    var axes = new THREE.AxesHelper(10); //红x 绿y 蓝z
    scene.add(axes);
    renderer.render( scene, camera );

</script>
</body>
</html>

A873054267

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js 创建线

初学three，发现创建线的代码有一些区别，以下两种方式可以发现，最后实际上都是以line来构建渲染对象最终，添加到scene中还有一种方式是直接根据mesh来创建，目前还无法掌握，暂不列<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/thr
复制链接

扫一扫

专栏目录