three.js立方体

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>canvas { width: 100%; height: 100% }</style>
    <script src="libs/three.js"></script>
</head>
<body>
    <script>
    var renderer;
    var scene;
    var camera;
    function init() {
    //创建场景
    scene = new THREE.Scene();
    //THREE.PerspectiveCamera(fov, aspect, near, far)
    //创建一个透视相机 fov: 表示相机的夹角; aspect:水平长度和竖直长度的比值; near:拍摄最近距离 ;far:拍摄最远距离 
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);//相机
    camera.position.set(15, 16, 13);//位置
    camera.lookAt(scene.position);//对准的焦点
    scene.add(camera);//照相机需要被添加到场景中

    //添加一个渲染器
    renderer = new THREE.WebGLRenderer();//渲染
    renderer.setClearColor(0x000000, 1.0);//设置渲染颜色（背景底色） 
    renderer.setSize(window.innerWidth, window.innerHeight);//渲染面大小（在二维平面上的窗口大小）



    //添加长方体
    var geometry = new THREE.BoxGeometry(6, 6, 6);//BoxGeometry创建一个长方体  长宽高
    var matarial = new THREE.MeshLambertMaterial({color: 'red'});//MeshLambertMaterial材质
    var cube = new THREE.Mesh(geometry, matarial);
    scene.add(cube);//创建好的长方体添加到场景中

    var light = new THREE.SpotLight(0xffffff);//通过SpotLight创建灯光效果
    light.position.set(20, 30, 20);
    scene.add(light);

    document.body.appendChild(renderer.domElement);
    render();

}
function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);//调用渲染器的渲染函数，就能使其渲染一次
}
window.onload = init;
    </script>
</body>
</html>
posted @ 2016-10-28 15:32 缘琪梦阅读(716) 评论(0) 收藏举报
缘琪梦

three.js立方体

公告
