three.js的学习

最新推荐文章于 2022-07-16 17:15:14 发布

zz_zoe_zhou

最新推荐文章于 2022-07-16 17:15:14 发布

阅读量151

点赞数

本文链接：https://blog.csdn.net/zz_zoe_zhou/article/details/97884858

版权

一. 创建一个场景

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

var scene = new THREE.Scene();      // 场景,场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中。
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );                              //   相机

var renderer = new THREE.WebGLRenderer();                 // 渲染器
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );   //  renderer（渲染器）这个元素添加到我们的HTML文档中

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

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

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

接下来的两个值是远剪切面和近剪切面。也就是说当物体所在的位置比摄像机的远剪切面远或者所在位置比近剪切面近的时候，该物体超出的部分将不会被渲染到场景中。现在你或许并不用担心这个值的影响，但未来为了获得更好的渲染性能，你将可以在你的应用程序里去设置它。

除了创建一个渲染器的实例之外，我们还需要在我们的应用程序里设置一个渲染器的大小尺寸。比如说，我们可以使用所需要的渲染区域的宽高，来让渲染器渲染出的场景填充满我们的应用程序

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

最后，我们将renderer（渲染器）这个元素添加到我们的HTML文档中，这也就是渲染器使用<canvas>元素来将场景展现给我们。

<!DOCTYPE html>
<html>
	<head>
		<meta charset=utf-8>
		<title>My first three.js app</title>
		<style>
			body { margin: 0; }
			canvas { width: 100%; height: 100% }   //画布  
		</style>
	</head>
	<body>
		<script src="js/three.js"></script>
		<script>
			显示3D的代码在script里写入
		</script>
	</body>
</html>

canvas :

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

var geometry = new THREE.BoxGeometry( 1, 1, 1 );   //  BoxGeometry（立方体）对象. 
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );   //我们需要给它一个材质，来让它有颜色

var cube = new THREE.Mesh( geometry, material );    // 需要一个Mesh（网格）。 网格是包含有一个几何体以及应用在在此几何体上的材质的对象，我们可以直接将网格对象放入到我们的场景中，并让它在场景中自由移动
scene.add( cube );   //  我们调用scene.add()的时候，物体将会被添加到坐标为(0,0,0)的位置。但这可能会使得摄像机的位置和立方体相互重叠（也就是摄像机位于立方体中）。为了防止这种情况的发生，我们只需要将摄像机稍微向外移动一些即可。
camera.position.z = 5;

渲染场景

现在，如果你已经从上面复制了我们已经写好的代码到HTML文件中，你将不会在其中看到任何东西。这是因为我们还没有对它进行真正的渲染。为此，我们需要调用一个被叫做“渲染”或者“动画循环”的东西。

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

使立方体动起来

 function animate() {
            requestAnimationFrame( animate );
            cube.rotation.x += 0.01;  // 因为动画循环，所以移动了
            cube.rotation.y += 0.01;
            renderer.render( scene, camera );
        }

线条

 var material = new THREE.LineBasicMaterial( { color: 0x0000ff } );   //线条的材质
 var geometry = new THREE.Geometry();    // 普通几何体,里面有一个vertices变量，可以用来存放点。
 geometry.vertices.push(new THREE.Vector3( -10, 0, 0) );   // 三维点的坐标
 geometry.vertices.push(new THREE.Vector3( 0, 10, 0) );
 geometry.vertices.push(new THREE.Vector3( 10, 0, 0) );
 var line = new THREE.Line( geometry, material );  // 画两条线的点和一个材质，那我们现在就可以将他们组合在一起，形成一条线。
 scene.add( line );   // 剩把它添加到场景中，并调用render（渲染）函数。

Threejs中没有提供单独画点的函数，它必须被放到一个THREE.Geometry形状中，这个结构中包含一个数组vertices，这个vertices就是存放无数的点

Threejs使用的是右手坐标系

创建文字（Creating text）

1.将物体渲染为线框模型而不是实体

var sphereMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, wireframe: true});

zz_zoe_zhou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