Bermu

ThreeJS之载入模型

2018-08-14

三要素的加载

要知道的是，threeJS是为webgl做了许多工作的，那么最重要的一个流程无非是加载

  • camera [录制者⏺]
  • render [一切素材的准备🥗]
  • scene [一个舞台🏟]

为此我们首先要加载好三要素，才能对model进行操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var camera, scene, renderer;

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  // 远景相机
  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer({
    antialias: true  // 加入抗锯齿，可能产生性能上的卡顿
  });

  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  camera.position.x = 0;
  camera.position.y = 1;
  camera.position.z = 10;

可以看到我们首先加载了camera，并制定了它的位置，对于整个render我们加入了抗锯齿效果，那么有了这样的场景，就要增加舞台上的演员⛄️。

我们在Clara.io上寻找到了免费的模型，导出了json文件，你也可以通过3D max制作自己的model。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var loader = new THREE.ObjectLoader();
  loader.load('don-flip.json', function(obj) {
      scene.add(obj);
      animate();
    },

    // onProgress callback
    function(xhr) {
      console.log((xhr.loaded / xhr.total * 100) + '% loaded');
    },

    // onError callback
    function(err) {
      console.error('An error happened');
    });
    
var animate = function() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
  };

以上我们通过ObjectLoader载入本地的json文件，根据情况需要也可以选择JsonLoader，将json文件中的材质与几何结构赋予给场景，可以在onProgress的回调函数中查看模型是否加载成功。

但是当你运行以上代码时，可能发生一些错误，就是根本看不到任何图像，即使你成功load了模型，依然是黑屏！

那么问题出在我们没有添加光源的问题上

To fix

首先我们要加入光源，笔者选择了平行光

1
2
3
4
5
6
7
8
9
10
11
12
...
camera.position.z = 10;


 var dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
  dirLight.position.set(200, 200, 1000).normalize();
  dirLight.castShadow = true;

  scene.add(dirLight);
  scene.add(dirLight.target);
  
 ...

然后通过加入

1
2
3
renderer.setSize(window.innerWidth, window.innerHeight);
++ renderer.shadowMapEnabled = true; // 开启接受阴影
document.body.appendChild(renderer.domElement);

运行界面，我们即可看到加载好的模型。

为了让例子更加生动，我们需要让他做点transform，使这个例子不再生硬

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
...
++  var leef = new THREE.Object3D();

var loader = new THREE.ObjectLoader();
loader.load('don-flip.json', function(obj) {
  -- scene.add(obj);
  ++  leef.add(obj);
  ++  scene.add(leef);
  animate();
},
...

var animate = function() {
    ...
    ++ leef.rotation.y += 0.01;
    ...
    renderer.render(scene, camera);
 };

最终的效果展示💃

;

Tags: js生态
← Vue Cli 3 脚手架尝鲜🌾 gulp4.0配置 →
赏
使用支付宝打赏
使用微信打赏

若你觉得我的文章对你有帮助，欢迎点击上方按钮对我打赏

扫描二维码，分享此文章