three.js实现圆柱体


Posted in Javascript onDecember 30, 2018

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
web前端开发也需要日志
Dec 09 Javascript
关于js new Date() 出现NaN 的分析
Oct 23 Javascript
For循环中分号隔开的3部分的执行顺序探讨
May 27 Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 Javascript
Web程序员必备的7个JavaScript函数
Jun 14 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
Jun 28 Javascript
取消Bootstrap的dropdown-menu点击默认关闭事件方法
Aug 10 Javascript
webpack4 入门最简单的例子介绍
Sep 05 Javascript
Vue在 Nuxt.js 中重定向 404 页面的方法
Apr 23 Javascript
微信小程序入口场景的问题集合与相关解决方法
Jun 26 Javascript
四十九个javascript小知识实用技巧
Nov 20 Javascript
three.js实现炫酷的全景3D重力感应
Dec 30 #Javascript
Three.js实现3D机房效果
Dec 30 #Javascript
JavaScript对象的特性与实践应用深入详解
Dec 30 #Javascript
three.js搭建室内场景教程
Dec 30 #Javascript
Three.JS实现三维场景
Dec 30 #Javascript
Three.js实现简单3D房间布局
Dec 30 #Javascript
JavaScript数组特性与实践应用深入详解
Dec 30 #Javascript
You might like
pw的一个放后门的方法分析
2007/10/08 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Yii2 加载css、js 载静态资源的方法
2017/03/10 PHP
JavaScript与C# Windows应用程序交互方法
2007/06/29 Javascript
[原创]用javascript实现检测指定目录是否存在的方法
2008/01/12 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
原生javascript实现addClass,removeClass,hasClass函数
2016/02/25 Javascript
jQuery表单对象属性过滤选择器实例详解
2016/09/13 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
JQuery和PHP结合实现动态进度条上传显示
2016/11/23 Javascript
javascript实现鼠标点击页面 移动DIV
2016/12/02 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
VUE搭建手机商城心得和遇到的坑
2019/02/21 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[05:24]TI9采访——教练
2019/08/24 DOTA
python数据结构之二叉树的遍历实例
2014/04/29 Python
Python入门之后再看点什么好?
2018/03/05 Python
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
在python带权重的列表中随机取值的方法
2019/01/23 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python转换时间的图文方法
2019/07/01 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
迷你西餐厅创业计划书范文
2013/12/31 职场文书
优秀党支部事迹材料
2014/01/14 职场文书
党章学习思想汇报
2014/01/14 职场文书
个人委托书范本
2014/09/13 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis