记录–Three.js入门教程——教不会算我输

  • 记录–Three.js入门教程——教不会算我输已关闭评论
  • 145 次浏览
  • A+
所属分类:Web前端
摘要

在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情,因为在浏览器中就能够渲染出3D场景,非常简单和轻便。接下来就总结以下我学习Three.js过程中的心得。


这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--Three.js入门教程——教不会算我输

在javascript中使用Three.js设计并且实现3D场景是一个很有意思的事情,因为在浏览器中就能够渲染出3D场景,非常简单和轻便。接下来就总结以下我学习Three.js过程中的心得。

1 建立基本场景

在Three.js中有三要素:场景、摄像机和渲染器,只有以上三者结合才能渲染出可见的内容。当然在这之前你需要先下载Three.js文件,直接百度搜索Three.js到官网下载即可,下载完成之后新建一个html文件并且引入Three.js即可。一个最基本的使用Three.js的html文件应该是这样子的:

<!DOCTYPE html> <html> <head> 	<title>Wonanut 3D</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 ); 		// 物体 end   	</script> </body> </html>

我们打开浏览器看一下:

记录--Three.js入门教程——教不会算我输

哦天哪,发生了什么,浏览器上黑乎乎一片什么都没有啊。

别急,这是因为我们只是设置了三要素,但并没有渲染,只有使用渲染器scene和camera进行渲染之后才能看到内容,在scene.add( cube ); 后面添加一句:

renderer.render(scene, camera);

再试试效果如何:

记录--Three.js入门教程——教不会算我输

快看,现在屏幕中出现了一个正方形,这正是我们所期待的!

但是,我们使用的Three.js不应该是三维场景吗,为什么现在只有平面效果?不急,接下来我们使用requestAnimationFrame让画面动起来! 

2 让画面动起来

将上一步中最后一句代码:

renderer.render(scene, camera);

替换为:

// 动画 function animate() {       cube.rotation.x += 0.01;     cube.rotation.y += 0.01;     renderer.render( scene, camera );       requestAnimationFrame( animate ); } animate();

再到浏览器看看效果,如果没有什么问题的话,现在你所看到的画面应该是一个旋转的立方体:

记录--Three.js入门教程——教不会算我输

不过我对这个效果还是不满意,它看起来像是一个 正方体,但缺少了阴影灯光效果,接下来我们添加灯光效果。

3 添加光效

使用点光源THREE.SpotLight,代码如下:

// 光源 var spotLight = new THREE.SpotLight( 0xffffff ); spotLight.position.set( -40, 60, -10 ); scene.add( spotLight ); // 光源 end

同时将cube的材质从MeshBasicMaterial换为MeshLamberMaterial,因为最基本的MeshBasicMaterial材质对光源不会有任何反应。

// 物体 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

记录--Three.js入门教程——教不会算我输

4 添加阴影效果

为了渲染阴影效果,需要对代码做如下修改:

renderer.setClearColor(new THREE.Color(0x000000, 1.0)); renderer.shadowMap.enabled = true;

同时要给立方体设置投射阴影:

cube.castShadow = true;

设置地面接受阴影:

plane.receiveShadow = true;

设置spotLight投射阴影:

spotLight.castShadow = true;

为了添加阴影效果,我们需要设置一个平面来接受阴影,因此重新创建一个场景,源码如下:

<!DOCTYPE html> <html> <head> 	<title>Wonanut 3D</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" src="js/stats.js"></script> 	<script type="text/javascript"> 		 场景----------------------- 		var scene = new THREE.Scene(); 		 --------------------------   		 摄像机--------------------- 		var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); 		camera.position.x = -30; 		camera.position.y = 40; 		camera.position.z = 30 		camera.lookAt(scene.position); 		 -------------------------- 		 		 渲染器-------------------- 		var renderer = new THREE.WebGLRenderer(); 		renderer.setSize( window.innerWidth, window.innerHeight ); 		document.body.appendChild( renderer.domElement ); 		 		// 设置渲染器渲染阴影效果 		renderer.setClearColor(new THREE.Color(0x000000)); 		renderer.setSize(window.innerWidth, window.innerHeight); 		renderer.shadowMap.enabled = true; 		 渲染器 end----------------   		 坐标轴-------------------- 		var axes = new THREE.AxesHelper(20); 		scene.add(axes); 		 -------------------------   		 平面--------------------- 		var planeGeometry = new THREE.PlaneGeometry(60, 20, 1, 1); 		var planeMaterial = new THREE.MeshLambertMaterial({color: 0xcccccc}); 		var plane = new THREE.Mesh(planeGeometry, planeMaterial); 		plane.rotation.x = -0.5 * Math.PI; 		plane.position.x = 15 		plane.position.y = 0 		plane.position.z = 0 		scene.add(plane);   		// 设置投影 		plane.receiveShadow = true; 		 -------------------------- 		 		 物体---------------------- 		var geometry = new THREE.BoxGeometry(4, 4, 4); 		var material = new THREE.MeshLambertMaterial( { color: 0x00ff00} ); 		var cube = new THREE.Mesh( geometry, material ); 		cube.position.x = 0; 		cube.position.y = 2; 		cube.position.z = 0;   		// 设置投影 		cube.castShadow = true; 		scene.add( cube ); 		 物体 end ------------------   		 光源----------------------- 		var spotLight = new THREE.SpotLight( 0xffffff ); 		spotLight.position.set( -40, 60, -10 ); 		scene.add( spotLight );   		// 设置投影 		spotLight.castShadow = true; 		 光源 end -------------------   		 状态监视器------------------- 		var stats = new Stats(); 		stats.showPanel( 0 ); 		document.body.appendChild( stats.dom ); 		 状态监视器 end -------------- 		 		renderer.render( scene, camera ); 		 	</script> </body> </html>

渲染结果如下图:

记录--Three.js入门教程——教不会算我输

阴影是有了,但总觉得阴影不太对劲,比较模糊。通过查阅资料,我找到了答案:

光源的位置一定要距离合适,否则容易引起阴影模糊粗糙的像打马赛克一样

 所以嘛,这个东西还是要自己去调的(其实具体原因我也不清楚,反正我没调好)

本文转载于:

https://blog.csdn.net/qq_26822029/article/details/91353209

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--Three.js入门教程——教不会算我输