????????前面一個章節(jié)中已經(jīng)實現(xiàn)在場景中放置一個正方體，并添加燈光使得正方體可見。但是由于是靜態(tài)的還不能證明是3D的，我們需要添加一些控制器，使得通過鼠標控制正方體可以動起來，實現(xiàn)真正的3D效果，由此引入OrbitControls組件，他實質(zhì)是改變相機的位置，實現(xiàn)從不同角度看場景中的物體。下面源碼中已經(jīng)將控制的部分加入了，在最下方，注釋也寫的很詳細了。OrbitControls組件如果找不到在線引用的可以到我的csdn中下載文章來源：http://www.zghlxwxcb.cn/news/detail-728563.html
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <!--引入three.js，這是使用three必須的js文件，此處引入的是外網(wǎng)提供的three文件，如果引入有問題可以到官網(wǎng)下載three文件后引入本地的theee.js文件-->
? ? <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
? ? <script src="three/OrbitControls.js"></script>
</head>
<body>
<script>
? ? /**
? ? ?* 創(chuàng)建場景對象Scene
? ? ?*/
? ? var scene = new THREE.Scene();
? ? /**
? ? ?* 相機設(shè)置
? ? ?*/
? ? //窗口寬度
? ? var width = window.innerWidth;
? ? //窗口高度
? ? var height = window.innerHeight;
? ? //窗口寬高比
? ? var k = width / height;
? ? //三維場景顯示范圍控制系數(shù)，系數(shù)越大，顯示的范圍越大
? ? var s = 200;
? ? //創(chuàng)建相機對象
? ? var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
? ? //設(shè)置相機位置
? ? camera.position.set(200, 300, 200);
? ? //設(shè)置相機方向(指向的場景對象)
? ? camera.lookAt(scene.position);
? ? /**
? ? ?* 光源設(shè)置
? ? ?*/
? ? ? ? //新建點光源（常用光源分為點光源和環(huán)境光，點光源的效果類似燈泡，環(huán)境光的效果類似白天的太陽光）
? ? var point = new THREE.PointLight(0xffffff);
? ? //設(shè)置點光源的位置
? ? point.position.set(400, 200, 300);
? ? //將點光源添加到場景中
? ? scene.add(point);
?? ?
? ? /**
? ? ?* 創(chuàng)建網(wǎng)格模型，也就是3D模型
? ? ?*/
? ? //創(chuàng)建一個立方體幾何對象Geometry
? ? var geometry = new THREE.BoxGeometry(100, 100, 100);
? ? //給幾何體創(chuàng)建材質(zhì)，這里是改為藍色，材質(zhì)對象Material
? ? var material = new THREE.MeshLambertMaterial({
? ? ? ? color: 0x0000ff
? ? });
? ? //網(wǎng)格模型對象Mesh
? ? var mesh = new THREE.Mesh(geometry, material);
? ? //網(wǎng)格模型添加到場景中，每個模型最終都要添加到場景中才會被渲染
? ? scene.add(mesh);
? ? /**
? ? ?* 創(chuàng)建渲染器對象
? ? ?*/
? ? //創(chuàng)建渲染器對象（渲染要等所有東西都加進去再渲染場景，創(chuàng)建和3D模型和光源沒有先后順序）
? ? var renderer = new THREE.WebGLRenderer();
? ? //設(shè)置渲染區(qū)域尺寸（設(shè)置的是整個屏幕的長度和寬度
? ? renderer.setSize(width, height);
? ? //設(shè)置渲染的背景色
? ? renderer.setClearColor(0xb9d3ff, 1);
? ? //body元素中插入canvas對象，也可以在頁面中添加div，并加上id，通過id指定在某個div中渲染
? ? document.body.appendChild(renderer.domElement);
? ? //執(zhí)行渲染操作 ? 指定場景、相機作為參數(shù)
? ? renderer.render(scene, camera);
?? ?
?? ?
?? ?//創(chuàng)建鼠標控制器?? ?
?? ?let controls = new THREE.OrbitControls(camera, renderer.domElement );
?? ?//監(jiān)聽控制器，每次拖動后重新渲染畫面
?? ?controls.addEventListener('change', function () {
?? ??? ?renderer.render(scene, camera); //執(zhí)行渲染操作
?? ?});
</script>
</body>
</html>如果有問題，可以在我的評論區(qū)留言文章來源地址http://www.zghlxwxcb.cn/news/detail-728563.html
到了這里，關(guān)于ThreeJs的場景實現(xiàn)鼠標拖動旋轉(zhuǎn)控制的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
