linaCharts开发笔记:Three.js基础

最新推荐文章于 2023-03-14 15:46:30 发布

暮之雪

最新推荐文章于 2023-03-14 15:46:30 发布

阅读量305

点赞数

分类专栏： js 文章标签： linaCharts three.js

本文链接：https://blog.csdn.net/u013090676/article/details/75932806

版权

js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

首先声明，这绝对不是一篇详尽的three.js教程，因为在很多基础上面，都会简单的几笔带过。写这篇博客的重点，在于解决一些实际的问题，这些问题可能您在基础教程中看不到，或者需要你稍微摸索一下，或者参考下api文档或者其他实例才能弄明白的。所以，如果您还没有了解过threejs，您可以参考一些基础的教程，例如:

http://www.hewebgl.com/article/articledir/1

ok，进入正题。

绘制一个三维的图形需要哪些？一个画布canvas，一个渲染器render，一个放置物体的场景scene，还有一个睁开的眼睛camera，还需要光light，最后再加上一个物体object。

canvas: <canvas id="mainCanvas" width="400" height="400"></canvas>

render：

	canvasmy = document.getElementById('mainCanvas');

	renderer = new THREE.WebGLRenderer({
        	canvas:canvasmy ,
        	ntialias:true, //设置抗锯齿
    	});

	renderer.setClearColor(0xf0f0f0);

	renderer.setSize(canvasmy.offsetWidth,canvasmy.offsetHeight)

渲染器一般情况下是使用 THREE.WebGLRenderer，他需要绑定一个canvas。ntialias:true是抗锯齿，这个请一定打开，否则生成的图像会有锯齿。setClearColor设置渲染的背景色，setSize设置大小，一般直接取canvas的大小。

scene:

scene = new THREE.Scene();

这个没什么好说的，就这样一句就好了。但是请记住，凡是被添加到场景中的物体才会显示。也就是你写完一个物体的时候，一定记住scene.add()。

camera:

	camera = new THREE.PerspectiveCamera(70, 6 / 6, 10, 5000);
       	camera.position.set(100, 100, 100);
        camera.lookAt(new THREE.Vector3(0, 0, 0));
        scene.add(camera);

虽然这个字面意思是相机，但我更认为他是眼睛，他决定了你能看到什么，用什么方式去看。相机有多种，这里不多谈，一般用到的是 PerspectiveCamera。第一个参数就是视野角，就是你眼睛睁得有多大。第二个参数是纵横比，一般设置成canvas的宽高比。第三个参数是可以看到的最近距离，第四个参数是最远距离，只有在这之间的物体你才看得到。position就是你站在那里，lookat表示你面向哪里，往哪里看，参数是一个三维坐标系中的点。最后记得，相机也要加入场景。

light:

光。不少人都遇到过这样的问题，照着步骤添加了照相机，场景，物体……，但是自己还是什么也看不见，这时请把灯打开。光有许多种，主要用到的有三种

AmbientLight:环境光，简单的理解，就是让你可以看到所有物体的光，他没有方向所以不会产生阴影，就和大白天一样的。

light = new THREE.AmbientLight(0x444444);
scene.add(light);

记住，光也需要加入scene。

DirectionalLight 平行光。这种光可以看出一组平行的射线，它们都朝向一个方向。可以看出是太阳光，从无限远沿着一个方向照射过来，它是可以产生阴影的。值得一提的是，不要为它设置旋转属性，这是无效的。还有就是它的position属性，表示从光的位置指向目标的位置。比如你在(0,0,0)上放一个平面，平面面向(100,0,0).这个时候你把平行光的position设置在(100,0,0),那么你就只能看到面向(100,0,0)的面，而背面完全是黑的。

        light = new THREE.DirectionalLight( 0xffffff,0.3 );
        light.position.set( 200, 0, 0 );
        scene.add( light );

后面的0.3表示光的强度，默认是1.和太阳光一样，强度越强就越刺眼。

PointLight 点光源，这个大家都懂的。

light = new THREE.PointLight( 0xff0000, 1, 100 );

第一个参数是光的颜色，第二个参数是光的强度，第三个是距离，就是光能照射多远，如果设置为0，表示无限远，注意这个距离，光从出发点到这个距离，是线性递减的，最后变成0.

最后说的，便是物体，这也是最复杂的，内容非常多，本篇先选择最简单的物体介绍——一个圆柱。

首先一个公式: 物体 = 几何 + 材质，也就是 Geometry + Material，其中几何决定了物体的型，表示这是个啥样子的物体，圆的方的扁的……，材质表示了物体看起来像什么，看起来像玻璃，木头，还是墙壁，是透明的还是反光的。

Geometry 又可以分为点，线，面，体。这里注意一下面，面是没有高度的体，所以你从侧面看一个面，你将什么都看不到，因为他没有高度。所以在实际绘图中，我一般会用一个高度为1的正方体来代替面。

geometry = new THREE.CylinderGeometry( 8,8,8,50);

这就是一个圆柱，但是注意，这是一个空心的圆柱。第一二个参数表示顶面和底面的圆的半径，如果两个值不一样就是圆台，如果一个为0就是圆锥。下面列出所有的参数:

CylinderGeometry( radiusTop , radiusBottom , height , radiusSegments , heightSegments , openEnded , thetaStart , thetaLength )

分别是:顶面圆的半径，底面面的半径，高度。 radiusSegments便是圆的分段，简而言之，圆是由正n边线去模拟的，而 radiusSegments就是这个n，值越大越逼近一个圆，默认值是8. heightSegments设置成1就好了。 openEnded表示是否封顶，就是两边那两个圆要不要，默认是false，即封顶的。最后两个参数是开始的角度和扇形的角度。比如从0开始画1/2*PI就是一个1/4圆，这里的角是弧度而不是角度，但是记得这个绘制的圆柱是空心的……

看上去就是这样的，里面是空的。

material 的材质就比较多了。基本用到的是 MeshBasicMaterial基础材质，MeshLambertMaterial 不反光材质，MeshPhongMaterial 反光材质，比如玻璃啊金属什么的。

material = new THREE.MeshPhongMaterial( {color:0xEE0000,opacity:1,transparent:true} );

这是使用l一个反光材质，设置了颜色，透明度。在设置opacity的时间，记得设置transparent:true。

最后，几何材质合体，生成物体……

                var geometry = new THREE.CylinderGeometry( 8,8,10,50);
                var material = new THREE.MeshPhongMaterial( {color:0xEE0000,opacity:1,transparent:true} ); 
                var cylinder = new THREE.Mesh( geometry, material ); 
                scene.add( cylinder );

最后，生成了物体，这时很多人就会想如果拖动我的物体呢，如果旋转和观察我的物体呢，如果放大缩小物体呢？这里介绍下OrbitControls.js，这是控制相机的

一、首先导入js（在three.js之后导入）

二、

controls = new THREE.OrbitControls( camera, renderer.domElement );

三、在render中:

            function render(){
                requestAnimationFrame(render);
                renderer.render(scene,camera);
                controls.update();
            }

大功告成……