<!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. 09：vuex组件间通信

    1.1 vuex简介 官网:https://vuex.vuejs.org/zh/guide/ 参考博客:https://www.cnblogs.com/first-time/p/6815036.htm ...

  2. oracle基础——内存管理、优化

    内存图解: 自动管理:11g:AMM   10g:ASMM SGA(system global area):由所有服务进程和后台进程共享 PGA(program global area): 由每个服务 ...

  3. 【python011--数组2】

    一.从列表中获取元素 *跟数组一样,我们可以通过元素的索引值(index)从列表获取单个元素,注意,列表索引值是从0开始的 >>> member= ['尘封','冰点','无名',' ...

  4. Python常用库之Pilow

    基本用法 静态方法 PIL.Image.open(fp, mode=’r’) 传入文件路径(str),返回一个image对象 PIL.Image.alpha_composite(im1, im2) 混 ...

  5. git克隆源码时提示fatal: HTTP request failed怎么办?

    答: 升级git版本即可 centos下升级git的方法在此

  6. PKM（个人知识管理）类软件收集(偶尔更新列表)

    evernote(印象笔记) Wiz 有道云 麦库 leanote GoogleKeep OneNote SimpleNote(wp家的,免费) pocket(稍后读的软件,同类的还有Instapap ...

  7. hash进阶：使用字符串hash乱搞的姿势

    前言 此文主要介绍hash的各种乱搞方法,hash入门请参照我之前这篇文章 不好意思hash真的可以为所欲为 在开头先放一下题表(其实就是我题解中的hash题目qwq) 查询子串hash值 必备的入门 ...

  8. P2055 [ZJOI2009]假期的宿舍

    思路 看到复杂的匹配条件,发现要让一个人和一个床匹配,所以就每个有床的人(指本校学生)和t连一条边,每个需要床的人(指外校的人和不回家的人)和s连一条边,i和j互相认识就把i和j的床连在一起,自己和自 ...

  9. P2221 [HAOI2012]高速公路

    思路 考虑每一条边的贡献,然后推式子 \[ \begin{align}&\sum_{i}V_i\times(R-i+1)\times(i-L+1)\\=&\sum_{i}V_i\lef ...

  10. （转）Applications of Reinforcement Learning in Real World

    Applications of Reinforcement Learning in Real World 2018-08-05 18:58:04 This blog is copied from: h ...