第一个three.js程序

来源：互联网发布：淘宝限购一件怎么设置编辑：程序博客网时间：2024/06/14 17:03

用three.js绘制一个旋转的正方体

<!DOCTYPE html><html><head>    <title></title>    <style>canvas { width: 100%; height: 100% }</style>    <script src="../js/three.js"></script></head><body><script>    // 三大组件 场景scene 相机camera 渲染器renderer    var scene=new THREE.Scene();//创建场景    var camera=new THREE.PerspectiveCamera(        75,        window.innerWidth/window.innerHeight,         0.1,1000);//创建相机 透视投影(参数含义 ,视角,宽高比,近平面和远平面到摄像机的距离)    var renderer=new THREE.WebGLRenderer();//创建渲染器    //设置渲染器的大小为窗口的内宽度,也就是内容区的宽度    renderer.setSize(window.innerWidth,window.innerHeight);    document.body.appendChild(renderer.domElement);    //添加物体到场景中    var geometry=new THREE.CubeGeometry(1,1,1);    var material=new THREE.MeshBasicMaterial({color:0x3e0500});    var cube=new THREE.Mesh(geometry,material);    scene.add(cube);    camera.position.z=5;    function  render() {        requestAnimationFrame(render);        cube.rotaion+=0.1        cube.rotation.y+=0.1;        renderer.render(scene,camera,false);    }    render();</script></body></html>

阅读全文

0 0