第一节：three.js

SunJHe

于 2018-01-05 16:39:56 发布

阅读量270

点赞数

分类专栏： three.js 文章标签： three.js 3D JavaScript

three.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本节从webgl中文网学习：http://www.hewebgl.com/article/getarticle/50

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>canvas {width: 100%;height: 100%}</style>
    <script src="js/ThreeJS/three.js"></script>
</head>
<body>
    <script>
        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);  //定义渲染器大小（窗口宽度，窗口高度）
        /*  renderer的domElement元素，表示画布，所有的渲染都是画在domElement上,appendChild表示
            将这个domElement挂接在body下面，让渲染的结果在页面中显示*/
        document.body.appendChild(renderer.domElement);
        var geometry = new THREE.CubeGeometry(1, 1, 1);  //定义几何体（x,y,z）
        var material = new THREE.MeshBasicMaterial({ color: 0xffff00f });  //定义基础网格材质（{颜色}）
        var cube = new THREE.Mesh(geometry, material);   //定义mesh(几何体，材质)
        scene.add(cube);  //加入场景
        camera.position.z = 10;  //设定位置，z轴距离
        camera.position.x = 5;
        //渲染，分为离线渲染和实时渲染
        function render() {
            requestAnimationFrame(render); //执行一次，然后调用function render()，形成循环，实时渲染
            //cube.rotation.x += 0.01; //rotation旋转，沿着x轴，旋转速度
            cube.rotation.y += 0.01; 
            renderer.render(scene, camera); //执行渲染
        }
        render(); //执行渲染函数
    </script>
</body>
</html>