three.js实现3D模型展示的示例代码

由于项目需要展示3d模型,所以对three做了点研究,分享出来希望能帮到大家

先看看效果:

three.js整体来说不是很难只要你静下心来研究研究很快就会上手的

首先我们在页面上需要创建一个能够放置3D模型的画布也可以说是初始化 Three

HEIGHT = document.documentElement.clientHeight/2; /* 渲染器 */ renderer = new THREE.WebGLRenderer(); renderer.setSize(WIDTH,HEIGHT); renderer.setClearColor(new THREE.Color(0x66666)); renderer.gammaInput = true; renderer.gammaOutput = true;

document.body.appendChild(renderer.domElement);

}

通过上面的代码不难看出我们设置了在body里追加了一块画布宽高是 client的一半颜色为 0x66666 这里要注意的是 renderer = new THREE.WebGLRenderer(); 因为我们所有的设置都是以renderer为对象设置

下来我们需要调整摄像头即视觉角度

以上代码主要是控制视觉角度数值可以在后期根据自己的需求去调整

加载场景:

加载灯光效果

显示模型对象:

显示对象 */ var cube; function initObject(){ // ASCII file var loader = new THREE.STLLoader(); loader.addEventListener( 'load',function ( event ) { var loading = document.getElementById("Loading"); loading.parentNode.removeChild(loading); var geometry = event.content; //砖红色 var material = new THREE.MeshPhongMaterial( { ambient: 0xff5533,color: 0xff5533,specular: 0x111111,shininess: 200 } ); //纯黑色 // var material = new THREE.MeshBasicMaterial( { envMap: THREE.ImageUtils.loadTexture( 'http://localhost:8080/textures/Metal.jpg',new THREE.SphericalReflectionMapping() ),overdraw: true } ) ; //粉色带阴影 // var material = new THREE.MeshLambertMaterial( { color:0xff5533,side: THREE.DoubleSide } ); //灰色 // var material = new THREE.MeshLambertMaterial({color: 000000}); //材质设定 (颜色) var mesh = new THREE.Mesh( geometry,material ); var center = THREE.GeometryUtils.center(geometry); var boundBox=geometry.boundingBox; var vector3 = boundBox.size(null); var vector3 = boundBox.size(null); console.log(vector3); var scale = vector3.length(); camera.position.set(scale,0); camera.lookAt(scene.position); scene.add(camera); //利用一个轴对象以可视化的3轴以简单的方式。X轴是红色的。Y轴是绿色的。Z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。 var axisHelper = new THREE.AxisHelper(800); scene.add(axisHelper);

  //周围边框
  b<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Helper = new THREE.<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Helper();
  b<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Helper.visible = true;
  var meshMaterial = material;
  mainModel = new THREE.Mesh(geometry,meshMaterial);
  b<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Helper.update(mainModel);
  b<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Helper.geometry.computeBounding<a href="/tag/Box/" target="_blank" class="keywords">Box</a>();
  scene.add(b<a href="/tag/Box/" target="_blank" class="keywords">Box</a>Helper);

  //地板网格

// var gridHelper = new THREE.GridHelper(500,40); // 500 is grid size,20 is grid step
// gridHelper.position = new THREE.Vector3(0,0);
// gridHelper.rotation = new THREE.Euler(0,0);
// scene.add(gridHelper);
// var gridHelper2 = gridHelper.clone();
// gridHelper2.rotation = new THREE.Euler(Math.PI / 2,0);
// scene.add(gridHelper2);
// var gridHelper3 = gridHelper.clone();
// gridHelper3.rotation = new THREE.Euler(Math.PI / 2,Math.PI / 2);
// scene.add(gridHelper3);
//
// var grid = new THREE.GridHelper(300,40,25,[0,1],0x000055,0.2,true,"#FFFFFF","left");
// scene.add(grid);
var x = (boundBox.max.x - boundBox.min.x).toFixed(2);
var y = (boundBox.max.y - boundBox.min.y).toFixed(2);
var z = (boundBox.max.z - boundBox.min.z).toFixed(2);
console.log(x);
console.log(y);
console.log(z);
console.log(boundBox);
mesh.position.set(0,0);
// mesh.position.x = scene.position.x;
// mesh.position.y = scene.position.y ;
// mesh.position.z = scene.position.z;
scene.add(mesh);
renderer.clear();
renderer.render(scene,camera);
} );
loader.load( '3dfile/莫比乌斯环.STL' );
}

这里根据文件类型选择相对应的js引入即可我加载的是STL模型所以我引入的是 STLLoader.js

如果需要显示网格标尺将网格部分代码去掉注释即可

下来是控制方法 (虽然我没有在显示代码里面写根据键盘按键放大缩小但还是提供给大家参考)

最后就是一个初始调用了

function threeStart() {
initThree();
initScene();
initCamera();
initLight();
initObject();
initControl();
animate();
}

附上完整代码

WebGL

哦我的文件结构

如果想要所有文件的小伙伴给我留言即可

补充一点,由于在显示模型的方法里我加入了 bBoxHelper = new THREE.BoxHelper() 所以我们可以获取到模型的 X Y Z三轴的尺寸也可以当作模型的长宽高

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

three.js实现3D模型展示的示例代码

猜你在找的JavaScript相关文章