首页 > Web开发 > 详细

《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件(轨道控制)实现模型控制

时间:2019-12-14 10:46:49      阅读:96      评论:0      收藏:0      [点我收藏+]

3.1.2 正式代码结构 & ORBIT CONTROLS插件(轨道控制)

说明

本节内容属于插入节,《Three.js入门指南》这本书中,只是简单的介绍了一些概念,是一本基础的入门级别的书。  

在实践过程中,在学习过程中,我发现不论是官方,还是大牛的文章,都不是这样去结构话代码的。混乱,不易于管理维护。 

所以,为了以后继续学习,以及各种好处,有必要在这里,好好的熟悉一下这种良好的代码结构。 

 

此外,前面的学习,不难发现,我们不能通过鼠标拖动,来更好的观察我们的效果,为了实现这一目的,我们提前学习一下轨道控制。  我们首先以 ORBIT 轨道控制为切入点进行学习。 

其他的也都大同小异,学到的时候,就直接能上手了。同时,Three.js提供后给我们了多种不同的轨道控制。 而Orbit是最常用的一种。 

 

预览效果

在正式开始之前,先看一个即将实现的效果。

 

技术分享图片

 

我们可以使用鼠标对其进行放大缩小,转动,移动。

 

完整的代码架构   <!DOCTYPE html>

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

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        html,
        body {
            margin: 0;
            height: 100%;
        }
        
        canvas {
            display: block;
        }
    </style>
</head>

<body onload="draw();">

</body>
<!-- 引入Three.js -->
<script src="./three.js"></script>
<!-- 引入OrbitControls控制器js库 -->
<script src="./OrbitControls.js"></script>
<script>
    //定义渲染器变量
    var renderer;

    //定义初始化渲染器
    function initRender() {
        renderer = new THREE.WebGLRenderer({
            antialias: true //开启抗锯齿
        });
        renderer.setSize(window.innerWidth, window.innerHeight); //设置Canvas画布大小
        document.body.appendChild(renderer.domElement); //将画布渲染器绑定到新增的dom节点上;
    }

    //定义相机
    var camera;

    //初始化相机
    function initCamera() {
        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
        camera.position.set(0, 0, 400);
    }

    //定义场景
    var scene;

    //初始化场景
    function initScene() {
        scene = new THREE.Scene();
    }

    //定义光源
    var light;
    //初始化光源
    function initLight() {
        scene.add(new THREE.AmbientLight(0x404040)); //加入环境光
        light = new THREE.DirectionalLight(0xffffff); //加入平行光
        light.position.set(1, 1, 1); //设置光源位置
        scene.add(light); //光源也需要加入到场景
    }

    //定义模型初始化函数,要点是材质和基础模型
    function initModel() {
        var map = new THREE.TextureLoader().load("./jay.jpg"); //皮肤
        var material = new THREE.MeshLambertMaterial({ //材质
            map: map
        });
        //定义基础模型,并贴上上面的定义的材质
        var cube = new THREE.Mesh(new THREE.BoxGeometry(100, 100, 100, 1, 1, 1), material);
        scene.add(cube);
    }

    //定义用于互交的轨道控制器
    var controls; //定义控制器变量

    function initControls() {
        //定义控制器核心            
        controls = new THREE.OrbitControls(camera, renderer.domElement);

        // 如果使用animate方法时,将此函数删除
        // controls.addEventListener(‘change‘, render);
        //以下都是为了满足各种需求的各种控制器配置参数
        controls.enableDampling = true; //使动画循环使用时阻尼或自转 意思是否有惯性
        controls.enableZoom = false; //是否允许缩放
        controls.enablePan = false; //是否开启鼠标右键拖拽
        controls.autoRotate = true; //是否允许自动旋转
        controls.dampingFactor = 0.25; //动态阻尼系数:就是鼠标拖拽旋转灵敏度
        controls.minDistance = 200; //设置相机距离原点的最近距离;
        controls.maxDistance = 600; //设置相机距离原点的最远距离;
    }

    function animate() {
        //更新控制器
        controls.update();
        render();
        requestAnimationFrame(animate);
    }

    //定义渲染触发函数
    function render() {
        renderer.render(scene, camera);
    }

    //窗口变动触发的函数
    function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camere.updateProjectionMatrix();
        render();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

    //全部方法入口
    function draw() {
        initRender();
        initScene();
        initCamera();
        initModel();
        initLight();
        initControls();

        animate();
        window.onresize = onWindowResize;
    }
</script>

</html>

 

 

不难发现,这种代码结构非常的清晰明了,易于维护和修改。

 

同时,这里给出了Orbit控制器的定义方式,需要注意的是,我们需要单独引入ORBIT CONTROLS插件(轨道控制)的js库:OrbitControls.js

《Three.js 入门指南》3.1.2 - 一份整齐的代码结构以及使用ORBIT CONTROLS插件(轨道控制)实现模型控制

原文:https://www.cnblogs.com/jaycethanks/p/12037987.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!