用three.js实现3D模型的展示(1)

     我个人是初步粗略地学习了html,css,js后,再大致了解一下three.js,然后边学边做的。
     three.js官网上的入门介绍让人很好地理解了three.js工作时大致感觉:一种类似于标记语言的东西。有场景,摄像机,材料,渲染器等一系列已经成型的具体事物,你需要做的仅仅是调用它们,就像使用游戏引擎一样。

     需要注意的是,在一个html中调用three.js时,一定要注意自己是否已经在头部调用好相关的js了,three.js的很多功能需要除了three.js外其他的一些js,比如OBJLoader等。在这里给出我调用的js。(因为没什么经验,我把要用的js直接从three.js总的文件夹里复制出来了,这是不值得提倡的)









  我的目标是在展示3D模型,能导入模型、对模型进行简单的操作、操纵摄像机的角度从不同方向观察模型、保存模型到本地等一系列功能。我先是参照官网上的代码,生成场景、摄像机、渲染器这三样东西。代码如下:
var scene,camera,renderer;
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
camera.position.set(15,15,15);
renderer = new THREE.WebGLRenderer();
renderer.setSize(1000,500);
renderer.shadowMapEnabled = true;
document.getElementById("scene").append(renderer.domElement);


  然后就是模型了,在three.js中,模型的属性最重要的时几何形状与材料。几何形状(geometry)顾名思义是指模型的形状,而材料(material)在我个人了解下则是指这个模型的表面性质,比如three.js的基础材料对光是没有反应的,比如说如果我们想看到阴影啊明暗变化啊就要用MeshLambertMaterial这种材料,而不能用MeshBacisMaterial。因为我参照其他人的写法,对于环境的初始化是放在一个命名为init()的函数中,而载入模型是单独的另一个函数,所以此处便不引用代码了。


  说到载入模型,我们可以看到官网上的第一个实例,是在js中直接生成的一个预设好的cube的geometry并没有什么疑问,而我在使用OBJLoader.js调用本地的obj文件时却发现并不能成功,即使是参照网上的视频一步步对照依旧不行,我现在并不能完全确定原因,但我在了解到出于安全考虑,web上的js不能读取本地文件后,初步判断是这导致的,(之后调用服务器上的obj文件发现是可以载入的)但是视频中却成功了,这让我有些不解,如果有人评论解答我的疑惑,我会十分感激。


  这是three.js展示模型的第一部分,我会周更把我学到的东西分享一下,欢迎大家指出我的错误和不妥之处。

你可能感兴趣的:(用three.js实现3D模型的展示(1))