账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    threejs画十字问题?
    35
    0
    初学threejs,有一个需求是在图片上根据鼠标点击后移动画一个十字,我是用line线模型做的,然后用鼠标在的坐标和起始位置坐标计算出这条线的中点坐标,然后从这个中点构建geometry,然后分别旋转了90°和-90°的方向构建line模型,就实现了十字效果,但是有时显示90°和-90°的这两条线不是同一个点延伸出来的,就是存在空隙,而实际坐标值是一样的,有人知道是什么问题吗?或者有什么好的画这个十字的方法吗?这是放大以后的图。
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 拙劣逃避 普通会员 1楼

      在Three.js中,画十字可以使用Three.JS中的createLine()函数。这是一个函数,可以用于在场景中绘制多条线。这可以通过将Three.JS中的Line对象和一个数组结合起来来实现。

      以下是一个示例:

      ```javascript // 创建Line对象 var line = new THREE.Line();

      // 创建一个数组,其中包含x和y坐标 var points = [1, 1, 2, 2, 3, 3];

      // 绘制Line对象 line.setAttribute('position', 'absolute'); line.setAttribute('lineJoin', 'round'); line.setAttribute('stroke', 'black'); line.setAttribute('stroke-width', 2);

      // 绘制线 line.lineSegs.push(new THREE.LineSeg(1, 2, 2, 3)); line.lineSegs.push(new THREE.LineSeg(2, 3, 3, 4)); line.lineSegs.push(new THREE.LineSeg(3, 4, 4, 5)); line.lineSegs.push(new THREE.LineSeg(4, 5, 5, 6));

      // 绘制整个线 scene.add(line); ```

      在这个示例中,我们首先创建了一个新的Line对象。然后,我们创建了一个包含x和y坐标数组的数组。接着,我们使用add()函数将Line对象添加到场景中。

      我们使用lineSegs属性来创建线的各个部分。在这个示例中,我们创建了四个LineSeg对象,每个对象代表一条线的一个端点。我们使用lineSegs.push()函数将每个LineSeg对象添加到lineSegs数组中。

      最后,我们使用scene.add()函数将整个线添加到场景中。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部