three.js实现圆柱体
本文实例为大家分享了three.js绘制圆柱体的具体代码，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆柱体</title>
<style>
#canvas{
width:1100px;
height:600px;
border:1px solid;
}
</style>
<script type="text/javascript" src="js/three.js"></script>
<script>
// 渲染器
var renderer;
function init_renderer(){
width = document.getElementById("canvas").clientWidth;
height = document.getElementById("canvas").clientHeight;
renderer = new THREE.WebGLRenderer({ //生成渲染对象
antialias : true //去锯齿
});
renderer.setSize(width,height);//设置渲染的宽度和高度；
document.getElementById("canvas").appendChild(renderer.domElement);
renderer.setClearColor(0xEEEEEE,1);//设置渲染的颜色；
}
// 场景
var scene;
function init_scene(){
scene = new THREE.Scene();
}
// 圆柱体
var cylinder;
function init_cylinder(){
var cylinder = new THREE.CylinderGeometry(80,50,300,50,50);
var texture = THREE.ImageUtils.loadTexture("textures/2.jpg",null,function(t)//图片地址可使用本地,同根目录下文件夹即可
{
});
var material = new THREE.MeshLambertMaterial({map:texture}); //材料
cube = new THREE.Mesh(cylinder,material);
cube.position.set(0,0,5); //设置几何体的位置（x,y,z）
scene.add(cube);
}
// 相机
var camera;
function init_camera(){
// camera = new THREE.PerspectiveCamera(100,width/height,1,10000); //透视相机
camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000) //正投影相机
// （可视角度，可视范围的长宽比，相对于深度剪切面的近的距离 必须为正数，相对于深度剪切面的远的距离 必须为正数）
camera.position.x =600
camera.position.y = 100;
camera.position.z = 100;
camera.up.x = -2;//设置相机的上为「x」轴方向
camera.up.y = 2;//设置相机的上为「y」轴方向
camera.up.z = 0;//设置相机的上为「z」轴方向
camera.lookAt({x:0,y:0,z:0}); //设置视野的中心坐标
}
// 光源
var light;
function init_light(){
light = new THREE.DirectionalLight(0xffffff,1);//设置平行光源 (光颜色，光强度)
light.position.set(200,100,50);//设置光源向量 (x,y,z)
scene.add(light);
}
function ThreeJs_Main(){
init_renderer();//渲染
init_scene();//场景
init_cylinder();//圆柱体
init_camera();//相机
init_light();//光源
renderer.clear();
animation()
renderer.render(scene,camera);
}
function animation(){
//x,y,z为旋转的轴 后边数字为速度
// cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
// cube.rotation.z += 0.01;
renderer.render(scene,camera);
requestAnimationFrame(animation);
}
</script>
</head>
<body onload="ThreeJs_Main()">
<div id="canvas"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Three.js利用顶点绘制立方体的方法详解
前言 之前我们在学些WebGL基础的时候每天都是在一直研究顶点位置,法向量,绘制下标什么的.虽然复杂,但是毕竟原生,性能没得说. three.js也给我们提供了相关的接口供我们使用原生的方法绘制模型,下面话不多说了,来一起看看详细的介绍吧. 下面是我的个人一个案例. 首先,我创建了一个空白的形状: //立方体 var cubeGeometry = new THREE.Geometry(); 立方体的形状如下: // 创建一个立方体 // v6----- v5 // /| /| // v1----
-
Three.js实现绘制字体模型示例代码
前言 本文主要给大家介绍了关于利用Three.js绘制字体模型的相关内容,使用three.js绘制字体模型,没有想象当中那么难.下面话不多说了,来一起看看详细的介绍: 首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载,在加载成功的回调函数里面进行创建网格. 然后通过THREE.TextBufferGeometry或者THREE.TextGeometry方法进行网格创建,并将需要设置的问题传入. 再设置一个纹理,通过THREE.Mesh()函数创建成图形添加
-
利用three.js画一个3D立体的正方体示例代码
简介 three.js 是一款WebGL框架,WebGL可以让我们在canvas上实现3D效果.实现3D效果在国内来说还算是比较新的东西,可供查阅的资料也不多.这篇文章仅是一个入门篇,介绍如何绘制一个3D正方体. Three.js中的基本概念 Three.js包含3个基本概念:场景(Scene).相机(Camera)和渲染器(Renderer). 场景就是需要绘制的对象,相机代表取景的视角,渲染器是绘制的载体(可以挂靠到浏览器的DOM元素中), 也就是我们通过相机拍摄场景然后绘制到目标介质中去.
-
three.js实现圆柱体
本文实例为大家分享了three.js绘制圆柱体的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圆柱体</title> <style> #canvas{ width:1100px; height:600px; border:1px solid; } <
-
THREE.JS入门教程(1)THREE.JS使用前了解
Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 国外网站 aerotwist.com 有六篇较为简单的入门教程,我尝试着将其翻译过来,与大家分享. 我在一些实验项目中使用了Three.js,我发现它对快速上手浏览器3D编程确实很有帮助.通过Three.js,你不仅可以创建相机.物体.光线.材质等等,还可以选择
-
Three.js源码阅读笔记(物体是如何组织的)
这是Three.js源码阅读笔记第三篇.之前两篇主要是关于核心对象的,这些核心对象主要围绕着矢量vector3对象和矩阵matrix4对象展开的,关注的是空间中的单个顶点的位置和变化.这一篇将主要讨论Three.js中的物体是如何组织的:即如何将顶点.表面.材质组合成为一个具体的对象. Object::Mesh 该构造函数构造了一个空间中的物体.之所以叫"网格"是因为,实际上具有体积的物体基本都是建模成为"网格"的. 复制代码 代码如下: THREE.Mesh =
-
Three.js中矩阵和向量的使用教程
前言 提起矩阵,很容易让人想起我们曾经学不会的线性代数和离散数学,但是作为图形开发中的核心部分,它代表着每一次的运动和变换,就像鱼不能脱离水一样,矩阵并不是一个可以避之不谈的话题. 好消息是,Three.js帮助我们把许多矩阵运算封装成了一些顶层的方法,并提供了一个优秀的数学库,我们不太需要知道HowToCalc,只需要知道HowToUse,就可以得到绝大部分我们想要的东西. 这篇文章将要介绍的就是,如何在不了解内部结构的情况下在Three.js中使用矩阵和向量. 从一个例子开始 在讲解一些枯燥
-
three.js实现炫酷的全景3D重力感应
本文实例为大家分享了three.js 全景重力感应的具体代码,供大家参考,具体内容如下 实现three.js 全景图 demo 使用three.js 写了球体和圆柱体版本的3D重力感应全景图,支持手指触摸和陀螺仪感应,也支持PC端的鼠标.给大家介绍一下基于移动端H5球体的实现方法,圆柱体类似. 设置容器和展示的样式 设置容器的宽高为全屏展示,清除body的margin,引用three.min.js(3D渲染框架) 和orienter.js (陀螺仪经纬度计算) <div id="Canva
-
原生JS实现的跳一跳小游戏完整实例
本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie
-
Angular.js中ng-include用法及多标签页面的实现方式详解
前言 大家在平时的项目开发中,应该会经常遇到上图所示的需求,就是在一个页面中有多个标签,被选中的标签颜色会高亮显示,切换不同标签显示相应的不同内容.如果内容代码过多则写在同一个html文件就会显得特别乱,所以这里我们最好把页面代码分开单独管理,controller也可以分开来管理,这样就会显得清楚的多. 这里就要使用到Angularjs中个ng-include指令.下面来看看详细的介绍: 一.多标签的编写 首先需要了解需求: 1.同时只能选中一个标签 2.被选中的标签背景色以及自体颜色都将改变.
-
React.Js添加与删除onScroll事件的方法详解
React简介 React是有Facebook开发出来用于构建前端界面的JS组件库,由于其背后的强大背景,使得这款库在技术开发上完全没有问题. React的优势 解决大规模项目开发中数据不断变化变得难以操作的问题: 组件化开发,使得开发更加快速: 单向数据流,有利于找到问题: 虚拟DOM,在React内部有一套diff算法可以快速的计算出整体需要改动的位置,从而做到快速局部刷新:举个栗子:删除一个列表再插入个新表,计算后会比较出不同然后插进去: 前言 大家都可能会遇到这样的问题,那就是滚动事件
-
js 客户端打印html 并且去掉页眉、页脚的实例
print() 方法用于打印当前窗口的内容,支持部分或者整个网页打印. 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮.通常,这会产生一个对话框,让用户可以取消或定制打印请求. win10下测试ie11.chrome.firefox.360.edge 都可以成功去掉页眉页脚: <!DOCTYPE html> <html> <head> <title>打印</title> <meta charset="utf-8
-
PHP+JS实现批量删除数据功能示例
本文实例讲述了PHP+JS实现批量删除数据功能.分享给大家供大家参考,具体如下: 表单 <form id="form2" name="form2" method="post" action="del_product.php" onsubmit="return checkF(this)"> <label> <input type="checkbox" name