初识three.js与简单练习

首先要创建场景scene 相机camera 渲染器render 一定要先根据官网引入three.js的js文件

const scene = new THREE.Scene(); //创建场景
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); 

const renderer = new THREE.WebGLRenderer();//创建渲染器对象
renderer.setSize( window.innerWidth, window.innerHeight ); //设置渲染区尺寸
document.body.appendChild( renderer.domElement );//body中插入canvas对象

/*

three.js有几种不同的相机

* 1.js有几种相机,分别是什么? [ a.四种相机: PerspectiveCamera （透视相机）、OrthographicCamera （正交投影相机）、CubeCamera （立方体相机或全景相机）和StereoCamera （3D相机）]

*

* 2.相机的参数分别是什么? [

* a.透视相机: PerspectiveCamera( fov, aspect, near, far ) fov: 视角大小, aspect: 宽高比, near: 近裁面, far: 远裁面

* b.正交投影相机: OrthographicCamera( left, right, top, bottom, near, far ) left: 视锥体左边界, right: 视锥体右边界, top: 视锥体上边界, bottom: 视锥体下边界, near: 近裁面, far: 远裁面

* c.立方体相机: CubeCamera( near, far, cubeResolution ) near: 近裁面, far: 远裁面, cubeResolution: 立方体纹理分辨率

* d.3D相机: StereoCamera( fov, aspect, near, far ) fov: 视角大小, aspect: 宽高比, near: 近裁面, far: 远裁面

* ]

*

* 3.相机的位置是怎么设置的? [

* a.相机的位置通过相机的position属性来设置的相机.position.set(x,y,z);

* ]

* 4.相机的方向是怎么设置的?[

* a.相机的方向通过相机的lookAt方法来设置的相机.lookAt(0,0,0);

* b．相机默认是由正z轴看像-z轴（相机镜头对着-z轴方向拍）就像是由屏幕外向屏幕内看一样 (模拟人眼的视觉效果)

* ]

* 5.相机的视野是怎么设置的?[

* a.相机以哪个视野为上方通过up方法来设置的

* b.相机.up.set(x,y,z); 默认是y轴向上就是你拿着相机是躺着拍，趴着拍还是侧着拍的区别，或是抬头看，低头看，扭头看的区别。

* ]

*/

根据官网例子

添加立方体

const geometry = new THREE.BoxGeometry(); //立方体图形
//材质对象material 这里表示给材质对象添加颜色,颜色仅支持十六进制的0x色彩
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );//网格模型对象添加到场景中

camera.position.z = 5;//相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理

渲染场景

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

添加动画函数,使物体转动

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

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

全部代码如下

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
	<style type="text/css">
		body { margin: 0; }
		canvas { width: 100%; height: 100%; }
	</style>
</head>
<body>
	<script type="text/javascript" src="js/three.js"></script>
	<script type="text/javascript">
		// 场景
		var scene = new THREE.Scene();
 
		// 摄像机
		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
		camera.position.z = 5;
		
		// 渲染器
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );
		// 渲染器 end
		
		// 物体
		var geometry = new THREE.BoxGeometry(1, 1, 1);
		var material = new THREE.MeshBasicMaterial( { color: 0x00ff00} );
		var cube = new THREE.Mesh( geometry, material );
		scene.add( cube );
       // 动画
function animate() {
 
 cube.rotation.x += 0.01;
 cube.rotation.y += 0.01;
 renderer.render( scene, camera );

 requestAnimationFrame( animate );
}
animate();
		// 物体 end
 // 光源
var spotLight = new THREE.SpotLight( 0xffffff );
spotLight.position.set( -40, 60, -10 );
scene.add( spotLight );
// 光源 end
// 物体
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );
// 物体 end
renderer.setClearColor(new THREE.Color(0x000000, 1.0));
renderer.shadowMap.enabled = true; 
cube.castShadow = true; //投射阴影
plane.receiveShadow = true; //地面接收阴影
spotLight.castShadow = true;
	</script>
</body>
</html>

效果如下上下左右旋转的一个正方体

个人练习代码

一定要引入three.js文件否则会白屏不会显示渲染

这里我使用的是远程仓库的three.main.js外联 vue项目可根据官网自行下载包


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: #ffff;   /* 背景色只能是hash模式 */
				margin: 0;
				overflow: hidden; /* 隐藏body窗口区域滚动条 */
			}
		</style>
	</head>
	<body>
        <!-- 起步 
        创建three.js文件在官网找到three.js代码粘贴进去 并导入到html文件中(必须引入three.js) 
    2.导入在线cdn的three.main.js链接

       -->
        <script type="text/javascript" src="../js/three.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>
		<script>
			var camera, scene, renderer;
			var geometry, material, mesh;
            // 此处声明了相机 场景
			function init() {

				scene = new THREE.Scene();  //创建场景对象
				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 12 );
				camera.position.z = 3; //相机视角大小,数值越小 视角越小,看到的就越大类似于小孔成像原理

				scene.background = new THREE.Color( 0xffffff );

           // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
				geometry = new THREE.SphereGeometry( 1,12,12 );
                 //材质对象Material，这里只是单单的给赋值颜色采用的是 十六进制的0x色彩
				material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true } );
               

				mesh = new THREE.Mesh( geometry, material );//网格模型对象
				scene.add( mesh ); //网格模型对象添加到场景中

				renderer = new THREE.WebGLRenderer( { antialias: true } ); //创建渲染器对象
				renderer.setSize( window.innerWidth, window.innerHeight );//设置渲染区尺寸
				document.body.appendChild( renderer.domElement );	//body中插入canvas对象			
				
			}
           //定义动画
			function animate( time ) {

				mesh.rotation.x = time * 0.0005;
				mesh.rotation.y = time * 0.001;

				renderer.render( scene, camera );//执行渲染操作 指定场景,相机作为参数
				requestAnimationFrame( animate );

			}
    //    此demo声明函数仅仅是为了便捷
			init();
			requestAnimationFrame( animate );

		</script>
	</body>
</html>

效果图如下一个旋转的球体

刚接触three,仅是个人初步了解.

初识three.js与简单练习

猜你喜欢