第三节让场景动起来

最新推荐文章于 2024-04-22 11:15:43 发布

SunJHe

最新推荐文章于 2024-04-22 11:15:43 发布

阅读量320

点赞数

分类专栏： three.js 文章标签： three.js 前端 3D

three.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本节学习自webgl中文网：http://www.hewebgl.com/article/getarticle/58

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title>Three框架</title>
<script src="js/Three.js"></script>
        <!--性能监视器-->
        <script src="js/Stats.js"></script>
        <!--动画引擎-->
<script src="js/tween.min.js"></script>


<style type="text/css">
div#canvas-frame {
border: none;
cursor: pointer;
width: 100%;
height: 600px;
background-color: #EEEEEE;
}


</style>
<script>
            //渲染器，性能监视器
            var renderer;
            var stats;
            function initThree() {
                width = document.getElementById('canvas-frame').clientWidth;
                height = document.getElementById('canvas-frame').clientHeight;
                renderer = new THREE.WebGLRenderer({
                    antialias : true
                });
                renderer.setSize(width, height);
                document.getElementById('canvas-frame').appendChild(renderer.domElement);
                renderer.setClearColor(0xFFFFFF, 1.0);


                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.left = '0px';
                stats.domElement.style.top = '0px';
                document.getElementById('canvas-frame').appendChild(stats.domElement);
            }
            //相机
            var camera;
            function initCamera() {
                camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 600;
                camera.up.x = 0;
                camera.up.y = 1;
                camera.up.z = 0;
                camera.lookAt({
                    x : 0,
                    y : 0,
                    z : 0
                });
            }
            //场景
            var scene;
            function initScene() {
                scene = new THREE.Scene();
            }
            //灯光
            var light;
            function initLight() {
                light = new THREE.AmbientLight(0xFF0000);  //定义环境光，影响整个场景，无特定来源，无阴影，不能作为场景中唯一光源
                light.position.set(100, 100, 200);
                scene.add(light);
                light = new THREE.PointLight(0x00FF00);  //定义点光源，向所有方向都发射光线，无阴影
                light.position.set(0, 0,300);
                scene.add(light);
            }
            //多维数据集
            var cube;
var mesh;
            function initObject() {
                var geometry = new THREE.CylinderGeometry(100, 150, 400);  //定义一个圆柱、圆锥几何体（顶部面积，底部面积，高）
                var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF });  //定义网格Lambert材质（{颜色}），无镜面高光
                mesh = new THREE.Mesh(geometry, material);  //设定网格mesh(几何体，材质)
                mesh.position = new THREE.Vector3(0,0,0);
                scene.add(mesh);
            }
            //启动函数
            function threeStart() {
                initThree();
                initCamera();
                initScene();
                initLight();
                initObject();
initTween();
                animation();
            }
            //动画引擎
function initTween()
{
                new TWEEN.Tween(mesh.position)
                    .to({ x: -400 }, 30000).repeat(Infinity).start(); //Tween(物体位置)to({物品目标位置}，移动时间)repeat(重复次数无穷，可以改为5、10……)
            }
            //循环渲染
            function animation()
            {
                renderer.clear();
                stats.update();  //调用stats.update()函数来统计时间和帧数
                TWEEN.update();  //更新tween，让mesh.position.x移动位置
                //camera.position.x =camera.position.x +1;  //改变相机位置，让物品产生移动效果
                //mesh.position.x -= 1;  //改变物品位置，产生移动效果
                renderer.render(scene, camera);
                requestAnimationFrame(animation);  //循环调用
            }

</script>
</head>


<body οnlοad="threeStart();">
<div></div>
<div id="canvas-frame"></div>
</body>
</html>

SunJHe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三节让场景动起来

本节学习自webgl中文网：http://www.hewebgl.com/article/getarticle/58Three框架 div#canvas-frame {border: none;cursor: pointer;width: 100%;height: 600px;background-color:
复制链接

扫一扫