用threejs 实现3D物体在浏览器展示，通过鼠标平移，缩放，键盘箭头按钮左右移动等功能展示。
<!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>My first three.js app</title> <style> * { margin: 0; } canvas { 100%; height: 100%;} </style> </head> <body> </body> <script src="https://cdn.bootcss.com/three.js/91/three.js"></script> <script> var iswireframe = false; var scene , camera , renderer; var fov = 75, //拍摄距离 视野角值越大，场景中的物体越小 near = 1,//相机离视体积最近的距离 far = 1000;//相机离视体积最远的距离; var cameraX = 0, cameraY = 15, cameraZ = 8; var sceneX = 0, sceneZ = 0; document.body.style.cursor="move"; function initFloor(){ var floorGeometry = new THREE.BoxGeometry( 20, 0.01, 6); //var material = new THREE.MeshBasicMaterial( { color: "green", wireframe : iswireframe } ); for ( var i = 0; i < floorGeometry.faces.length; i++ ) { floorGeometry.faces[ i ].color.set( 0xEEEED1 ); } var material = new THREE.MeshBasicMaterial( { vertexColors: THREE.FaceColors, wireframe : iswireframe } ); var floor = new THREE.Mesh( floorGeometry, material ); scene.add( floor ); } function initGrid(){ //辅助网格 var helper = new THREE.GridHelper( 1000, 50 ); //helper.setColors( 0x0000ff, 0x808080 ); scene.add( helper ); } function initBuild1(){ var buildingGeometry1 = new THREE.BoxGeometry(2, 2, 3); for ( var i = 0; i < buildingGeometry1.faces.length; i++ ) { buildingGeometry1.faces[i].color.setHex( Math.random() * 0xffffff ); } var building1 = new THREE.Mesh( buildingGeometry1, new THREE.MeshBasicMaterial({vertexColors: THREE.FaceColors, wireframe : iswireframe}) ); building1.position.set(0, 1, 2); scene.add(building1); } function buildColor(geometry){ for ( let i = 0; i < geometry.faces.length; i++ ) { geometry.faces[i].color.setHex( Math.random() * 0xffffff ); } } function initWall(){ let wallColor = 0xEBEBEB; let wallHeight = 1; let wallGeometryback = new THREE.BoxGeometry(20, wallHeight, 0.1); console.log(wallGeometryback.faces.length); //buildColor(wallGeometryback); let materialParamertes = {color: wallColor, vertexColors: THREE.FaceColors, wireframe : iswireframe, opacity : 0.01}; var wallback = new THREE.Mesh( wallGeometryback, new THREE.MeshBasicMaterial(materialParamertes) ); wallback.position.set(0, 0.5, -3); scene.add(wallback); let wallGeometryLeft = new THREE.BoxGeometry(0.1, wallHeight, 6); var wallLeft = new THREE.Mesh( wallGeometryLeft, new THREE.MeshBasicMaterial(materialParamertes) ); wallLeft.position.set(-10, 0.5, 0); scene.add(wallLeft); let wallGeometryRight = new THREE.BoxGeometry(0.1, wallHeight, 6); var wallRight = new THREE.Mesh( wallGeometryRight, new THREE.MeshBasicMaterial(materialParamertes) ); wallRight.position.set(10, 0.5, 0); scene.add(wallRight); /* let wallGeometryFront = new THREE.BoxGeometry(20, wallHeight, 0.1); var wallFront = new THREE.Mesh( wallGeometryFront, new THREE.MeshBasicMaterial(materialParamertes) ); wallFront.position.set(0, 0.5, 3); scene.add(wallFront); */ } function onDocumentKeyDown(event){ switch(event.keyCode){ case 37: //左 cameraX -= 1; sceneX -=1; break; case 39: //右 cameraX += 1; sceneX +=1; break; case 38: //上 //fx -= 0.1; cameraZ -= 1; sceneZ -= 1; break; case 40: //下 //fx += 0.1; cameraZ += 1; sceneZ += 1; break; default: break; } renderInit(); } function onDocumentMouseWheel(event) { if (event.wheelDelta) { //判断浏览器IE，谷歌滑轮事件 if (event.wheelDelta > 0) { //当滑轮向上滚动时 fov -= (near < fov ? 1 : 0); } if (event.wheelDelta < 0) { //当滑轮向下滚动时 fov += (fov < far ? 1 : 0); } } else if (event.detail) { //Firefox滑轮事件 if (event.detail > 0) { //当滑轮向上滚动时 fov += 1; } if (event.detail < 0) { //当滑轮向下滚动时 fov -= 1; } } //改变fov值，并更新场景的渲染 camera.fov = fov; renderInit(); } function onDocumentMouseDown(event) { if (event.button != 0) return; event.preventDefault(); document.addEventListener('mousemove', onDocumentMouseMove, false); document.addEventListener('mouseup', onDocumentMouseUp, false); } function onDocumentMouseMove(event) { var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0; var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0; //console.log("x="+movementX+" y="+movementY); cameraX -= movementX * 0.01; sceneX -= movementX * 0.01; cameraZ -= movementY * 0.01; sceneZ -= movementY * 0.01; renderInit(); } function onDocumentMouseUp(event) { document.removeEventListener('mousemove', onDocumentMouseMove); document.removeEventListener('mouseup', onDocumentMouseUp); } //场景初始化 function sceneInit(){ scene = new THREE.Scene(); camera = new THREE.PerspectiveCamera( fov , window.innerWidth/window.innerHeight, near, far ); //camera.position.set(0, 0, 7); //相机位置 //cameraX = 0; cameraZ = 8; camera.up.x = 0; camera.up.y = 1; //相机朝向--相机上方为y轴 camera.up.z = 0; renderer = new THREE.WebGLRenderer({antialias : true}); renderer.setSize( window.innerWidth - 10, window.innerHeight -10 ); renderer.setClearColor(0xFFFFFF, 1.0); document.body.appendChild( renderer.domElement ); renderer.setClearColor(0xFFFFFF, 1.0); document.addEventListener('keydown',onDocumentKeyDown,false); document.addEventListener('mousewheel', onDocumentMouseWheel, false);//兼容ie chrome document.addEventListener('DOMMouseScroll', onDocumentMouseWheel, false);//兼容火狐 document.addEventListener('mousedown', onDocumentMouseDown, false); initGrid(); initFloor(); initBuild1(); initWall(); } function renderInit(){ camera.position.set(cameraX, cameraY, cameraZ); camera.lookAt(sceneX, 0, sceneZ); camera.updateProjectionMatrix(); renderer.render(scene, camera); } sceneInit(); renderInit(); //动画 function animate() { requestAnimationFrame( animate ); // stats.begin(); initAll(); //stats.end(); } </script> </html>