案例01 - 通过鼠标点击平面实现任意画线功能

最新推荐文章于 2025-03-24 15:03:58 发布

「已注销」

最新推荐文章于 2025-03-24 15:03:58 发布

阅读量9.3k

点赞数 11

分类专栏： threejs

本文链接：https://blog.youkuaiyun.com/ithanmang/article/details/81625996

版权

该博客介绍了如何通过鼠标点击在3D场景中创建可交互的线条，包括设置三维场景、加入网格、获取鼠标坐标、限定鼠标点击范围以及添加键盘事件以实现画线撤销功能。案例可用于绘制逃生路线、方向线和测量等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先，看一下案例实现的一下功能。
这里写图片描述
示例：http://ithanmang.com/drawline/index.html

操作步骤：鼠标指针移入三维网格平面之中，按下左键即可画线，画线过程中，若鼠标移出平面则停止绘制，再次移入则进行上次继续画线，鼠标右键结束绘制，Esc键退回上一步骤。

案例需求：案例可以用于在三维场景中绘制逃生路线、以及方向线绘制、测量，物体的移动路线绘制等场景。

实现步骤

1、三维场景

创建scene、camera、renderer、controls，等个场景所需对象。具体代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画直线</title>
    <style>
        body {
    
            margin: 0;
            overflow: hidden;
        }
    </style>
    <script src="libs/three.js"></script>
    <script src="libs/Detector.js"></script>
    <script src="libs/stats.js"></script>
    <script src="libs/OrbitControls.js"></script>
</head>
<body>
<script>

    var scene, camera, renderer, controls;
    var stats = initStats();

    /* 地面网格所需变量 */
    var length = 200;  /*线段长度*/

    /* 场景 */
    function initScene() {
    

        scene = new THREE.Scene();

    }

    /* 相机 */
    function initCamera() {
    

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(0, 200, 250);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

    /* 渲染器 */
    function initRender() {
    

        renderer = new THREE.WebGLRenderer({
    antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

    }

    /* 灯光 */
    function initLight() {
    

        var ambientLight = new THREE.AmbientLight(0x333333);
        scene.add(ambientLight);

        var directionalLight = new THREE.DirectionalLight(0xffffff, 1);
        directionalLight.position.set(100, 300, 200);
        scene.add(directionalLight);

    }

    /* 控制器 */
    function initControls() {
    

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        /* 其它属性默认 */

    }

    /* 场景内容 */
    function initContent() {
    

    }

    /* 更新数据 */
    function update() {
    

        stats.update();
        controls.update();

    }

    /* 性能插件 */
    function initStats() {
    

        var stats = new Stats();

        stats.setMode(0);
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.right = '0px';

        document.body.appendChild(stats.domElement);

        return stats;

    }

    /* 窗口自动适应 */
    function onWindowResize() {
    

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    /* 循环调用 */
    function animate() {
    

        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        update();

    }

    /* 初始化 */
    function init() {
    

        /* 兼容性判断 */
        if (!Detector.webgl) Detector.addGetWebGLMessage();

        initScene();
        initCamera();
        initRender();
        initLight();
        initContent();
        initControls();

        /* 事件监听 */
        window.addEventListener('resize', onWindowResize, false);
    }

    /* 初始加载 */
    (function () {
    

        console.log('three start...');

        init();
        animate();

        console.log('three end...');

    })();

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