用threejs 实现3D物体在浏览器展示，通过鼠标平移，缩放，键盘箭头按钮左右移动等功能展示。
<!DOCTYPE html> <html>
<head>
<meta charset=utf->
<title>My first three.js app</title>
<style>
* { margin: ; }
canvas { width: %; height: %;}
</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 = , //拍摄距离 视野角值越大，场景中的物体越小
near = ,//相机离视体积最近的距离
far = ;//相机离视体积最远的距离;
var cameraX = , cameraY = , cameraZ = ;
var sceneX = , sceneZ = ;
document.body.style.cursor="move";
function initFloor(){
var floorGeometry = new THREE.BoxGeometry( , 0.01, );
//var material = new THREE.MeshBasicMaterial( { color: "green", wireframe : iswireframe } );
for ( var i = ; 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( , );
//helper.setColors( 0x0000ff, 0x808080 );
scene.add( helper );
} function initBuild1(){
var buildingGeometry1 = new THREE.BoxGeometry(, , );
for ( var i = ; 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(, , );
scene.add(building1);
} function buildColor(geometry){
for ( let i = ; i < geometry.faces.length; i++ ) {
geometry.faces[i].color.setHex( Math.random() * 0xffffff );
}
} function initWall(){
let wallColor = 0xEBEBEB;
let wallHeight = ;
let wallGeometryback = new THREE.BoxGeometry(, 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.5, -);
scene.add(wallback); let wallGeometryLeft = new THREE.BoxGeometry(0.1, wallHeight, );
var wallLeft = new THREE.Mesh(
wallGeometryLeft,
new THREE.MeshBasicMaterial(materialParamertes)
);
wallLeft.position.set(-, 0.5, );
scene.add(wallLeft); let wallGeometryRight = new THREE.BoxGeometry(0.1, wallHeight, );
var wallRight = new THREE.Mesh(
wallGeometryRight,
new THREE.MeshBasicMaterial(materialParamertes)
);
wallRight.position.set(, 0.5, );
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 : //左
cameraX -= ;
sceneX -=;
break;
case : //右
cameraX += ;
sceneX +=;
break;
case : //上
//fx -= 0.1;
cameraZ -= ;
sceneZ -= ;
break;
case : //下
//fx += 0.1;
cameraZ += ;
sceneZ += ;
break;
default:
break;
}
renderInit();
} function onDocumentMouseWheel(event) {
if (event.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (event.wheelDelta > ) { //当滑轮向上滚动时
fov -= (near < fov ? : );
}
if (event.wheelDelta < ) { //当滑轮向下滚动时
fov += (fov < far ? : );
}
} else if (event.detail) { //Firefox滑轮事件
if (event.detail > ) { //当滑轮向上滚动时
fov += ;
}
if (event.detail < ) { //当滑轮向下滚动时
fov -= ;
}
}
//改变fov值，并更新场景的渲染
camera.fov = fov;
renderInit();
} function onDocumentMouseDown(event) {
if (event.button != ) return;
event.preventDefault();
document.addEventListener('mousemove', onDocumentMouseMove, false);
document.addEventListener('mouseup', onDocumentMouseUp, false);
} function onDocumentMouseMove(event) {
var movementX = event.movementX || event.mozMovementX || event.webkitMovementX || ;
var movementY = event.movementY || event.mozMovementY || event.webkitMovementY || ;
//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 = ;
camera.up.y = ; //相机朝向--相机上方为y轴
camera.up.z = ; renderer = new THREE.WebGLRenderer({antialias : true});
renderer.setSize( window.innerWidth - , window.innerHeight - );
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, , sceneZ);
camera.updateProjectionMatrix();
renderer.render(scene, camera);
} sceneInit();
renderInit(); //动画
function animate() {
requestAnimationFrame( animate );
// stats.begin();
initAll();
//stats.end();
}
</script>
</html>