【three.js】3D模型创建 + 模型弹框 + 动画效果_three.js点击3d模型弹窗

目录

 一、创建一个场景

场景

摄像机

渲染器

二、添加立方体

渲染场景

使立方体动起来

三、场景光源

方向光介绍

如何使用方向光

四、旋转特效

五、缩放

六、平移

七、位置属性position

---

 一、创建一个场景

为了真正能够让 场景（Scene） 借助three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过 摄像机 渲染出场景。

//创建一个场景 Scene
scene = new THREE.Scene();//构造函数
scene.background = new THREE.Color( 0x8cc7de );//背景
 
//摄像机(camera) 摄像机包括PerspectiveCamera（透视投影摄像机）和正交投影摄像机
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
//渲染器(Renderer)
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

我们现在建立了场景、相机和渲染器。

场景

    //创建一个场景 Scene

   scene = new THREE.Scene();//构造函数

   scene.background = new THREE.Color( 0x8cc7de );//背景

摄像机

   three.js里有几种不同的相机，在这里，我们使用的是PerspectiveCamera（透视摄像机）。

   第一个参数是视野角度（FOV）。视野角度就是无论在什么时候，你所能在显示器上看到的场景的范围，它的值是角度单位。

   第二个参数是长宽比（aspect ratio）。 也就是你用一个物体的宽除以它的高的值。比如说，当你在一个宽屏电视上播放老电影时，可以看到图像仿佛是被压扁的。

   接下来的两个参数是近截面（near）和远截面（far）。 当物体某些部分比摄像机的远截面远或者比近截面近的时候，该这些部分将不会被渲染到场景中。或许现在你不用担心这个值的影       响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。

渲染器

   这里是施展魔法的地方。除了我们在这里用到的WebGLRenderer渲染器之外，Three.js同时提供了其他几种渲染器，当用户所使用的浏览器过于老旧，或者由于其他原因不支持WebGL           时，可以使用这几种渲染器进行降级。

  除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的尺寸。比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程    序。因此，我们可以将渲染器宽高设置为浏览器窗口宽高。对于性能比较敏感的应用程序来说，你可以使用setSize传入一个较小的值，例      如 window.innerWidth/2  和  window.innerHeight/2，这将使得应用程序在渲染时，以一半的长宽尺寸渲染场景。

  如果你希望保持你的应用程序的尺寸，但是以较低的分辨率来渲染，你可以在调用setSize时，将updateStyle（第三个参数）设为false。例如，假设你的<canvas> 标签现在已经具有了   100%的宽和高，调用setSize(window.innerWidth/2, window.innerHeight/2, false)将使得你的应用程序以一半的分辨率来进行渲染。

  最后一步很重要，我们将renderer（渲染器）的dom元素（renderer.domElement）添加到我们的HTML文档中。这就是渲染器用来显示场景给我们看的<canvas>元素。

二、添加立方体

//BoxGeometry（立方体）对象
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
 
//材质（MeshBasicMaterial）
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
 
//Mesh（网格） - 将网格对象放入到我们的场景中
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
 
camera.position.z = 5;

要创建一个立方体，我们需要一个BoxGeometry（立方体）对象. 这个对象包含了一个立方体中所有的顶点（vertices）和面（faces）。

接下来，对于这个立方体，我们需要给它一个材质，来让它有颜色。Three.js自带了几种材质，在这里我们使用的是MeshBasicMaterial。所有的材质都存有应用于他们的属性的对象。在这里为了简单起见，我们只设置一个color属性，值为0x00ff00，也就是绿色。这里所做的事情，和在CSS或者Photoshop中使用十六进制(hex colors)颜色格式来设置颜色的方式一致。

第三步，我们需要一个Mesh（网格）。 网格包含一个几何体以及作用在此几何体上的材质，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动。

默认情况下，当我们调用scene.add()的时候，物体将会被添加到(0,0,0)坐标。但将使得摄像机和立方体彼此在一起。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。

渲染场景

现在，如果将之前写好的代码复制到HTML文件中，你不会在页面中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此，我们需要使用一个被叫做“渲染循环”（render loop）或者“动画循环”（animate loop）的东西。

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

在这里我们创建了一个使渲染器能够在每次屏幕刷新时对场景进行绘制的循环（在大多数屏幕上，刷新率一般是60次/秒）。如果你是一个浏览器游戏开发的新手，你或许会说“为什么我们不直接用setInterval来实现刷新的功能呢？”当然啦，我们的确可以用setInterval，但是，requestAnimationFrame有很多的优点。最重要的一点或许就是当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命。

使立方体动起来

在开始之前，如果你已经将上面的代码写入到了你所创建的文件中，你可以看到一个绿色的方块。让我们来做一些更加有趣的事 —— 让它旋转起来。

将下列代码添加到animate()函数中renderer.render调用的上方：

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

这段代码每帧都会执行（正常情况下是60次/秒），这就让立方体有了一个看起来很不错的旋转动画。基本上来说，当应用程序运行时，如果你想要移动或者改变任何场景中的东西，都必须要经过这个动画循环。当然，你可以在这个动画循环里调用别的函数，这样你就不会写出有上百行代码的animate函数。

三、场景光源

                //场景光源(Lights)
				const directionalLight1 = new THREE.DirectionalLight( 0xffeeff, 0.8 ); // 创建方向光
				directionalLight1.position.set( 1, 1, 1 ); //光源定位
				scene.add( directionalLight1 ); //给场景添加光源
 
				const directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.8 ); // 创建方向光
				directionalLight2.position.set( - 1, 0.5, - 1 ); //光源定位
				scene.add( directionalLight2 ); //给场景添加光源
 
				const ambientLight = new THREE.AmbientLight( 0xffffee, 0.25 );
				scene.add( ambientLight );//给场景添加光源

