<!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. html5-表单属性及<!DOCTYPE> 标签

    <!DOCTYPE> 标签定义和用法<!DOCTYPE> 声明必须位于HTML 5 文档中的第一行,也就是位于<html> 标签之前.该标签告知浏览器文档所使用的H ...

  2. 程序员编程艺术：面试和算法心得-(转 July)

    1.1 旋转字符串 题目描述 给定一个字符串,要求把字符串前面的若干个字符移动到字符串的尾部,如把字符串“abcdef”前面的2个字符'a'和'b'移动到字符串的尾部,使得原字符串变成字符串“cdef ...

  3. NT1_keras下搭建一个3层模型并且修改。

    In [1]: import keraskeras.__version__ C:\ProgramData\Anaconda3\lib\site-packages\h5py\__init__.py:36 ...

  4. 20165310 《Java程序设计》课程总结

    20165310 <Java程序设计>课程总结 一.每周作业及实验报告博客链接汇总 预备作业一:我期望的师生关系 20165310 我期望的师生关系 预备作业二:学习基础和C语言基础调查 ...

  5. 2018-2019-2 《网络对抗技术》Exp3 免杀原理与实践 20165211

    目录 2018-2019-2 <网络对抗技术>Exp3 免杀原理与实践 20165211 1. 基础问题回答 (1)杀软是如何检测出恶意代码的? (2)免杀是做什么? (3)免杀的基本方法 ...

  6. 启动maven的web项目

    一.可以通过在pom中配置tomcat插件. 首先要确保你的仓库里有这个插件,然后按如下配置. <build> <plugins> <!-- 配置Tomcat插件 --& ...

  7. 又是DataSnap的问题

    最近在调试DataSnap的程序,突然发现TClientDataSet打不开了,报错为dsnap200.bpl的非法地址访问,如下图: 很是怪异,干脆新建工程,只有TSQLConnection.TSQ ...

  8. 源码编译安装libtool工具

    1. 获取源码 wget http://ftpmirror.gnu.org/libtool/libtool-2.4.6.tar.gz tar xvf libtool-2.4.6.tar.gz -C ~ ...

  9. 深度学习课程笔记（十五）Recurrent Neural Network

    深度学习课程笔记(十五)Recurrent Neural Network 2018-08-07 18:55:12 This video tutorial can be found from: Yout ...

  10. Images之Dockerfiles

    Best practices for writing Dockerfiles This document covers recommended best practices and methods f ...