html 画立体

最新推荐文章于 2021-06-26 06:31:43 发布

小驹

最新推荐文章于 2021-06-26 06:31:43 发布

阅读量1.5k

点赞数

分类专栏：网页相关文章标签： html function div

本文链接：https://blog.csdn.net/xiaocaiju/article/details/7766858

版权

网页相关专栏收录该内容

5 篇文章 0 订阅

订阅专栏

three.js库

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

    <head>
        <title>self html</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #f0f0f0;
                margin: 0px;
                overflow: hidden;
            }
        </style>
        <script src="../build/Three.js"></script>
        <script src="./Stats.js"></script>
    </head>
    <body>

        <script>
            var container, stats;

            var camera, scene, renderer;

            var cube;

            var light;

            init();
            animate();

            function init()
            {
                container = document.createElement('div');
                document.body.appendChild(container);

                var info = document.createElement('div');
                info.style.position = 'absolute';
                info.style.top = '10px';
                info.style.width = '100%';
                info.style.textAlign = 'center';
                info.innerHTML = 'A CUBE';
                container.appendChild(info);

                scene = new THREE.Scene();

                camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 1000);
                //camera.position.set(400, 600, 800);
                // 下面这两个参数还没有搞懂，如果不设成150， 500而设置成600，800就会跑到屏幕外面 ，调试了整整半天，你妹的.....
                camera.position.y = 150;
                camera.position.z = 500;
                scene.add(camera);

                var  materials = [];
                for (var i =0; i < 6; i++){
                        materials.push(new THREE.MeshBasicMaterial({color:Math.random()*0xffffff}));
                }


                cube = new THREE.Mesh( new THREE.CubeGeometry(200,200,200,1, 1, 1, materials), new THREE.MeshFaceMaterial() );
                scene.add(cube);
                renderer = new THREE.CanvasRenderer();
                renderer.setSize(window.innerWidth, window.innerHeight);
                container.appendChild(renderer.domElement);

                light = new THREE.DirectionalLight(0xffffff);
                light.position.set(500, 1000, 1500);
                scene.add(light);


            }
            function animate(){
                requestAnimationFrame( animate);
                render();
            }

            function render(){
                renderer.render(scene, camera);
            }

        </script>
    </body>
</html>

效果就是这个样的。把那个参数再调小一点就到屏幕中间了……。