<!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. VC++使用MapFileAndCheckSum完成自检测

    转载:https://blog.csdn.net/lekonpeng/article/details/4150464 当我们完成一个工程,编译成可执行文件后,一般是不希望这个可执行文件被人改动的,那么 ...

  2. topcoder srm 685 div1

    problem1 link 依次枚举每个元素$x$,作为$S$中开始选择的第一个元素.对于当前$S$中任意两个元素$i,j$,若$T[i][j]$不在$S$中,则将其加入$S$,然后继续扩展:若所有的 ...

  3. linux内核中的fuse是什么?

    答: 一个用户态文件系统框架,属于内核的一种特性. 1.组成部分 fuse.ko(内核模块) + libfuse.*(用户空间库) + fusemount(挂载工具) 2.参考资料 fuse.txt

  4. FJUT 毒瘤3（二分 + 最大匹配）题解

    毒瘤3 TimeLimit:1000MS  MemoryLimit:256MB 64-bit integer IO format:%lld   Problem Description 字节跳动有n款产 ...

  5. vs 附加进程 iis进程显示

  6. GPIO实验之c语言

    上一章节进行实验使用的是汇编进行编程的,本次实验是使用c语言进行编写的. (1)点亮一个led灯   1)启动文件:    crt.S   .text   .global _start   _star ...

  7. facebook api之Access Tokens之Business Manager System User

    Business Manager System User Make programatic, automated actions on ad objects or Pages, or do progr ...

  8. 洛谷P2362 围栏木桩----dp思路

    在翻dp水题的时候找到的有趣的题0v0 原文>>https://www.luogu.org/problem/show?pid=2362<< 题目描述 某农场有一个由按编号排列的 ...

  9. mybatis配置文件resultMap标签的使用

    本文为博主原创,未经允许不得转载: resultMap标签是为了映射select查询出来结果的集合,其主要作用是将实体类中的字段与 数据库表中的字段进行关联映射. 注意:当实体类中的字段与数据库表中的 ...

  10. mybatis结合mysql批量操作及查询sql

    MySQL数据库 批量操作主要使用的是Mybatis的foreach,遍历参数列表执行相应的操作,所以批量插入/更新/删除的写法是类似的,只是SQL略有区别而已.MySql批量操作需要数据库连接配置a ...