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

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

先看看效果:

 

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

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

var width,height;
  var  renderer;
  function initthree() {
    width = document.documentelement.clientwidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} -->
    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 camera;
  function initcamera() {
    var view_angle = 45,
        aspect = width / height,
        near = 0.1,
        far = 10000;
    camera = new three.perspectivecamera(view_angle, aspect, near, far);
    camera.position.set(20, 0, 0);
    //设置视野的中心坐标
    camera.lookat(scene.position);
  }

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

加载场景:

/* 场景 */
   var scene;
   function initscene() {
     scene = new three.scene();
   }

加载灯光效果

/* 灯光 */
  var light,light2,light3;
  function initlight() {
    //平行光
    light = new three.directionallight(0xffffff);
    light.position.set(0, 99, 0).normalize();
    scene.add(light);
    //环境光
    light2 = new three.ambientlight(0x999999);
    scene.add(light2);
    //点光源
    light3 = new three.pointlight(0x00ff00);
    light3.position.set(300, 0, 0);
    scene.add(light3);
  }

显示模型对象:

/* 显示对象 */
  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, 0);
      camera.lookat(scene.position);
      scene.add(camera);
      //利用一个轴对象以可视化的3轴以简单的方式。x轴是红色的。y轴是绿色的。z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。
      var axishelper = new three.axishelper(800);
      scene.add(axishelper);

      //周围边框
      bboxhelper = new three.boxhelper();
      bboxhelper.visible = true;
      var meshmaterial = material;
      mainmodel = new three.mesh(geometry, meshmaterial);
      bboxhelper.update(mainmodel);
      bboxhelper.geometry.computeboundingbox();
      scene.add(bboxhelper);

      //地板网格
//      var gridhelper = new three.gridhelper(500, 40); // 500 is grid size, 20 is grid step
//      gridhelper.position = new three.vector3(0, 0, 0);
//      gridhelper.rotation = new three.euler(0, 0, 0);
//      scene.add(gridhelper);
//      var gridhelper2 = gridhelper.clone();
//      gridhelper2.rotation = new three.euler(math.pi / 2, 0, 0);
//      scene.add(gridhelper2);
//      var gridhelper3 = gridhelper.clone();
//      gridhelper3.rotation = new three.euler(math.pi / 2, 0, math.pi / 2);
//      scene.add(gridhelper3);
//
//      var grid = new three.gridhelper(300, 40, 25, [0, 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,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

<script src="js/stlloader.js"></script> 

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

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

//控制
  var effect;
  var controls;
  function initcontrol(){
    effect = new three.asciieffect( renderer );
    effect.setsize( width, height );
    controls = new three.trackballcontrols( camera,renderer.domelement);
  }

最后就是一个初始调用了

function animate() {
    requestanimationframe( animate );
    controls.update();
    effect.render( scene, camera );
  }

  function threestart() {
    initthree();
    initscene();
    initcamera();
    initlight();
    initobject();
    initcontrol();
    animate();
  }

附上完整代码

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>webgl</title>
  <script type="text/javascript" charset="utf-8" src="js/three.js"></script>
  <script src="js/stlloader.js"></script>
  <script src="js/trackballcontrols.js"></script>
  <script src="js/asciieffect.js"></script>
  <style>body{overflow:hidden;background:#eee}</style>
</head>
<script>
  var width,height;
  var renderer;
  function initthree() {
    width = document.documentelement.clientwidth/2; <!--{foreach from=$recommended_goods item=rgoods}--> <!-- {/foreach} -->
    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);
  }

  /* 摄像头 */
  var camera;
  function initcamera() {
    var view_angle = 45,
        aspect = width / height,
        near = 0.1,
        far = 10000;
    camera = new three.perspectivecamera(view_angle, aspect, near, far);
    camera.position.set(20, 0, 0);
    //设置视野的中心坐标
    camera.lookat(scene.position);
  }

  /* 场景 */
  var scene;
  function initscene() {
    scene = new three.scene();
  }

  /* 灯光 */
  var light,light2,light3;
  function initlight() {
    //平行光
    light = new three.directionallight(0xffffff);
    light.position.set(0, 99, 0).normalize();
    scene.add(light);
    //环境光
    light2 = new three.ambientlight(0x999999);
    scene.add(light2);
    //点光源
    light3 = new three.pointlight(0x00ff00);
    light3.position.set(300, 0, 0);
    scene.add(light3);
  }

  /* 显示对象 */
  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, 0);
      camera.lookat(scene.position);
      scene.add(camera);

      //利用一个轴对象以可视化的3轴以简单的方式。x轴是红色的。y轴是绿色的。z轴是蓝色的。这有助于理解在空间的所有三个轴的方向。
      var axishelper = new three.axishelper(800);
      scene.add(axishelper);

      //周围边框
      bboxhelper = new three.boxhelper();
      bboxhelper.visible = true;
      var meshmaterial = material;
      mainmodel = new three.mesh(geometry, meshmaterial);
      bboxhelper.update(mainmodel);
      bboxhelper.geometry.computeboundingbox();
      scene.add(bboxhelper);

      //地板网格
//      var gridhelper = new three.gridhelper(500, 40); // 500 is grid size, 20 is grid step
//      gridhelper.position = new three.vector3(0, 0, 0);
//      gridhelper.rotation = new three.euler(0, 0, 0);
//      scene.add(gridhelper);
//      var gridhelper2 = gridhelper.clone();
//      gridhelper2.rotation = new three.euler(math.pi / 2, 0, 0);
//      scene.add(gridhelper2);
//      var gridhelper3 = gridhelper.clone();
//      gridhelper3.rotation = new three.euler(math.pi / 2, 0, math.pi / 2);
//      scene.add(gridhelper3);
//
//      var grid = new three.gridhelper(300, 40, 25, [0, 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,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' );
  }

  //控制
  var effect;
  var controls;
  function initcontrol(){
    effect = new three.asciieffect( renderer );
    effect.setsize( width, height );
    controls = new three.trackballcontrols( camera,renderer.domelement);
  }

  function animate() {
    requestanimationframe( animate );
    controls.update();
    effect.render( scene, camera );
  }

  function threestart() {
    initthree();
    initscene();
    initcamera();
    initlight();
    initobject();
    initcontrol();
    animate();
  }
</script>
<body onload="threestart()">
<div id="loading" style="color:#fff">loading...</div>
</body>
</html>

哦 我的文件结构

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

补充一点,由于在显示模型的方法里我加入了 bboxhelper = new three.boxhelper() 所以我们可以获取到模型的 x y z三轴的尺寸 也可以当作 模型的长宽高 

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