案例:Three 相机自适应渲染     状态:可编辑再运行    进入竖版
 运行结果 
x
 
1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta charset="UTF-8">
5
  <title>第一个three.js文件_WebGL三维场景</title>
6
  <style>
7
    body {
8
      margin: 0;
9
      overflow: hidden;
10
      /* 隐藏body窗口区域滚动条 */
11
    }
12
  </style>
13
  <!--引入three.js三维引擎-->
14
  <script src="/js/threejs/threer92.js"></script>
15
  <script src="/example/threejs/solarsystem/files/OrbitControls.js"></script>
16
</head>
17
18
<body>
19
  <script>
20
      
21
      // onresize 事件会在窗口被调整大小时发生
22
window.onresize=function(){
23
  // 重置渲染器输出画布canvas尺寸
24
  renderer.setSize(window.innerWidth,window.innerHeight);
25
  // 重置相机投影的相关参数
26
  k = window.innerWidth/window.innerHeight;//窗口宽高比
27
  camera.left = -s*k;
28
  camera.right = s*k;
29
  camera.top = s;
30
  camera.bottom = -s;
31
  // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
32
  // 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)
33
  // 如果相机的一些属性发生了变化,需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
34
  camera.updateProjectionMatrix ();
35
};
36
      
37
      
38
      
39
    /**
40
     * 创建场景对象Scene
41
     */
42
    var scene = new THREE.Scene();
43
    /**
44
     * 创建网格模型
45
     */
46
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
47
    // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象
48