实现3D 场景——three.js学习篇六之划分模块

最新推荐文章于 2024-06-18 17:31:22 发布

hello big_bear

最新推荐文章于 2024-06-18 17:31:22 发布

阅读量360

点赞数 1

分类专栏： three.js 文章标签： javascript 前端 three.js

本文链接：https://blog.csdn.net/big_beer/article/details/120353875

版权

three.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

学习目标：

当项目越来越复杂的时候，之前的写法就会显得很乱，很难看懂。所以我们要使用模块化开发，这样可读性会好很多，而且易于维护。用之前的一个球体的例子。

代码：

提示：

<!DOCTYPE html>
<html>
<head>
    <title>球体贴图</title>
    <style type="text/css">
        body { margin: 0; }
        canvas { width: 100%; height: 100%; }
    </style>
</head>
<body>
<script src="./three.js-dev/build/three.js"></script>
<script src="./three.js-dev/examples/js/controls/OrbitControls.js"></script>
<script type="text/javascript"  >

   var scene, camera, renderer, controls;//定义场景，相机，渲染器，控制器
   
   /*
   创建场景
   */
   function scene(){
	   scene = new THREE.Scene();
	   var geometry = new THREE.SphereGeometry(100,40,50);//创建一个球体几何对象
	   
	   
	   var material = new THREE.MeshLambertMaterial({
	   	color:0x0000ff
	   });//创建材质对象
	   var mesh = new THREE.Mesh(geometry,material);//网格模型对象
	   scene.add(mesh);//mesh1添加到场景中
   }
	
	/*
	光源设置
	*/
   function pointLight(){
	   var point = new THREE.PointLight(0Xffffff);//点光源
	   point.position.set(400,100,200)//光源位置
	   scene.add(point)//点光源添加到场景中
	   var ambient = new THREE.AmbientLight(0x444444);//环境光
	   scene.add(ambient);//添加到场景中
   }

	/*
	相机设置
	*/
   function camera(){
	   var width = window.innerWidth;//窗口宽度
	   var height = window.innerHeight;//窗口高度
	   var k = width/height;
	   var s = 200;//三维场景显示范围控制系数，系数越大，显示范围越大
	   camera = new THREE.OrthographicCamera( -s*k, s*k,s,-s,1,1000 );
	   camera.position.set(200,300,200);//设置相机位置
	   camera.lookAt(scene.position);//设置相机方向
   }

	/*
	辅助坐标系
	*/
   function axisHelper(){
	   var axisHelper = new THREE.AxisHelper(250)//辅助线的长度
	   scene.add(axisHelper)
   }

	/*
	渲染器对象
	*/
	function renderer(){
	   renderer = new THREE.WebGLRenderer();
	   renderer.setSize( window.innerWidth, window.innerHeight );
	   renderer.setClearColor(0xb9d3ff,0.3);//设置背景颜色
	   document.body.appendChild( renderer.domElement );
	}
	
	 function render(){
	 	renderer.render(scene,camera)
	 }//封装一个渲染函数,调用一次渲染一次
	 
	 /*
		控制器对象
	 */
	function controls(){
		controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控制对象，把相机作为参数。
		controls.addEventListener('change',render);//监听鼠标事件，触发渲染函数。	
	}
	
	/*
		自动旋转函数
	*/
	function animate() {
		requestAnimationFrame( animate );
		scene.rotation.y += 0.01;
		scene.rotation.x += 0.01;
		render()
	};//创建一个旋转的方法
		
	/*
	初始化对象
	*/
	function init(){
		scene();//场景
		pointLight();//点光源
		camera();//相机
		//axisHelper();//辅助坐标
		renderer();//渲染器对象
		controls();//控制器对象
		animate();//旋转动画方法
		render();//进来时渲染一次
	}
	
	init()//初始化
</script>
</body>
</html>