threejs构建web三维视图入门教程

Profeel 发布于2019-08-21 10:43 / 1709人阅读

摘要：本文是一篇简单的构建三维视图的入门教程，你可以了解到利用创建简单的三维图形，并且控制图形运动。然后将其加入到中。三创建对象大多数时候，我们需要讲绘制的图形整合到一起进行控制。在轴上运动的完整代码这个入门教程就到这里了，感谢阅读。

本文是一篇简单的webGL+threejs构建web三维视图的入门教程，你可以了解到利用threejs创建简单的三维图形，并且控制图形运动。若有不足，欢迎指出。
本文使用的框架是three.js
github地址：https://github.com/mrdoob/three.js，
官网：http://threejs.org/，
文档：http://threejs.org/docs/，

本文中的示例已上传github，地址：https://github.com/RizzleCi/three.js-demo

一、创建场景

我们所见的视图由两个部分共同创建，scene和camera。
首先定义一个场景：

var scene = new THREE.Scene();

然后定义一个相机：

var camera = new THREE.PerspectiveCamera( 90, width/height, 0.1, 1000 );

等等，定义相机需要视窗的长宽。现在我要让我的绘图显示在页面的一个区域（

)标签中。我们来选中这个元素，获取它的长宽。

var container = document.getElementById("canvasdiv");
var width = canvasdiv.clientWidth;
var height = canvasdiv.clientHeight;

这样再加上前面的一行代码，我们就完成了对相机的定义。然后把相机位置设定在z轴上方便观察。
camera.position.set(0,0,10)

现在我们需要一个渲染器把定义好的场景渲染出来。

var renderer = new THREE.WebGLRenderer();

给这个渲染器合适的大小。

renderer.setSize( width, height );

然后将其加入到dom中。

canvasdiv.appendChild( renderer.domElement );

（运行以后发现这其实就是一个canvas元素。其实我们也可以在html中创建canvas元素再将renderer绑定到它上面。var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById("mainCanvas") });）
最后进行渲染。

renderer.render(scene,camera);

这样，就建立了一个简单的3d场景。

二、绘制图形

我将threejs中的物体理解为模型+材料。以一个长方体为例。
创建模型：

var geometry = new THREE.BoxGeometry( 1,2,1 );

定义材料：

var material = new THREE.MeshBasicMaterial( { color: 0x645d50 } );

有了这两者，我们就可以构建一个长方体方块了。

var cube = new THREE.Mesh( geometry, material );

我们将其添加到场景中显示。

scene.add( cube );

这样，一个三维的长方体就绘制完成了
关于其他形状的绘制，张雯莉的threejs入门指南中介绍的很详细，在此不多赘述。
这部分的完整代码如下：




    
    Document

看上去它只是一个长方形而已，但是它确实是一个立体图形，你可以改变一下camera的位置来观察一下。

camera.position.set( 5,3,10 );

好了，这样看起来是一个立体的长方体了吧。

三、创建3d对象

大多数时候，我们需要讲绘制的图形整合到一起进行控制。此时，我们便需要一个3d对象。

创建一个自己的对象

在上面绘制的那个长方体上面再放一个球。

var geometry = new THREE.SphereGeometry( 0.5,100,100 );
var material = new THREE.MeshBasicMaterial( { color: 0xb9c16c } );
var ball = new THREE.Mesh( geometry,material );
ball.position.set( 0,0,1 );
scene.add(ball);

另说一句，默认放置mesh的位置是( 0,0,0 )，和改变相机位置一样，我们可以用ball.position.set方法来改变图形或对象的位置。因此动画也利用这个方法来实现。
然后要把它们整合成一个对象。
首先我们创建一个对象。

var myobj = new THREE.Object3D();

然后把我们画的图形添加到对象里就ok啦。

myobj.add( cube );
myobj.add( ball );

这时候我们已经有了一个3d对象，它包含我们刚刚绘制的长方形和球。于是就没有必要像原来那样把图形一个一个地放置到场景里，只需要把刚刚创建的对象放置到场景里。

scene.add( myobj );

完整代码如下：




    
    Document

外部导入.obj文件

threejs支持从外部导入.obj文件，听说这种文件是用3DsMax绘制的，用PS也可以编辑。我们需要引入OBJMTLLoader.js，MTLLoader.js文件；也有一个OBJLoader.js，但利用这个库只能导入模型而不能导入绘制obj时添加的材质，个人感觉不是非常实用，就不做介绍了。这时候，我们需要把文件们放到一个服务器上，否则会出现跨域问题。
为了让图像更明显，我们添加一些光线。

scene.add( new THREE.AmbientLight( 0xffffff ) );

这里，我们通过导入图片来设置这个对象的纹理。

var texture = new THREE.Texture();
var loader = new THREE.ImageLoader( );
loader.load( "tank.jpg", function ( image ) {
    texture.image = image;
    texture.needsUpdate = true;
} );

开始导入我们的3D对象！

var loader = new THREE.OBJMTLLoader();  
loader.load("tank.obj","tank.mtl",function(object){ 
    tank = object;

    object.traverse(function(child){
        if (child instanceof THREE.Mesh){
        //将贴图赋于材质
            child.material.map = texture;
            child.material.transparent = true;
        }
    });
    object.position.set(0,0,0);
    scene.add( object );  
    camera.lookAt( object.position ); 
    renderer.render( scene,camera );  
});

