<!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; width: 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包在文件里。

three.js 制作一个简单的圆柱体模型的更多相关文章

  1. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  2. 用JS制作一个信息管理平台完整版

      前  言 JRedu 在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台. 但是那样的平台功能过于简陋了,我们今天来继续完善一下. 首先我们回顾一下之前的内容.   1.JSON的基础知识 ...

  3. js实现一个简单钟表动画(javascript+html5 canvas)

    第一次在博客园注册发博.有一次去人家单位开标,看到开标网站上有个钟表动画,一时兴起,就写了个简单的钟表动画. 用js和html5 canvas对象实现一个简单钟表程序 主要用到的就是h5的canvas ...

  4. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  5. JS实现一个简单的计算器

    使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择 ...

  6. 实例学习SSIS（一）--制作一个简单的ETL包

    原文:实例学习SSIS(一)--制作一个简单的ETL包 导读: 实例学习SSIS(一)--制作一个简单的ETL包 实例学习SSIS(二)--使用迭代 实例学习SSIS(三)--使用包配置 实例学习SS ...

  7. TensorFlow练习13: 制作一个简单的聊天机器人

    现在很多卖货公司都使用聊天机器人充当客服人员,许多科技巨头也纷纷推出各自的聊天助手,如苹果Siri.Google Now.Amazon Alexa.微软小冰等等.前不久有一个视频比较了Google N ...

  8. 手把手制作一个简单的IDEA插件(环境搭建Demo篇)

    新建IDEA插件File --> new --> Project--> Intellij PlatForm Plugin-->Next-->填好项目名OK 编写插件新建工 ...

  9. PureMVC和Unity3D的UGUI制作一个简单的员工管理系统实例

    前言: 1.关于PureMVC: MVC框架在很多项目当中拥有广泛的应用,很多时候做项目前人开坑开了一半就消失了,后人为了填补各种的坑就遭殃的不得了.嘛,程序猿大家都不喜欢像文案策划一样组织文字写东西 ...

随机推荐

  1. GDI的 点 线 面 双缓冲 位图的绘制

    1.输出文本 // 输出文本 ,,)); //设置字体颜色,但最后都要返回原来的字体格式 COLORREF clrBackColor = SetBkColor(hDC, RGB(,,)); //设置背 ...

  2. SPOJ Meteors - 可持久化线段树 - 二分法

    Byteotian Interstellar Union (BIU) has recently discovered a new planet in a nearby galaxy. The plan ...

  3. 标签无效 "/zabbix_export/date": "YYYY-MM-DDThh:mm:ssZ" 预计。

    Centos7.5 使用导入percona模板的时候报错 百度给的解决方案是 将zabbix_agent_template_percona_mysql_server_ht_2.0.9-sver1.1. ...

  4. 【做题】CF196E. Opening Portals 排除无用边&最小生成树

    题意:给出一个有\(n\)个结点,\(m\)条边的连通无向图,边有边权,等于经过这条边所需的时间.有\(k\)个点设有传送门.一开始,所有传送门关闭.你从\(1\)号点出发,每当你到达一个有传送门的点 ...

  5. C# DataTable.Compute()用法

    DataTable.Compute()用法 2010-04-07 11:28 一.DataTable.Compute()方法說明如下 作用:          计算用来传递筛选条件的当前行上的给定表达 ...

  6. Git误操作 git reset强制回滚 恢复commit方法

    参考: 找回Git中丢失的Commit Git误操作 git reset强制回滚 恢复commit方法 使用Git时,常有误操作,在Commit之后又执行了git reset --hard HEAD强 ...

  7. HDU 1241 Oil Deposits（石油储藏）

    HDU 1241 Oil Deposits(石油储藏) 00 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)   Probl ...

  8. TCP/UDP协议、理解三次握手四次挥手、Socket

    一.什么是socket? 中文名叫套接字,是对底层的 TCP IP UDP 等网络协议进行封装,使得上层的应用程序开发者,不用直接接触这对复杂,丑陋的协议. 在程序员的言论,他就是一个封装好的模块,要 ...

  9. 1、iptables-netfilter基础

    .iptables: 包过滤型防火墙功能.四表五链 .iptables规则.规则管理工具.iptables命令 .iptables链管理.规则管理.查看等 .iptables匹配条件.目标.显式扩展. ...

  10. CodeChef - FNCS Chef and Churu（分块）

    https://vjudge.net/problem/CodeChef-FNCS 题意: 思路: 用分块的方法,对每个函数进行分块,计算出该分块里每个数的个数,这样的话也就能很方便的计算出这个分块里所 ...