在照着文檔寫的時候遇到兩個問題，一個是用鼠標控制畫面移動的那個控件引用無效了，報錯說沒有這個控件或者是方法？（大致上就是這個意思）
然后百度之后發現 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>