webGL相机控制器

需要引入相机控制插件OrbitControls

1     <script type="text/javascript" src="framework/jquery.1.11.1.min.js"></script>
2     <script src="framework/three.js"></script>
3     <script src="framework/OrbitControls.js"></script>

直接看代码

 1 <html>
 2 
 3 <head>
 4     <meta charset="UTF-8">
 5     <link rel="stylesheet" type="text/css" href="stylesheets/main.css">
 6     <script type="text/javascript" src="framework/jquery.1.11.1.min.js"></script>
 7     <script src="framework/three.js"></script>
 8     <script src="framework/OrbitControls.js"></script>
 9     <title>three</title>
10     <script>
11         window.onload = function() {
12             // 创建场景元素
13             const scene = new THREE.Scene();
14 
15             // 创建网个模型
16             const geometry = new THREE.BoxGeometry(100, 100, 100); //长宽高 几何对象
17             const material = new THREE.MeshLambertMaterial({
18                 color: 0xff0000
19             }); //颜色 材质对象
20             // 模型
21             const mesh = new THREE.Mesh(geometry, material);
22             scene.add(mesh); // 加入到场景
23 
24             // 添加灯光
25             const Light = new THREE.PointLight(0xffffff); // 点光源
26             Light.position.set(300, 400, 200);
27             scene.add(Light); //添加灯光进去
28 
29             //加入一个环境光
30             scene.add(new THREE.AmbientLight(0x333333));
31 
32             // 添加相机
33             const camera = new THREE.PerspectiveCamera(40, 800 / 600, 1, 1000);
34             camera.position.set(200, 200, 200); //相机位置
35             camera.lookAt(scene.position); //向着场景中心
36 
37             // 创建渲染器
38             const renderer = new THREE.WebGLRenderer();
39             renderer.setSize(800, 600); // 渲染器尺寸
40             document.body.appendChild(renderer.domElement) // 加入文档
41 
42             // 渲染
43             function render() {
44                 renderer.render(scene, camera); //传入场景和相机
45             }
46             render();
47 
48             // 创建相机控制器，需要引入库  传入对象
49             const controls = new THREE.OrbitControls(camera); //传入这个相机，鼠标操作的时候相机控制器会改变相机的参数
50             // 加入事件监听处理
51             controls.addEventListener('change', render); //改变参数之后同时渲染场景
52 
53         }
54     </script>
55 </head>
56 
57 <body>
58     <div id="app"> </div>
59 </body>
60 
61 
62 </html>

哦，这其实只是个正方形！