html5编写圆柱,three.js实现圆柱体
本文实例为大家分享了three.js绘制圆柱体的具体代码,供大家参考,具体内容如下
圆柱体
#canvas{
width:1100px;
height:600px;
border:1px solid;
}
// 渲染器
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);
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程圈。
html5编写圆柱,three.js实现圆柱体相关推荐
- html5编写网页代码_freeCodeCamp.org的未来-从向世界传授语言到编写代码的5年经验...
html5编写网页代码 freeCodeCamp went live in October 2014. In the five years since, we've done quite a bit. ...
- 电脑PHP动画制作画板,涂鸦板简单实现 Html5编写属于自己的画画板
这篇文章主要教大家如何使用Html5编写属于自己的画画板,进行绘画.调整颜色等操作,感兴趣的小伙伴们可以参考一下 最近了解到html5强大的绘图功能让我惊奇,于是,写了个小玩意---涂鸦板,能实现功能 ...
- html游戏技术文档编写,HTML5编写的小游戏
HTML5编写的小游戏 HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:<深入分析:Flash VS HTML5到底谁统江山> ...
- html5无法绘制线条,Html5画布 - 使用fabric.js绘制完美线条或不使用
我正在创建一个游戏,我需要在不同类型的屏幕分辨率和缩放下实现HTML5上的完美画布线.Html5画布 - 使用fabric.js绘制完美线条或不使用 很容易理解我说的,简单地粘贴在两个不同的代码转换成 ...
- HTML5编写的小游戏
HTML5 是什么东西?而 HTML5 的优势又在哪里?大家可以回顾之前一篇相关文章了解下 HTML5 知识:<深入分析:Flash VS HTML5到底谁统江山>.现在介绍多款 HTML ...
- html游戏让目标人物移动,如何用html5编写鼠标事件与游戏人物移动
前面已经介绍了用仿ActionScript的语法来编写html5的第一篇.第二篇,下面是第三篇,如何用html5编写鼠标事件与游戏人物移动,事不宜迟,赶紧来学习下吧. 一.假设 假设,所有可添加鼠标事 ...
- HTML5七夕情人节表白网页(情人节满屏爱心HTML5特效) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码
HTML5七夕情人节表白网页❤情人节满屏爱心HTML5特效❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱 ...
- HTML5页面,用JS 禁止弹出手机键盘
HTML5页面,用JS 禁止弹出手机键盘 用户点击input的时候: 会默认调出手机软键盘: 场景:文本框获取焦点时,需要禁止手机弹出自带的输入键盘: 解决方案1: 用一个p/div等标签显示内容:然 ...
- html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
最新文章
- 【腾讯bugly干货分享】微信Android热补丁实践演进之路
- C语言编写的PHP框架--yaf入门编程
- 第十六届智能车竞赛总决赛线上比赛赛道设计
- MySQL 命令行导出、导入Select 查询结果
- c语言课程设计平时成绩,计算中心
- 06-CABasicAnimation基础核心动画
- 生成简单的Makefile文件(Python实现)
- vc6下usb编程_5款免费的C/C++语言编程器
- TensorFlow 图片预处理
- 蓝桥杯 ALGO-4 算法训练 结点选择
- css 对齐方式 分类
- Gap Statistic 间隔统计量
- matlab小波去噪wden,MATLAB小波去噪
- 计算机语言里的堆栈是什么意思,汇编语言中的堆栈是什么?
- 传美云商系统软件方案详解
- 打不开磁盘“E:\CentOS 64 位.vmdk”
- it企业实习_it公司实习心得体会
- 洛谷P1244 青蛙过河 DP/思路
- Android进程保活黑科技实现原理解密及方法,最新整理
- 计算机房 增加电脑,(完整版)学生计算机房(电脑室)使用须知