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

最新推荐文章于 2023-12-15 17:42:39 发布

「已注销」

最新推荐文章于 2023-12-15 17:42:39 发布

阅读量9.1k

点赞数 11

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/81625996

版权

首先，看一下案例实现的一下功能。
这里写图片描述
示例：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>

此时场景按键完毕，如果不出错的情况下，界面应该是一片黑暗，左上角有一个pfs显示模块，打开控制台查看是否报错。
这里写图片描述
场景正常开始和结束，然后进行下一步。

2、向场景中加入网格

首先，绘制线段的话，可以在场景中直接绘制，而不考虑 z轴的存在。
但是，那样绘制出来的仅仅是二维的线段，而这里绘制的是有三个维度的线条，可以通过鼠标进行操控，因此需要绘制一个网格来作为画板。
当然，你也可以直接绘制一个平面然后绕x轴旋转9

最低0.47元/天解锁文章

「已注销」

关注

11
点赞
踩
36

收藏

觉得还不错? 一键收藏
16
评论
案例01 - 通过鼠标点击平面实现任意画线功能

首先，看一下案例实现的一下功能。示例：http://ithanmang.com/drawline/index.html操作步骤：鼠标指针移入三维网格平面之中，按下左键即可画线，画线过程中，若鼠标移出平面则停止绘制，再次移入则进行上次继续画线，鼠标右键结束绘制，Esc键退回上一步骤。案例需求：案例可以用于在三维场景中绘制逃生路线、以及方向线绘制、测量，物体的移动路线绘制等场景。...
复制链接

扫一扫