方向光介绍

方向光发出的所有光线都是平行的，可以认为是距离很远的光源，例如遥远的太阳光就是方向光，方向光不像聚焦光那样距离目标越远越暗淡，被方向光照射的整个区域收到的光照强度都一样

如何使用方向光

1.创建方向光
创建一个简单的方向光，通过new THREE.DirectionalLight(color)语句就可以创建一个指定颜色的方向光，然后将它添加到场景中就可以了

var directionalLight = new THREE.DirectionalLight(0x0c0c0c) // 创建方向光
scene.add(directionalLight ) // 将方向光添加到场景

2.方向光的属性
2.1颜色-color
color属性继承自基类Light，color属性的类型是Color，所以color属性的值需要通过颜色对象THREE.Color()来创建

2.2是否可见-visible
visible属性继承自基类Object3D，使用很简单，该属性时布尔类型，取值true或false

2.3强度-intensity
intensity属性是用来设置聚光灯的强度，默认值是1，如果设置成0那什么也看不到，该值越大，点光源看起来越亮

2.4目标-target
target属性用来决定光照的方向，一般会指向一个对象

2.5位置-position
position属性表示光源的发光位置，该属性继承自基类Object3D，positon属性的类是Vector3

2.6是否产生阴影-castShadow
castShadow属性是用来控制光源是否产生阴影，取值为true或false

2.7投影远点-shadow.camera.far
表示到距离光源的哪一个位置可以生成阴影

2.8投影近点-shadow.camera.near
表示距离光源的哪一个位置开始生成阴影

2.9投影上边界-shadow.camera.top
2.10投影下边界-shadow.camera.bottom
2.11投影左边界-shadow.camera.left
2.12投影右边界-shadow.camera.right
2.13shadow.mapSize.width 和 shadow.mapSize.height
阴影映射宽度和阴影映射高度。决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时，可以增加这个值。在场景渲染之后无法更改，默认值都为512

四、旋转特效

           function animate() {
				// 让场景通过x轴或者y轴旋转  & z
				// scene.rotation.x += 0.011;
				scene.rotation.y += 0.008;
				requestAnimationFrame( animate );
				TWEEN.update();
				controls.update();
				// 渲染循环
				render();
			}

•  rotation是绕坐标轴旋转，如果物体的坐标轴和three.js坐标轴重合，效果就一样。如果物体发生了旋转，再次旋转物体则不会出现想象中的效果。
• 如果不循环渲染的话旋转一遍就会停哦~
• 物体的rotation的旋转属性是相对与该物体的本身坐标系而言的，物体的rotation就是Euler欧拉角，但是会存在万向节死锁的问题。
• rotation属性和旋转方法rotateX()差异类似  position属性和平移方法translateX()  的差异，一个是相对坐标系设置角度、位置，一个是相对当前的三维模型的状态设置角度、位置参数。 旋转与平移参考的都是坐标系，不过参考的坐标系稍有不同，平移参考的是世界坐标系或者说三维场景对象Scene的坐标系，和相机对象一样，在整个三维场景中的位置， 三维模型的旋转参考的是模型坐标系，也就是对三维模型本身建立的坐标系。

几何体rotateX() 

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 几何体绕着x轴旋转45度
geometry.rotateX(Math.PI / 4);

五、缩放

立方体网格模型x轴方向放大2倍，如果连续执行两次该语句，相等于比原来方法4倍

 mesh.scale.x = 2.0;//x轴方向放大2倍

立方体网格模型整体缩小0.5倍，相当于xyz三个方向分别缩小0.5倍

mesh.scale.set(0.5,0.5,0.5);//缩小为原来0.5倍

网格模型Mesh的属性scale返回值是一个Vector3对象，查看three.js官方文档你可以知道Vector3对象具有属性x、y、z对于上面的代码而言xyz表示坐标值，xyz数据类型是float，Vector3对象还具有方法set()，set方法有三个表示xyz坐标的参数。

几何体缩放使用

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 几何体xyz三个方向都放大2倍
geometry.scale(2, 2, 2);
//x轴方向放大2倍;y、z同理
geometry.scale.x = 2.0;

注意网格模型Mesh进行缩放旋转平移变换和几何体Geometry可以实现相同的渲染效果，但是网格模型Mesh进行这些变换不会影响几何体的顶点位置坐标，网格模型缩放旋转平移变换改变的是模型的本地矩阵、世界矩阵。 

六、平移

立方体网格模型沿着x轴正方向平移100，可以多次执行该语句，每次执行都是相对上一次的位置进行平移变换。

 mesh.translateX(100);//沿着x轴正方向平移距离100

网格模型沿着向量(0,1,0)表示的方向平移100。

var axis = new THREE.Vector3(0,1,0);//向量axis
mesh.translateOnAxis(axis,100);//沿着axis轴表示方向平移100

translateOnAxis(axis, distance)方法相比.translateX、.translateY、.translateZ更通用，可以实现立方体沿着任何方向旋平移，参数axis表示平移方向，使用对象Vector3表示

几何体平移使用

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 几何体沿着x轴平移50
geometry.translate(50, 0, 0);

七、位置属性position

立方体网格模型位置坐标(80,2,10)

 mesh.position.y = 80;//设置网格模型几何中心y坐标

立方体网格模型几何中心y轴坐标值80

mesh.position.set(80,2,10);//设置网格模型几何中心三维坐标

position属性和平移方法translateX()一样都是设置距离，方法translateX()设置的相对上次位置进行平移，两次执行该方法，距离会叠加，position属性设置的距离是相对坐标系原点位置， 两次执行position属性立方体的会只会更新重新定位，两次的距离参数不是叠加关系，而是替换关系。

几何体居中使用

var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
// 居中：偏移的几何体居中
geometry.center();