three.js - (入门三)

最新推荐文章于 2025-06-08 17:09:38 发布

转载最新推荐文章于 2025-06-08 17:09:38 发布 · 90 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lafitewu/p/8118523.html

本文介绍如何使用three.js创建一个自转的立方体动画，并详细解释了实现过程中的关键步骤，包括场景、相机、渲染器的设置及动画循环的实现。

前面两节讲得都是在舞台上创建角色，这一节我们就让角色动起来。

three.js 中一般是用requestAnimationFrame();来做动画，当然也可以用setInterval定时器，这里不建议使用。

因为动画的核心就只有这个函数，然后如何做成何种动画，就靠自己去构思，去尝试了。

话不多说，上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>three.js</title>
    <script src="js/three.js"></script>
</head>
<body>

</body>
</html>
<script>
        // 创建场景
        var scene = new THREE.Scene();

        // 创建相机  90 -> 视角；相机拍摄面 -> 一般为长宽比；0.1 -> 近裁剪面； 1000 -> 远裁剪面
        var camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight, 0.1, 1000);

        // 渲染器
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 设置背景颜色
        renderer.setClearColor('#5AC7FF');
        document.body.appendChild(renderer.domElement);

        // 创建物体   CubeGeometry 代表立体图形 1,3,2 分别代表长宽高
        var geometry = new THREE.CubeGeometry(1,3,2,2,2,5);
        //网孔基础材料（MeshBasicMaterial）为其填充颜色
        var material = new THREE.MeshBasicMaterial({color: "#990033"});
        //网孔(Mesh)：网孔是用来承载几何模型的一个对象，还可以把材料应用到它上面
        var cube = new THREE.Mesh(geometry, material);
        //将物体添加到场景
        scene.add(cube);
        camera.position.z = 5;
        renderer.render(scene, camera);
        //渲染循环（render loop）
        function render() {
            // requestAnimationFrame 相当于setInterval 
            requestAnimationFrame(render);
            // cube.rotation.x += 0.1;
            cube.rotation.y += 0.05;
            // cube.rotation.z += 0.1;
            renderer.render(scene, camera);
        }
        render();
    </script>