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
