threejs学习笔记01

最新推荐文章于 2022-10-07 13:16:31 发布

weixin_30834783

最新推荐文章于 2022-10-07 13:16:31 发布

阅读量121

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Webyangbowen/p/8043467.html

本文介绍如何利用Three.js库在网页上绘制一个能够自动旋转的三维立方体，并通过JavaScript控制其动态效果。文章详细解释了从初始化渲染器、设置场景、配置相机到添加物体的整个过程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>333</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }
        #three_canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="three_canvas"></canvas>

    <script src="js/three.js"></script>
    <script>
        //定义一些需要的变量
        var renderer, camera, scene, light, object;
        var width, height;
        //初始化
        function initRenderer(){
            width=document.getElementById('three_canvas').clientWidth;
            height=document.getElementById('three_canvas').clientHeight;
            renderer=new THREE.WebGLRenderer({
                //将canvas绑定到renderer
                canvas:document.getElementById('three_canvas')
            });
            renderer.setSize(width,height);//将渲染的大小设为canvas相同
            renderer.setClearColor(0xFFFFFF, 1.0);//设置默认颜色与透明度
        };
        //初始化场景
        function initScene(){
            scene = new THREE.Scene();
        };
        //初始化相机
        function initCamera(){
            //简单的正交投影相机，正对着视口中心，视口大小与canvas大小相同
            camera = new THREE.OrthographicCamera(width/-2,width/2,height/2,height/-2,1,1000);
            //设置相机的位置
            camera.position.x=0;
            camera.position.y=0;
            camera.position.z=200;
            //设置相机的上方向
            camera.up.x=0;
            camera.up.y=1;
            camera.up.z=0;
            //设置相机聚焦的位置（其实就是确定一个方向）
            camera.lookAt({
                x:0,
                y:0,
                z:0
            })
        };
        //该添加一个立方体到场景中了
        function initObject(){
            //创建一个边长为100的立方体
            var geometry = new THREE.CubeGeometry(100,100,100);
            object = new THREE.Mesh(geometry,new THREE.MeshNormalMaterial());
            //法向材质MeshNormalMaterial这样立方体每个面的颜色与这个面对着的方向是相关的，更便于观察/调试。
            //在这个简单的demo里我不打算添加光影效果，而法向材质对光也是没有反应的。
            scene.add(object);
        }
        //最后要动起来，创建一个动画循环
        function render(){
            // requestAnimFrame，它会自动在每次页面重绘前调用传入的函数。
            requestAnimationFrame(render);
            object.rotation.x +=0.05;
            object.rotation.y +=0.05;
            renderer.render(scene,camera);
        }
        //调用
        function threeStart(){
            initRenderer();
            initCamera();
            initScene();
            initObject();
            render();
        };
        window.onload=threeStart();
    </script>
</body>
</html>

转载于:https://www.cnblogs.com/Webyangbowen/p/8043467.html