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
    评论
好的,生成 Three.js 代码编辑器的代码如下: ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Three.js Editor</title> <style> #container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; background-color: #f0f0f0; } </style> </head> <body> <div id="container"></div> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script> <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/libs/stats.min.js"></script> <script> // Create Three.js scene var scene = new THREE.Scene(); // Create Three.js camera var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5; // Create Three.js renderer var renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.getElementById("container").appendChild(renderer.domElement); // Create Three.js controls var controls = new THREE.OrbitControls(camera, renderer.domElement); // Add stats to page var stats = new Stats(); document.body.appendChild(stats.dom); // Render loop function render() { requestAnimationFrame(render); // Render scene renderer.render(scene, camera); // Update controls and stats controls.update(); stats.update(); } // Start render loop render(); </script> </body> </html> ``` 这段代码会生成一个包含 Three.js 场景、相机、渲染器和控制器的基本模板。你可以在这个模板基础上进行编辑和修改,以实现你的具体需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值