ThreeJS基础模板 – 源码巴士

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Three组成</title>
		<style type="text/css">
			html,
			body {
				margin: 0;
				height: 100%;
			}
		
			canvas {
				display: block;
			}
		</style>
	</head>
	<body onload="draw();">
		<script src="./lib/three.js"></script>
		<script src="./lib/js/controls/OrbitControls.js"></script>
		<script src="./lib/js/libs/stats.min.js"></script>
		<script src="./lib/js/libs/dat.gui.min.js"></script>
		
		<script>
			var renderer, camera, scene,gui,lingt,stats,controls;
			 // 渲染
			function initRender(){
				renderer = new THREE.WebGLRenderer({ antialias: true })
				
				renderer.setSize(window.innerWidth, window.innerHeight)// 尺寸
				
				renderer.setClearColor('#fffffff',0)
				renderer.shadowMap.enabled = true;//阴影效果
				renderer.shadowMap.type = THREE.PCFSoftShadowMap;// 默认的是，没有设置的这个清晰
				renderer.setPixelRatio(window.devicePixelRatio)// 分辨率
				document.body.appendChild(renderer.domElement);
			}
			//相机
			function initCamera(){
				camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight, 0.1, 1000)
				camera.position.set(0,40,50)
			}
			
			//场景
			function initScene(){
				scene = new THREE.Scene();
			}
			
			function initGui(){
				gui={};
				var datGui = new dat.GUI();
			}			
			
			// 灯光
			function initLight(){
				scene.add(new THREE.AmbientLight('#ffffff'))
				
				light = new THREE.SpotLight('#000000')
				light.position.set(-40,60,10);
				light.castShadow = true;
				scene.add(light)
			}
			
			//内容
			function initModel(){
				// 辅助工具
				var helper = new THREE.AxesHelper(50);
				scene.add(helper);
        
        // 地板
        var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 20000, 10000 ), new THREE.MeshPhongMaterial( { color: 0x009688, depthWrite: false } ) );
        mesh.rotation.x = - Math.PI / 2;
        mesh.receiveShadow = true;
        scene.add( mesh );
        
        //添加地板割线
         var grid = new THREE.GridHelper( 2000, 1000, 0x000000, 0x000000 );
         grid.material.opacity = 0.1;
         grid.material.transparent = true;
         scene.add( grid );
			}
			
			//初始化性能插件
			function initStats(){
				stats = new Stats();
				document.body.appendChild(stats.dom)
			}
			
			//交互插件  鼠标左键按住旋转，右键按住平移，滚轮缩放
			function initControls(){
				controls = new THREE.OrbitControls(camera,renderer.domElement)
				// 如果使用animate方法时，将此函数删除
				//controls.addEventListener( 'change', render );
				// 使动画循环使用时阻尼或自转 意思是否有惯性
				controls.enableDamping = true;
				//动态阻尼系数 就是鼠标拖拽旋转灵敏度
				//controls.dampingFactor = 0.25;
				//是否可以缩放
				controls.enableZoom = true;
				// controls.rotateSpeed = .5;
				//是否自动旋转
				controls.autoRotate = false;
				controls.autoRotateSpeed = .5;
				//设置相机距离原点的最远距离
				controls.minDistance = 1;
				//设置相机距离原点的最远距离
				controls.maxDistance = 2000;
				//是否开启右键拖拽
				controls.enablePan = true;
			}
			
			function render(){
				renderer.render(scene,camera)
			}
			//动画
			function animate(){
				render()//更新控制器
				stats.update()//更新性能插件
				controls.update()
				requestAnimationFrame(animate)
			}
			
			//窗口变动触发的函数
			function onWindowResize() {
				camera.aspect = window.innerWidth / window.innerHeight;
				camera.updateProjectionMatrix();
				render();
				renderer.setSize(window.innerWidth, window.innerHeight);
			
			}
			
			function draw() {
				initGui();
				initRender();
				initScene();
				initCamera();
				initLight();
				initModel();
				initControls();
				initStats();
				animate();
				window.onresize = onWindowResize;
			}
			
		</script>
	</body>
</html>
原文链接：https://blog.csdn.net/xiaomomi/article/details/114069000