网站地图    收藏   

主页 > 前端 > css教程 >

html 画立体 - html/css语言栏目:html.css - 自学php

来源:自学PHP网    时间:2015-04-14 14:50 作者: 阅读:

[导读] three.js库[python]!doctype htmlhtml lang=en head titleself html/title meta charset=utf-8 meta name=viewport content=width=device-width, user-scalable=no, minimum-sc......

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.2cto.com
效果就是这个样的。把那个参数再调小一点就到屏幕中间了……。


作者:xiaocaiju
 

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论