three.js 简单画线

最新推荐文章于 2024-03-29 09:43:00 发布

风起未来

最新推荐文章于 2024-03-29 09:43:00 发布

阅读量3.8k

点赞数 4

分类专栏： threeJs 文章标签： three.js

本文链接：https://blog.csdn.net/qq_34068082/article/details/119385762

版权

threeJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近需要用到 three.js 开始接触

但是在简单得画线都一直报错，

报错THREE.Geometry is not a constructor

基本得引入都没问题；

最后才发现 new THREE.Geometry()；125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry

代码如下

<!DOCTYPE html>
<html>
<head>
    <title>Line</title>
    <style type="text/css">
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
<script type="text/javascript" src="../build/three.js"></script>
<!--  module  text/javascript -->
<script type="text/javascript"  >

    // 渲染器--------------------
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    // 摄像机---------------------
    var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
    camera.position.set( 0, 0, 100 );
    camera.lookAt( 0, 0, 0 );
    // 场景-----------------------
    var scene = new THREE.Scene();
    //--------------------------

    //create a blue LineBasicMaterial
    var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

    /*
    125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry。
    var 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 geometry = new THREE.BufferGeometry()
    const pointsArray = new Array()
    //加2000个顶点，范围为-1到1
    for(let i = 0;i<2000;i++){
        const x = Math.random() * 2 - 1 //范围在-1到1
        const y = Math.random() * 2 - 1
        const z = Math.random() * 2 - 1
        pointsArray.push(new THREE.Vector3(x,y,z))
        //顶点
        //geometry.vertices.push(new THREE.Vector3(x,y,z))
    }
    //用这个api传入顶点数组
    geometry.setFromPoints(pointsArray)

    var line = new THREE.Line( geometry, material );
    scene.add( line );

    renderer.render( scene, camera );
</script>
</body>
</html>

风起未来

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
3
评论
three.js 简单画线

最近需要用到three.js 开始接触但是在简单得画线都一直报错，基本得引入都没问题；最后才发现 new THREE.Geometry()；125版本就不再支持这个api了，如果还需要就用他的子类BufferGeometry代码如下<!DOCTYPE html><html><head> <title>Line</title> <style type="text/css"> body.
复制链接

扫一扫