html 画立体

three.js库
[python]
<!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>       www.zzzyk.com
效果就是这个样的。把那个参数再调小一点就到屏幕中间了……。

作者：xiaocaiju补充：web前端 , HTML/CSS ,