three.js（二）尝试OrbitControls

最新推荐文章于 2025-07-28 15:08:08 发布

原创

最新推荐文章于 2025-07-28 15:08:08 发布 · 4.2k 阅读

收录于

OrbitControls是用于threejs的轨道控制插件，试了下在threejs里建立坐标系，使用Phong光照模型材质，开启雾化效果。做了个简单的demo.代码如下。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>简单Demo</title>
    <script src='js/three.min.js'></script>
    <script src='js/OrbitControls.js'></script>
    <style>
    * {
        margin: 0;
        padding: 0
    }

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #canvas {
        width: 100%;
        height: 100%;
    }
    </style>
</head>

<body>
    <div id="canvas">
    </div>
    <script>
    var threeObj = {
        scene: null,
        camera: null,
        cube: null,
        renderer: null,
        controls: null,
        width: document.documentElement.clientWidth,
        height: document.documentElement.clientHeight,
        initScene: function() {
            /