three.js在调整相机角度时导致的图形显示
在照着文档写的时候遇到两个问题，一个是用鼠标控制画面移动的那个控件引用无效了，报错说没有这个控件或者是方法？（大致上就是这个意思）
然后百度之后发现 OrbitControls.js 需要单独引入一下，并且可能还会因为版本问题无效。
第二，就是相机的旋转已经解决之后，马上发现了第二个问题，相机偏转到一定角度之后图形会只显示一条边，或者直接消失，我感觉到是相机的问题，想到或许限制旋转角度可以避免此情况出现。不过并没有实行，初学three并不知道可行性如何，留待以后验证好了，然后群里大佬指点说，只需要调整下相机的远近就好了。。。。。。真的是朴实无华又简单实用的解决办法。
先把代码贴一下吧，免得后面忘记
<html> <head> <meta charset="utf-8"> <title>text of three.js</title> <style> body { margin: 0; } #info { position: absolute; top: 10px; width: 100%; text-align: center; z-index: 100; display: block; } </style> </head> <body> <div id="info">Description</div> <script src="js/three.js"></script> <script src="https://82mou.github.io/threejs/js/OrbitControls.js"></script> <script> /** * 创建场景对象Scene */ var scene = new THREE.Scene(); /** * 创建网格模型 */ var geometry = new THREE.SphereGeometry(60, 50, 50); //创建一个球体几何对象 // var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry var material = new THREE.MeshLambertMaterial({ color: 0x0000ff, opacity: 0.5, transparent: true }); //材质对象Material var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh mesh.position.set(0, 120, 0); scene.add(mesh); //网格模型添加到场景中 /** * 光源设置 */ //点光源 var point = new THREE.PointLight(0xffffff); point.position.set(400, 200, 300); //点光源位置 scene.add(point); //点光源添加到场景中 //环境光 var ambient = new THREE.AmbientLight(0x444444); scene.add(ambient); // console.log(scene) // console.log(scene.children) /** * 相机设置 */ var width = window.innerWidth; //窗口宽度 var height = window.innerHeight; //窗口高度 var k = width / height; //窗口宽高比 var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大 //创建相机对象 var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); camera.position.set(400, 500, 400); //设置相机位置 camera.lookAt(scene.position); //设置相机方向(指向的场景对象) /** * 创建渲染器对象 */ var renderer = new THREE.WebGLRenderer(); renderer.setSize(width, height);//设置渲染区域尺寸 renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色 document.body.appendChild(renderer.domElement); //body元素中插入canvas对象 //执行渲染操作 指定场景、相机作为参数 renderer.render(scene, camera); var geometry1 = new THREE.BoxGeometry(100, 100, 100); var material1 = new THREE.MeshLambertMaterial({ color: 0x0000ff }); //材质对象Material var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh scene.add(mesh1); //网格模型添加到场景中 // 球体网格模型 var geometry2 = new THREE.SphereGeometry(60, 40, 40); var material2 = new THREE.MeshLambertMaterial({ color: 0xff00ff, opacity: 0.5, }); var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120 scene.add(mesh2); // 圆柱网格模型 var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25); var material3 = new THREE.MeshLambertMaterial({ color: 0xffff00, }); var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120 mesh3.position.set(150, 0, 0);//设置mesh3模型对象的xyz坐标为120,0,0 scene.add(mesh3); // 正二十面体 var geometry4 = new THREE.IcosahedronGeometry(50); var material4 = new THREE.MeshLambertMaterial({ color: 0xf00005, // shininess: 20, // transparent: true, // opacity: 0.2, }); var mesh4 = new THREE.Mesh(geometry4, material4); //网格模型对象Mesh // mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120 mesh4.position.set(0, 0, 150);//设置mesh3模型对象的xyz坐标为120,0,0 scene.add(mesh4); // 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置 var axisHelper = new THREE.AxisHelper(250); scene.add(axisHelper); const animate = function () { requestAnimationFrame(animate); //可以用setInterval实现，但是这个方法更好用，比如当用户切换到其他页面时，它会暂停，不浪费处理器资源及电池使用寿命。 mesh.rotation.x += 0.01; // 让立方体旋转起来 mesh.rotation.y += 0.01; // 同上（将在每一帧时被渲染时调用） mesh1.rotation.x += 0.01; // 让立方体旋转起来 mesh1.rotation.y += 0.01; // 同上（将在每一帧时被渲染时调用） mesh2.rotation.x += 0.01; // 让立方体旋转起来 mesh2.rotation.y += 0.01; // 同上（将在每一帧时被渲染时调用） mesh3.rotation.x += 0.01; // 让立方体旋转起来 mesh3.rotation.y += 0.01; // 同上（将在每一帧时被渲染时调用） mesh4.rotation.x += 0.02; // 让立方体旋转起来 mesh4.rotation.y += 0.02; // 同上（将在每一帧时被渲染时调用） mesh4.rotation.z += 0.02; // 同上（将在每一帧时被渲染时调用） renderer.render(scene, camera); }; animate(); // 渲染（动画循环） let controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象 // 已经通过requestAnimationFrame(render);周期性执行render函数，没必要再通过监听鼠标事件执行render函数 // controls.addEventListener('change', render) </script> </body> </html>
