ThreeJS基础模板

最新推荐文章于 2024-05-30 17:57:45 发布

xiaomomi

最新推荐文章于 2024-05-30 17:57:45 发布

阅读量233

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/xiaomomi/article/details/114069000

版权

可视化大屏专栏收录该内容

5 篇文章 1 订阅

订阅专栏

<!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>

xiaomomi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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; } </sty
复制链接

扫一扫

专栏目录