当前位置:编程学习 > html/css >>

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 ,

CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,