js 动态画直线

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>测试</title>
    <script src="jquery-3.3.1.min.js"></script>
    <style>
        canvas {
            background: url("Office_CAD2.jpg");
        }
    </style>
</head>
<body>
    <canvas id="gycanvas"></canvas>
    <script>
        //铺满屏幕
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        document.getElementById("gycanvas").setAttribute("width", width);
        document.getElementById("gycanvas").setAttribute("height", height);
        //初始化
        var context = document.getElementById("gycanvas").getContext("2d");
        var lastX=0;
        var lastY=0;
        //动态的画线
        function drawline(x, y) {
            console.log(x, y);
            context.moveTo(lastX, lastY);
            context.lineTo(x, y);
            context.lineWidth = 5;
            context.strokeStyle = "red";
            context.stroke();
            lastX = x;
            lastY = y;
        }
    </script>
    坐标x<input type="text" id="x" />
    坐标y<input type="text" id="y" />
    <button id="btn" onclick="drawline($('#x').val(),$('#y').val())">划线</button>
</body>

</html>

THREE.js 是一个基于 WebGL 的库,用于轻松创建和展示复杂的 3D 和 2D 图形。在 THREE.js 中绘制直线通常涉及到使用线段几何体(LineSegments 或 Line),而不是传统的几何形状如立方体、球体等。下面我将简述如何在 THREE.js 中绘制一条直线。 ### 步骤 1:引入 THREE.js 首先,你需要在 HTML 文件中包含 THREE.js 库文件。如果你使用的是 CDN 链接,HTML 文件中应该包含以下代码: ```html <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> ``` ### 步骤 2:设置场景、相机和渲染器 初始化这三个基本组件,创建场景(scene)、相机(camera)和渲染器(renderer),然后设置它们的位置。 ```javascript const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); camera.position.z = 5; const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); ``` ### 步骤 3:创建直线 你可以使用 `THREE.Line` 或 `THREE.LineSegments` 来创建直线。下面是一个使用 `THREE.LineSegments` 创建直线的例子: ```javascript // 定义直线的数据点数组 const geometry = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(-10, -10, 0), new THREE.Vector3(10, -10, 0) ]); // 定义材质颜色,例如红色 const material = new THREE.LineBasicMaterial({ color: 0xff0000 }); // 使用几何体和材质创建线段 const line = new THREE.LineSegments(geometry, material); // 将线段添加到场景中 scene.add(line); ``` ### 步骤 4:调整并显示渲染 最后,调整摄像机视图,并启动渲染循环。 ```javascript // 设置渲染器的渲染目标和清零颜色 renderer.render(scene, camera); ``` 为了动效果,你可以使用 `requestAnimationFrame` 进行实时更新: ```javascript function animate() { requestAnimationFrame(animate); renderer.render(scene, camera); } animate(); ``` 以上步骤概述了如何在 THREE.js 中绘制直线。记得根据实际需求调整代码中的坐标值、颜色和其他参数。THREE.js 提供了许多功能丰富的类和方法,允许你进行更复杂、精细的图形操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值