three.js 画一个旋转的立方体

青旅半醒 2022-06-05 05:44 194阅读 0赞

## 学习交流欢迎加群：789723098，博主会将一些demo整理共享 ##

试想一下，如果我们的周围的事物都是静止的，那将是多么无聊的一个世界；同样的，我们创建出的场景如果是静止的，只能满足我们一时的视觉体验，时间一长会让我们感觉到枯燥无聊，所以要营造好的视觉体验和享受，就必须让场景动起来，这样才能给我们以震撼的效果。接下来做一个旋转的立方体实例。在此之前有一个问题：

无论学WebGL还是Three.js，为什么人们总爱拿立方体做文章，或者从画立方体开始？我自己总结的有以下几点原因：

(1)立方体拓扑结构简单，顶点数少，方便绘制

(2)很多的场景贴图都会用到立方体，例如天空盒

(3)天空盒又是创建大型场景贴图或场景视觉导航必不可少的神器

基于以上三点，我也是从死磕立方体开始的。

首先必须先创建一个立方体，这个可以参考我另一片博客：[点击打开链接][Link 1]，里面有几种基本几何的创建示例。立方体创建好之后，就要让它动起来，那怎样让其旋转起来呢？要旋转首先必须绕一根目标轴旋转，这里我们选择绕X、Y、Z轴旋转，其次要考虑旋转的速度，为什么会发生旋转这个过程？这里举一个例子，大家小时候可能玩过一个游戏，你会拉着小伙伴的手，然后站在原地转起来，这里你就是目标轴，当你给定一个旋转速度，你的小伙伴也会跟着你转起来，当你停下，你的小伙伴也就停下，上边有可能举得不太恰当（ps:有时候也会把小伙伴甩出去），那这个过程的代码实现就是：

cubeMesh.rotation.x += 0.02;
    cubeMesh.rotation.y += 0.02;
    cubeMesh.rotation.z += 0.02;

这里我给立方体设置的旋转速度为0.02。

旋转速度设置好之后，就要让场景动起来，three.js有一个专门让场景动起来的动画函数：

requestAnimationFrame();//括号里面是你动画所在部分，一般是渲染函数

有了以上两点之后，就可以正式构建一个动画场景啦，先来看看最终的实现效果（忽略图片上面的网址，是用录制屏幕的软件生成的水印，这个软件叫：Bandicam,很好用，推荐给大家）：

![Center][]

**代码实现部分：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>threejs-rotating-cube</title>
        <style>
            body{
                font-family: Monospace;
                background: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <script type="text/javascript" src="build/three.js"></script>
    <script type="text/javascript" src="js/Detector.js"></script>
    <script type="text/javascript">
        //检测webgl的支持情况
        if(!Detector.webgl) {Detector.addGetWebGLMessage();}
        var container;
        var scene, camera, renderer;
        var cubeMesh;
        main();
        render();
    
        function main(){
            //添加一个div元素
            container = document.createElement('div');
            document.body.appendChild(container);
    
            scene = new THREE.Scene();//创建新场景
    
            //添加一个透视相机
            camera = new THREE.PerspectiveCamera(30,
                window.innerWidth/window.innerHeight, 1, 1000);
            camera.position.set(100, 300, 100);//设置相机位置
            camera.lookAt(new THREE.Vector3(0,0,0));//让相机指向原点
    
            //渲染
            //antialias:true增加抗锯齿效果
            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setClearColor(new THREE.Color(0x000000));//设置窗口背景颜色为黑
            renderer.setSize(window.innerWidth, window.innerHeight);//设置窗口尺寸
            //将renderer关联到container，这个过程类似于获取canvas元素
            container.appendChild(renderer.domElement);
    
            //给场景添加光源
            //自然光
            var ambientLight = new THREE.AmbientLight( 0x606060 );
            scene.add( ambientLight );
    
            //平行光源
            var directionalLight = new THREE.DirectionalLight( 0xffffff );
            directionalLight.position.set( 1, 0.75, 0.5 ).normalize();
            scene.add( directionalLight );
            cube();
        }
    
        //创建一个立方体
        function cube(){
            var cubeGeo = new THREE.CubeGeometry(40, 40, 40, 8, 8, 8);//创建立方体
            var cubeMat = new THREE.MeshLambertMaterial({//创建材料
                color:0xFF6600,
                wireframe:false
            });
            cubeMesh = new THREE.Mesh(cubeGeo, cubeMat);//创建立方体网格模型
            cubeMesh.position.set(0, 0, 0);//设置立方体的坐标
            scene.add(cubeMesh);//将立方体添加到场景中
        }
    
        function render(){
            //让立方体动起来
            cubeMesh.rotation.x += 0.02;
            cubeMesh.rotation.y += 0.02;
            cubeMesh.rotation.z += 0.02;
            renderer.render(scene, camera);
            requestAnimationFrame(render);
    
        }
    </script>
    </body>
    </html>

[Link 1]: http://blog.csdn.net/qq_37338983/article/details/78569139
[Center]: /images/20220605/61d71850e340425f82091fe798164d97.png