1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <title>第一个three.js文件_WebGL三维场景</title>
    7.   <style>
    8.     body {
    9.       margin: 0;
    10.       overflow: hidden;
    11.       /* 隐藏body窗口区域滚动条 */
    12.     }
    13.   </style>
    14.   <!--引入three.js三维引擎-->
    15.   <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
    16.   <!-- <script src="./three.js"></script> -->
    17.   <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
    18. </head>
    20. <body>
    21.   <script>
    22.     /**
    23.      * 创建场景对象Scene
    24.      */
    25.     var scene = new THREE.Scene();
    26.     /**
    27.      * 创建网格模型
    28.      */
    29.     var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    30.     // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    32.     var material = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象Material
    34.     // 将几何对象放入网格模型当中
    35.     var mesh = new THREE.Mesh(geometry, material); // 网格模型对象 Mesh
    36.     scene.add(mesh); // 网格模型添加到场景中
    38.     /**
    39.      * 光源设置
    40.      */
    41.     // 点光源
    42.     var point = new THREE.PointLight(0xffffff);
    43.     point.position.set(400, 200, 300); // 点光源位置
    44.     scene.add(point); // 点光源添加到场景中
    45.     //环境光
    46.     var ambient = new THREE.AmbientLight(0x444444);
    47.     scene.add(ambient);
    50.     /**
    51.      * 相机设置
    52.      */
    53.     var width = window.innerWidth; // 窗口宽度
    54.     var height = window.innerHeight; // 窗口高度
    55.     var k = width / height; // 窗口宽高比
    56.     var s = 200; // 三维场景显示范围控制系数，系数越大，显示的范围越大
    57.     // 创建相机对象
    58.     var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    59.     camera.position.set(200, 300, 200); // 设置相机位置
    60.     camera.lookAt(scene.position); // 设置相机方向 (指向的场景对象)
    63.     /**
    64.      * 创建渲染器对象
    65.      */
    66.     var renderer = new THREE.WebGLRenderer();
    67.     renderer.setSize(width, height);// 设置渲染区域尺寸
    68.     renderer.setClearColor(0xb9d3ff, 1); // 设置背景颜色
    69.     document.body.appendChild(renderer.domElement); // body元素中插入 canvas 对象
    70.     // 执行渲染操作   指定场景、相机作为参数
    71.     renderer.render(scene, camera);
    72.   </script>
    73. </body>
    74. </html>