threejs入门---控制器

最新推荐文章于 2024-08-30 19:45:00 发布

kilito_01

最新推荐文章于 2024-08-30 19:45:00 发布

阅读量1.5k

点赞数

文章标签： three.js

本文链接：https://blog.csdn.net/kilito_01/article/details/121560493

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/three.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/OrbitControls.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			body{
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	
	<body>
		<!-- 创建一个盒子 -->
		<div id="demo"></div>
		<script>
		init()
		//初始化
			function init(){
				//创建一个场景
				var scene = new THREE.Scene();
				//设置摄像机  摄像机角度 长宽比  最近能看到的画面  最远能看到的画面  一般设置成0.1和2000
				var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,2000)
				//创建渲染器
				var renderer = new THREE.WebGL1Renderer();
				// 设置渲染器的初始颜色
				renderer.setClearColor(new THREE.Color(0xEEEEEE))
				//设置输出canvas画面的大小
				renderer.setSize(window.innerWidth,window.innerHeight)
				// 设置渲染物体的阴影
				renderer.shadowMap.enabled = true;
				/**
				 * 创建三维坐标系
				 * */
				//显示三维坐标
				var axes = new THREE.AxisHelper(20);
				
				// 添加坐标系到场景中
				scene.add(axes)
				// 创建一个平面的几何体  宽高60,20
				var planeGeometry = new THREE.PlaneGeometry(120, 120);
				// 给地面物体上色  这里改了这个对象，所以阴影可以用了
				var planeMaterial = new THREE.MeshStandardMaterial({color:0xcccccc})
				/**
				 * 创建地面
				 */
				// 创建地面  讲平面的几何和材质颜色结合在一起
				var plane = new THREE.Mesh(planeGeometry,planeMaterial)
				// 地面添加阴影
                // plane.castShadow = true;
				// 地面接收阴影
				plane.receiveShadow = true;
				// 物体移动位置
				plane.rotation.x = -0.5 * Math.PI
				plane.position.x = 0
				plane.position.y = 0
				plane.position.z = 0
				// 将地面添加到场景中
				scene.add(plane)
			
			/**
			 *  创建立方体
			 */	
			// 创建立方体 设置长宽高
			    var cubeGeometry = new THREE.BoxGeometry(4,4,4)
			// 设置材质  MeshLambertMaterial 网格材质
			    var cubeMaterial = new THREE.MeshLambertMaterial({color:0xff0000})
			// 将立方体和材质拼在一起
			   var cube = new THREE.Mesh(cubeGeometry,cubeMaterial)
			   cube.rotation.y = 0.4
			   cube.position.x = 0;
			   cube.position.y = 3;
			   
			   //对象是否渲染到阴影贴图中 
			   cube.castShadow = true
			   // 将立方体添加到场景中
			   scene.add(cube);
			   
			   /**
				* 创建球体
				*/
			   // 创建球体  球体半径  球体位置 
			   var spherGeometry = new THREE.SphereGeometry(4,20,20)
			   var spherMaterial = new THREE.MeshLambertMaterial({color:0xffff00})
			   var sphere = new THREE.Mesh(spherGeometry,spherMaterial)
			   sphere.castShadow = true;
			   sphere.position.y = 6;
			   sphere.position.x = 12;
			   scene.add(sphere)
			   /**
				* 添加聚光灯
				*/
			   // 创建聚光灯
			   var spotLigth = new THREE.SpotLight(0xffffff);
			   // 设置灯的位置  x  y  z
			   spotLigth.position.set(30,30,-30)
			   // 设置阴影
			   spotLigth.castShadow = true
			   // 解决阴影精度的问题
			   spotLigth.shadow.angle = Math.PI / 4;
			   spotLigth.shadow.penumbra = 0.05;
			   spotLigth.shadow.mapSize.width = 1024;
			   spotLigth.shadow.mapSize.innerHeight = 1024;
			   // 将灯添加到场景中
			   scene.add(spotLigth);
			   
				// 定位相机，并且指向场景中心
				camera.position.x = 30;
				camera.position.y = 30;
				camera.position.z = 30;
				camera.lookAt(scene.position)
				
				// 将渲染器输出到HTML元素中
				document.querySelector("#demo").appendChild(renderer.domElement)
				//将场景和相机渲染出来
				renderer.render(scene,camera)
				
				// 创建一个控制器对象  相机  dom对象
				var controls = new THREE.OrbitControls(camera,renderer.domElement)
				// 监听控制器的鼠标事件，执行渲染内容
				controls.addEventListener('change',()=>{
					renderer.render(scene,camera)
				})
			}
		</script>
	</body>
</html>