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>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端动画素材在网页开发中扮演着重要角色,能够吸引用户注意、提升用户体验。以下是一些常见的前端动画素材的技术实现方式: CSS 动画:使用 CSS 属性(如@keyframes、transition、transform等)来实现动画效果。这种方式简单易用,适合实现简单的动画效果,如过渡、旋转、缩放等。 JavaScript 动画:通过 JavaScript 操作 DOM 元素的样式属性,实现更复杂、交互性更强的动画效果。常见的库包括 jQuery、Anime.js、GreenSock(GSAP)等,它们提供了丰富的动画函数和效果,使动画开发更加高效。 SVG 动画:使用 SVG(可缩放矢量图形)和 SMIL(同步多媒体集成语言)技术创建矢量图形动画,可以实现复杂的矢量图形动画效果,如路径动画、填充动画等。 Canvas 动画:通过 HTML5 Canvas 元素绘制图形,利用 JavaScript 控制绘制过程,实现高度可定制化的动画效果,适用于需要实时渲染的复杂动画场景。 WebGL 动画:基于 WebGL(Web图形库)的 3D 图形渲染技术,可以实现高性能的复杂动画效果,适合开发需要展示 3D 动画的网页。 React 动画库:如果你在使用 React 框架,可以考虑使用像 React Spring、Framer Motion 等专门为 React 设计的动画库,简化动画开发流程。 CSS 预处理器:使用像 Sass、Less 等 CSS 预处理器可以简化 CSS 编写过程,提高样式代码的可维护性,进而对动画效果的实现有所帮助。 综上所述,前端动画素材的技术实现方式多种多样,开发者可以根据项目需求和个人技术偏好选择合适的方式来实现动画效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值