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 相关文章推荐
ie和firefox中img对象区别的困惑
Dec 27 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
获取服务器传来的数据 用JS去空格的正则表达式
Mar 26 Javascript
Function.prototype.call.apply结合用法分析示例
Jul 03 Javascript
jquery动态加载select下拉框示例代码
Dec 10 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
jQuery简单实现列表隐藏和显示效果示例
Sep 12 Javascript
Angular.js去除页面中显示的空行方法示例
Mar 30 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 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
PHP过滤★等特殊符号的正则
2014/01/27 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
PHP 裁剪图片
2021/03/09 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
javascript hashtable实现代码
2009/10/13 Javascript
jQuery表单验证插件formValidator(改进版)
2012/02/03 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
javascript实现数字倒计时特效
2016/03/30 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
2017/11/27 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
2018/12/06 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
Python 文件操作技巧(File operation) 实例代码分析
2008/08/11 Python
python常用web框架简单性能测试结果分享(包含django、flask、bottle、tornado)
2014/08/25 Python
Python性能提升之延迟初始化
2016/12/04 Python
Python变量赋值的秘密分享
2018/04/03 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
使用TensorFlow实现SVM
2018/09/06 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
如何用Django处理gzip数据流
2021/01/29 Python
Mixbook加拿大:照片书,照片卡,剪贴簿,年历和日历
2017/02/21 全球购物
男女时尚与复古风格在线购物:RoseGal(全球免费送货)
2017/07/19 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
一些关于MySql加速和优化的面试题
2014/01/30 面试题
2014法制宣传日活动总结
2014/07/09 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript
搭建Yolov5服务器
2022/04/30 Servers