需要引入相机控制插件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>
哦，这其实只是个正方形！