three.js鼠标控制场景旋转

最新推荐文章于 2024-05-31 17:11:38 发布

zhuoyunluo77

最新推荐文章于 2024-05-31 17:11:38 发布

阅读量1.4k

点赞数

分类专栏： three.js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/w__qwwq/article/details/126728304

版权

一、效果图：

鼠标控制旋转

二、代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标操作三维场景旋转缩放</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
        body{
     
            font-family: Monospace;
            background-color: #f0f0f0;
            margin: 0px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <script src="js/three.js"></script>
    <script src="js/stats.min.js"></script>
    <script>
        var container, stats;

        var camera, scene, renderer;

        var group;

        var targetRotation = 0;
        var targetRotationOnMouseDown = 0;

        var mouseX = 0;
        var mouseXOnMouseDown = 0;

        var windowHalfX = window.innerWidth / 2;
        var windowHalfY = window.innerHeight / 2;

        init();
        animate();

        function  init()
        {
     
            container = document.createElement('div');
            document.body.appendChild(container);

            var