模型导入进去了，但是看起来还是很奇怪，这就要我们加一些其他光线渲染一下。在这里我们添加平行光线。

var directionalLight = new THREE.DirectionalLight( 0xffffff, 1.5 );
directionalLight.position.set( 1, 1, 1 )
scene.add( directionalLight );

变得光泽多了。
从外部导入obj的完整代码：




    
    Document

四、动画

现在我们想办法让这些图形动起来。
在threejs中运用最多的动画是用requestAnimationFrame()方法。也可以利用传统的setInterval()做，但用这个会掉帧。
这里我们做一个render函数，来进行渲染和动画调用。这里以前面添加了myobj对象的代码为基础。

基本的动画

现在来不断地改变对象的角度方便对其进行观察。




    
    Document

对动画进行控制

接着让我们对动画进行控制。
在我实现的项目中，是通过websocket连接后台传入参数来控制对象运动的，这里就介绍一下使用参数控制吧。
这里有一个问题，就是requestAnimationFrame回调的函数不能带有参数，否则会出现奇怪的bug。所以我选择用一个全局对象来进行控制。

var control={
    s:0,
    p:0,
    q:0,
    j:0,
}

这里s是运动的速度，p,q,j分别是myobj将要运动到的位置的x,y,z坐标。我们先写一个控制它在x轴上运动的函数：

var run = function () {
    if ( myobj.position.xcontrol.p ) {
        myobj.position.x -= control.s;
        requestAnimationFrame( run );
        renderer.render( scene,camera )
    };
}

再在render函数中添加对run的调用requestAnimationFrame( run )。这样就可以在命令行中改变对象control的值实现控制myobj的运动。但是在运动停止后我的浏览器为什么会变得很卡，而且运动速度回有变化。我还不知道原因。不知道有没有朋友和我有同样的问题。于是我把函数拆成了两个，这样浏览器性能好些。

var run = function () {

    if ( myobj.position.xcontrol.p ) {
    myobj.position.x -= control.s;            
        requestAnimationFrame( runx );
    };
        renderer.render( scene,camera )    
}

同样的，也可以写出在y,z轴上运动的函数。
在x轴上运动的完整代码：




    
    Document

这个入门教程就到这里了，感谢阅读。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/86079.html

SegmentFault 技术周刊 Vol.35 - WebGL：打开网页看大片

摘要：在文末，我会附上一个可加载的模型方便学习中文艺术字渲染用原生可以很容易地绘制文字，但是原生提供的文字效果美化功能十分有限。 showImg(https://segmentfault.com/img/bVWYnb?w=900&h=385); WebGL 可以说是 HTML5 技术生态链中最为令人振奋的标准之一，它把 Web 带入了 3D 的时代。初识 WebGL 先通过几个使用 Web...

objc94 2019-08-21 17:08 评论0 收藏0
产品三维模型在线预览

摘要：次时代传统的方式就是创建次时代模型，对应中的材质是高光网格材质对象，通常贴图文件包含颜色贴图法线贴图和高光贴图。产品在线展示案例预览玉镯在线预览：http://www.yanhuangxueyuan.co... 汽车在线预览：http://www.yanhuangxueyuan.co... Web3D技术历史可通过插件或WebGL技术实现Web3D，在线网页上预览操作三维...

DirtyMind 2019-08-23 12:08 评论0 收藏0
产品三维模型在线预览

摘要：次时代传统的方式就是创建次时代模型，对应中的材质是高光网格材质对象，通常贴图文件包含颜色贴图法线贴图和高光贴图。产品在线展示案例预览玉镯在线预览：http://www.yanhuangxueyuan.co... 汽车在线预览：http://www.yanhuangxueyuan.co... Web3D技术历史可通过插件或WebGL技术实现Web3D，在线网页上预览操作三维...

darkbug 2019-08-05 15:02 评论0 收藏0
vue-threeJS数据驱动的三维图形可视化

摘要：数据驱动的三维图形可视化在信息暴涨的年间，冷暴力的扁平化确实有效降低用户的信息焦虑感，使有限的精力更高效处理过多的信息流。数据驱动的三维图形可视化在信息暴涨的2010-2016年间，冷暴力的扁平化确实有效降低用户的信息焦虑感，使有限的精力更高效处理过多的信息流。二维平面化扁平化在苹果等大头引领下，成为大众用户机器交流默认的语言。然后，随着PC、平板、手机、智能家居等用户持有终端的性...

SegmentFault 2019-08-23 11:37 评论0 收藏0
高仿腾讯QQ Xplan（X计划）的H5页面（1）：threejs创建地球

摘要：首先是这个地球，得看看它是真还是假因为很多效果是拿雪碧图做的，比如这里的旋转的飞机，结果找到了并且在网站文件中搜到了，那就是没跑了。上个月底，在朋友圈看到一个号称这可能是地球上最美的h5的分享，点进入后发现这个h5还很别致，思考了一会，决定要不高仿一个? 到今天为止，高仿基本完成，线上地址 github地址除了手机端的media控制没有去兼容，其他的基本都给仿了。那为了让你...

MartinHan 2019-08-20 17:02 评论0 收藏0