three.js（二）尝试OrbitControls

最新推荐文章于 2024-08-30 19:45:00 发布

青柠可乐

最新推荐文章于 2024-08-30 19:45:00 发布

阅读量4k

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/Wendelle/article/details/80058486

版权

three.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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() {
            //添加坐标系
            var ax = new THREE.AxesHelper(100);
            this.scene = new THREE.Scene();
            //全局雾化
            this.scene.fog = new THREE.Fog(0xffffff, 0.015, 1000)
            this.scene.add(ax);
        },
        initCamera: function() {
            this.camera = new THREE.PerspectiveCamera(60, this.width / this.height, 0.1, 1000);
            this.camera.position.set(100, 100, 100);
            this.camera.lookAt(0, 0, 0);
        },
        initRenderer: function() {
            this.renderer = new THREE.WebGLRenderer({
                antialias: true
            })
            this.renderer.setSize(this.width, this.height);
            this.renderer.setClearColor(0xD1BEBE);
            document.getElementById('canvas').appendChild(this.renderer.domElement);
        },
        initLight: function() {
            var light = new THREE.DirectionalLight(0x695DEE);
            light.position.set(100, 0, 10);
            this.scene.add(light);
        },
        initGeometry: function() {
            var geometry = new THREE.CubeGeometry(25, 55, 20, 3, 3, 3);
            //使用Phong光照模型的材质，适合镜面、金属等
            var material = new THREE.MeshPhongMaterial({ color: 0xF2415E, wireframe: true });
            this.cube = new THREE.Mesh(geometry, material);
            this.scene.add(this.cube);
        },
        initControl: function() {
            var controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
            // 使用阻尼,指定是否有惯性
            controls.enableDamping = true;
            // 动态阻尼系数 就是鼠标拖拽旋转灵敏度，阻尼越小越灵敏
            controls.dampingFactor = 0.25;
            // 是否可以缩放
            controls.enableZoom = true;
            //是否自动旋转
            controls.autoRotate = false;
            //设置相机距离原点的最近距离
            controls.minDistance = 10;
            //设置相机距离原点的最远距离
            controls.maxDistance = 600;
            //是否开启右键拖拽
            controls.enablePan = true;
            this.controls = controls;
        },
        render: function() {
            //这里不能直接用this.render,第二次调用自身时,this就变成了window
            //requestAnimationFrame的this是window对象，如同setTimeout,setinterval
            requestAnimationFrame(this.render.bind(this));
            this.cube.rotation.y += 0.01;
            this.controls.update();
            this.renderer.render(this.scene, this.camera);
        },
        init: function() {
            window.onresize = onWindowResize;
            this.initScene();
            this.initCamera();
            this.initRenderer();
            this.initLight();
            this.initGeometry();
            this.initControl();
            this.render();
        },
    }

    function onWindowResize() {
        threeObj.camera.aspect = document.documentElement.clientWidth / document.documentElement.clientHeight;
        threeObj.camera.updateProjectionMatrix();
        threeObj.renderer.setSize(threeObj.width, threeObj.height);
        threeObj.renderer.render(threeObj.scene, threeObj.camera);
    }
    threeObj.init();
    </script>
</body>

</html>

效果如图

光源是在X轴正方向的方向光。鼠标滚轮缩放，左键改变视角，右键可以拖动。

青柠可乐

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
three.js（二）尝试OrbitControls

OrbitControls是用于threejs的轨道控制插件，试了下在threejs里建立坐标系，使用Phong光照模型材质，开启雾化效果。做了个简单的demo.代码如下。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;简
复制链接

扫一扫