zoukankan      html  css  js  c++  java
  • three.js 制作一个简单的圆柱体模型

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<title>three.js webgl - orbit controls</title>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    		<style>
    			body {
    				color: #000;
    				font-family:Monospace;
    				font-size:13px;
    				text-align:center;
    				font-weight: bold;
    
    				background-color: #fff;
    				margin: 0px;
    				overflow: hidden;
    			}
    
    			#info {
    				color:#000;
    				position: absolute;
    				top: 0px;  100%;
    				padding: 5px;
    
    			}
    
    			a {
    				color: red;
    			}
    		</style>
    	</head>
    
    	<body>
    		<div id="info">
    			<h1>圆柱体模型</h1>
    		</div>
    
    		<script src="three.js"></script>
    		<script src="OrbitControls.js"></script>
    		<script src="Detector.js"></script>
    		<script src="DragControls.js.js"></script>
    
    		<script>
    
    			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
    
    			var camera, controls, scene, renderer;
    
    			init();
    			//render(); // remove when using next line for animation loop (requestAnimationFrame)
    			animate();
    
    			function init() {
    
    				scene = new THREE.Scene();
    				scene.background = new THREE.Color( 0xcccccc );
    				scene.fog = new THREE.FogExp2( 0xcccccc, 0.002 );
    
    				renderer = new THREE.WebGLRenderer( { antialias: true } );
    				renderer.setPixelRatio( window.devicePixelRatio );
    				renderer.setSize( window.innerWidth, window.innerHeight );
    				document.body.appendChild( renderer.domElement );
    
    				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
    				camera.position.set( 400, 200, 0 );
    
    				// controls
    
                    //控制旋转
    				controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    				//controls.addEventListener( 'change', render ); // call this only in static scenes (i.e., if there is no animation loop)
                     //惯性
    				controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
    				//拖拽灵敏度
    				controls.dampingFactor = 0.25;
                    
                    //是否可以缩放 
                     controls.enableZoom = true; 
    				controls.screenSpacePanning = false;
    				 //是否开启右键拖拽 
    				 controls.enablePan = true; 
                   //是否自动旋转 
                    controls.autoRotate = true; 
    				controls.minDistance = 100;
    				controls.maxDistance = 500
    //controls.maxPolarAngle = Math.PI /2  只滚动一半;
    				controls.maxPolarAngle = Math.PI ;
    
         
    
    /*
    
        //拖拽
        //可视化变换控件对象
        transformControl = new THREE.TransformControls( camera,renderer.domElement );
        scene.add( transformControl );//控件对象添加到场景对象
    
     //拖拽控件对象
        var dragcontrols = new THREE.DragControls(scene.children,camera,renderer.domElement );
        //拖拽控件对象设置鼠标事件
        dragcontrols.addEventListener( 'hoveron', function ( event ) {
            //控件对象transformControl与选中的对象object绑定
            transformControl.attach( event.object );
        } )
    
     
    */
    
    
    
    
    
    
    
    
    				// world 圆柱体
                    var geometry=new THREE.CylinderGeometry(20,20,100,40);
    /*				var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
    */				
                    var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
    
    
    
    					var mesh = new THREE.Mesh( geometry, material );
    					mesh.position.x = 0;
    					mesh.position.y = 0;
    					mesh.position.z = 0;
    					mesh.updateMatrix();
    					mesh.matrixAutoUpdate = false;
    					scene.add( mesh );
    
    
    
    				// lights
    
    				var light = new THREE.DirectionalLight( 0xffffff );
    				light.position.set( 1, 1, 1 );
    				scene.add( light );
    
    				var light = new THREE.DirectionalLight( 0x002288 );
    				light.position.set( - 1, - 1, - 1 );
    				scene.add( light );
    
    				var light = new THREE.AmbientLight( 0x222222 );
    				scene.add( light );
    
    				//
    
    				window.addEventListener( 'resize', onWindowResize, false );
    
    			}
    
    			function onWindowResize() {
    
    				camera.aspect = window.innerWidth / window.innerHeight;
    				camera.updateProjectionMatrix();
    
    				renderer.setSize( window.innerWidth, window.innerHeight );
    
    			}
    
    			function animate() {
    
    				requestAnimationFrame( animate );
    
    				controls.update(); // only required if controls.enableDamping = true, or if controls.autoRotate = true
    
    				render();
    
    			}
    
    			function render() {
    
    				renderer.render( scene, camera );
    
    			}
    
    		</script>
    
    	</body>
    </html>  

    js包在文件里。

  • 相关阅读:
    在 Windows 上测试 Redis Cluster的集群填坑笔记
    vmware安装黑苹果教程
    微信支付v3发布到iis时的证书问题
    Linux下安装SQL Server 2016(连接篇SQL Server on linux)
    Linux下安装SQL Server 2016(连接篇SQL Server on linux)
    Linux下安装SQL Server 2016(安装篇SQL Server on linux)
    Linux下安装SQL Server 2016(准备篇SQL Server on linux)
    客服端与服务端APP支付宝支付接口联调的那些坑
    ASP.NET MVC]WebAPI应用支持HTTPS的经验总结
    .net平台下C#socket通信(中)
  • 原文地址:https://www.cnblogs.com/MagicAsa/p/9239706.html
Copyright © 2011-2022 走看看