three.js3D学习(1)

最新推荐文章于 2024-04-24 14:50:53 发布

董无敌啊

最新推荐文章于 2024-04-24 14:50:53 发布

阅读量435

点赞数

分类专栏： canvas 文章标签： three-js

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

记录在http://www.hewebgl.com的学习过程：

在引入three.js网站 https://github.com/mrdoob/three.js下载后开始基础的学习。

一篇不错的three.js详解http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html

基础知识梳理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
     <!--引入Three.js-->
    <script src="../three.js/build/three.js"></script>
    <style>
        div#container{
            border: none;
            cursor: move;
            width: 1400px;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
</head>
<body>
<!--canvas容器-->
<div id="container"></div>
<script>

</script>
</body>
</html>

(1) 引入three.js

(2)body 标签中添加 id 为「canvas3d」的 div 元素。

(3)style 标签中指定「canvas3d」的CSS样式。

我们只需要定义好canvas的容器就可以，canvas是three.js动态生成的。

基本过程

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

1.设置three.js渲染器

(0) 声明全局变量（对象）；

(1) 获取画布「canvas-frame」的高宽；

(2) 生成渲染器对象（属性：抗锯齿效果为设置有效）；

(3) 指定渲染器的高宽（和画布框大小一致）；

(4) 追加【canvas】元素到【canvas3d】元素中；

(5) 设置渲染器的清除色(clearColor)。

//开启Three.js渲染器
var renderer;//声明全局变量（对象）
function initThree() {
   width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
   height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
   renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）
   renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）
   document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
   renderer.setClearColor(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}

2.设置摄像机camera

(0) 声明全局的变量（对象）；

(1) 设置透视投影的相机；

(2) 设置相机的位置坐标；

(3) 设置相机的上为「z」轴方向；

(4) 设置视野的中心坐标。

//设置相机
              var camera;
              function initCamera() { 
                camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）
                camera.position.x = 0;//设置相机的位置坐标
                camera.position.y = 50;//设置相机的位置坐标
                camera.position.z = 100;//设置相机的位置坐标
                camera.up.x = 0;//设置相机的上为「x」轴方向
                camera.up.y = 1;//设置相机的上为「y」轴方向
                camera.up.z = 0;//设置相机的上为「z」轴方向
                camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
              }

3.设置场景scene

　//设置场景
              var scene;
              function initScene() {   
                scene = new THREE.Scene();
              }

4.设置光源light

OpenGL（WebGL）的三维空间中，存在点光源和聚光灯两种类型。 而且，作为点光源的一种特例还存在平行光源(无线远光源)。另外，作为光源的参数还可以进行 [环境光] 等设置。 作为对应， Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)]，和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上，都是环境光和其他几种光源进行组合。 如果不设置环境光，那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源，在这之后还会追加环境光。

(0) 声明全局变量(对象)

(1) 设置平行光源

(2) 设置光源向量

(3) 追加光源到场景

//设置光源
              var light;
              function initLight() { 
                light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
                light.position.set( 200, 200, 200 );//设置光源向量
                scene.add(light);// 追加光源到场景
              }

5.设置物体object

　//设置物体
              var sphere;
              function initObject(){  
                sphere = new THREE.Mesh(
                     new THREE.SphereGeometry(20,20),                //width,height,depth
                     new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
                );
                scene.add(sphere);
                sphere.position.set(0,0,0);
              }

最后，我们写一个主函数执行以上五步：

　//执行
              function threeStart() {
                initThree();
                initCamera();
                initScene();   
                initLight();
                initObject();
                renderer.clear(); 
                renderer.render(scene, camera);
              }

效果：

董无敌啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
three.js3D学习(1)

记录在http://www.hewebgl.com的学习过程：在引入three.js网站 https://github.com/mrdoob/three.js下载后开始基础的学习。一篇不错的three.js详解http://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html基础知识梳理<!DOCTYPE html><html lan
复制链接

扫一扫