<!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. 01: Django rest framework 基础

    1.1 RESTful API设计规范 参考地址: http://www.cnblogs.com/wupeiqi/articles/7805382.html   1.API与用户的通信协议,总是使用H ...

  2. [J2EE]struts+ejb笔记

    DispatchAtion: - org.apache.struts.actions.DispatchAction 这个类是个抽象类,但实现父类Action的execute方法,在项目中重写这个类可以 ...

  3. Bitbucket备份恢复

    我们需要备份什么? home directory:contains  repository data, log files, plugins, and so on. database:contains ...

  4. shell 调试脚本设置

    set -x 脚本部分内容 set +x

  5. 2018年11月20日 远交近攻 list1

    list 列表用法 li=[1,2,3,"abc"] #列表中的元素,可以为数字或者字符串或者布尔值或者就是列表等,所有都能放进去 #列表中也能嵌套列表 pi=[1,2,3,[2, ...

  6. Starting MySQL ERROR! Couldn't find MySQL server (/usr/local/mysql/bin/mysqld_safe)

    centos7.5 安装mysql数据库报错 问题: [root@db04-54 scripts]# /etc/init.d/mysqld start /etc/init.d/mysqld: line ...

  7. topcoder srm 305 div1

    problem1 link 直接按照题意模拟即可. import java.util.*; import java.math.*; import static java.lang.Math.*; pu ...

  8. Python3基础 list + *运算 扩充列表

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  9. eMMC分区详解【转】

    本文转载自:https://blog.csdn.net/wxh0000mm/article/details/77864002 转自:http://blog.csdn.net/junzhang1122/ ...

  10. Super-palindrome 【可能是暴力】

    Super-palindrome 时间限制: 1 Sec  内存限制: 128 MB 提交: 486  解决: 166 [提交] [状态] [命题人:admin] 题目描述 You are given ...