Three.js学习01

最新推荐文章于 2024-04-20 11:53:06 发布

小冯小冯冲冲冲

最新推荐文章于 2024-04-20 11:53:06 发布

阅读量809

点赞数 1

分类专栏： Three.js 文章标签： html three.js

本文链接：https://blog.csdn.net/qq_43881663/article/details/120380503

版权

Three.js 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

文章目录

前言
一、引入three.js
二、第一个案例
总结

前言

学习内容参考Three.js电子书，http://www.webgl3d.cn/Three.js/

Three.js是基于原生WebGL封装运行的三维引擎，因项目需要，现开始学习。

一、引入three.js

打开前端编译软件新建HTML(我使用的是WebStorm）。在.html文件中引入three.js就像前端经常使用的jquery.js一样引入即可。

将js文件下载到本地，相对地址：

<!--相对地址加载-->
<script src="./three.js"></script>

用别人远程的js文件，绝对地址：

<!--http绝对地址远程加载-->
<script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>

二、第一个案例

1.展示3D效果

效果如下：
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>第一个three.js文件_WebGL三维场景</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
      /* 隐藏body窗口区域滚动条 */
    }
  </style>
  <!--引入three.js三维引擎-->
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <!-- <script src="./three.js"></script> -->
  <!-- <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script> -->
</head>

<body>
  <script>
    /**
     * 创建场景对象Scene
     */
    var scene = new THREE.Scene();
    /**
     * 创建网格模型
     */
    // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
    var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
    var material = new THREE.MeshLambertMaterial({
      color: 0x0000ff
    }); //材质对象Material
    var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
    scene.add(mesh); //网格模型添加到场景中
    /**
     * 光源设置
     */
    //点光源
    var point = new THREE.PointLight(0xffffff);
    point.position.set(400, 200, 300); //点光源位置
    scene.add(point); //点光源添加到场景中
    //环境光
    var ambient = new THREE.AmbientLight(0x444444);
    scene.add(ambient);
    // console.log(scene)
    // console.log(scene.children)
    /**
     * 相机设置
     */
    var width = window.innerWidth; //窗口宽度
    var height = window.innerHeight; //窗口高度
    var k = width / height; //窗口宽高比
    var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
    //创建相机对象
    var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
    camera.position.set(200, 300, 200); //设置相机位置
    camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
    /**
     * 创建渲染器对象
     */
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);//设置渲染区域尺寸
    renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
    document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
    //执行渲染操作   指定场景、相机作为参数
    renderer.render(scene, camera);
  </script>
</body>
</html>

THREE.BoxGeometry()是立体，THREE.SphereGeometry()是球体。
相机表示好像用一个相机拍摄物体，后面的参数可以调整缩放（大小）和角度。

2.旋转动画效果

效果如下：

请添加图片描述
在上面基础上添加代码如下：

let T0 = new Date();//上次时间
function render() {
        let T1 = new Date();//本次时间
        let t = T1-T0;//时间差
        T0 = T1;//把本次时间赋值给上次时间
        requestAnimationFrame(render);
        renderer.render(scene,camera);//执行渲染操作
        mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
    }
render();

每执行一次渲染器对象WebGLRenderer的渲染方法.render()，浏览器就会渲染出一帧图像并显示在Web页面上，按照周期不停地调用渲染方法.render()就可以不停地生成新的图像覆盖原来的图像。只要一边旋转立方体，一边执行渲染方法.render()重新渲染，就可以实现立方体的旋转效果。

为了实现周期性渲染可以通过浏览器全局对象window对象的一个方法setInterval(),可以通过window对象调用该方法window.setInterval()，也可以直接以函数形式调用setInterval()。

setInterval()是一个周期性函数，就像一个定时器，每隔多少毫秒ms执行一次某个函数。

在实际执行程序的时候，可能requestAnimationFrame(render)请求的函数并不一定能按照理想的60FPS频率执行，两次执行渲染函数的时间间隔也不一定相同，如果执行旋转命令的rotateY的时间间隔不同，旋转运动就不均匀，为了解决这个问题需要记录两次执行绘制函数的时间间隔。

使用下面的渲染函数替换原来的渲染函数即可，rotateY()的参数是0.001t，也意味着两次调用渲染函数执行渲染操作的间隔t毫秒时间内，立方体旋转了0.001t弧度，很显然立方体的角速度是0.001弧度每毫秒(0.0001 rad/ms = 1 rad/s = 180度/s)。CPU和GPU执行一条指令时间是纳秒ns级，相比毫秒ms低了6个数量级，所以一般不用考虑渲染函数中几个计时语句占用的时间，除非你编写的是要精确到纳秒ns的级别的标准时钟程序。

3.利用鼠标控制动画三维场景

效果如下：
请添加图片描述

需要借助three.js控件之一OrbitControls.js。先引入OrbitControls.js，可以引用本地的，也可以和这里一样引用别人远程的。

<script src="http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js"></script>

在上面基础上添加代码如下：

function render() {
        renderer.render(scene,camera);//执行渲染操作
    }
    render();
    var controls = new THREE.OrbitControls(camera,renderer.domElement);//创建控件对象
    controls.addEventListener('change', render);//监听鼠标、键盘事件

不要又用鼠标控制，同时旋转。即不要同时使用requestAnimationFrame()或controls.addEventListener(‘change’, render)调用同一个函数。

4.插入新的几何体

4.1 常用几何体

//长方体 参数：长，宽，高
var geometry = new THREE.BoxGeometry(100, 100, 100);
// 球体 参数：半径60  经纬度细分数40,40
var geometry = new THREE.SphereGeometry(60, 40, 40);
// 圆柱  参数：圆柱面顶部、底部直径50,50   高度100  圆周分段数
var geometry = new THREE.CylinderGeometry( 50, 50, 100, 25 );
// 正八面体
var geometry = new THREE.OctahedronGeometry(50);
// 正十二面体
var geometry = new THREE.DodecahedronGeometry(50);
// 正二十面体
var geometry = new THREE.IcosahedronGeometry(50);

4.2 辅助坐标系

// 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
var axisHelper = new THREE.AxisHelper(250);
scene.add(axisHelper);

4.3 插入新的几何体

按自己所需创建新的网格模型即可，网格模型对象.translateY(n); 可以将该网格模型沿Y轴正方向平移n，网格模型对象.position.set(x,y,z);可以直接设置该网格模型对象的坐标为xyz。

// 立方体网格模型
var geometry1 = new THREE.BoxGeometry(100, 100, 100);
var material1 = new THREE.MeshLambertMaterial({
  color: 0x0000ff
}); //材质对象Material
var mesh1 = new THREE.Mesh(geometry1, material1); //网格模型对象Mesh
scene.add(mesh1); //网格模型添加到场景中

// 球体网格模型
var geometry2 = new THREE.SphereGeometry(60, 40, 40);
var material2 = new THREE.MeshLambertMaterial({
  color: 0xff00ff
});
var mesh2 = new THREE.Mesh(geometry2, material2); //网格模型对象Mesh
mesh2.translateY(120); //球体网格模型沿Y轴正方向平移120
scene.add(mesh2);

// 圆柱网格模型
var geometry3 = new THREE.CylinderGeometry(50, 50, 100, 25);
var material3 = new THREE.MeshLambertMaterial({
  color: 0xffff00
});
var mesh3 = new THREE.Mesh(geometry3, material3); //网格模型对象Mesh
// mesh3.translateX(120); //球体网格模型沿Y轴正方向平移120
mesh3.position.set(120,0,0);//设置mesh3模型对象的xyz坐标为120,0,0
scene.add(mesh3); //

效果如下：
在这里插入图片描述

5.设置光源

在这里插入图片描述
这里以点光源举例。上面例子中添加了一个点光源，设置光的颜色、位置，我们可以继续增加第二个点光源。

//点光源2
    var point2 = new THREE.PointLight(0xffffff);
    point2.position.set(-400, -200, -300); //点光源位置
    scene.add(point2); //点光源添加到场景中

6.设置材质

在材质对象构造函数THREE.MeshLambertMaterial()中可以设置下列属性。
在这里插入图片描述

同时也可以直接在构造函数参数中设置。
在这里插入图片描述
材质属性如下：

将wireframe属性设置为true效果如下：

材质类型：
在这里插入图片描述

以高光MeshPhongMaterial举例：

 var material2=new THREE.MeshPhongMaterial({
        color:0x0000ff,
        specular:0x4488ee,
        shininess:12
    });//材质对象

效果如下：

在这里插入图片描述

总结

Three.js新手接触，学习了基本的建立几何体以及几何体材质、光源等属性。

小冯小冯冲冲冲

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Three.js学习01

文章目录前言一、引入three.js二、第一个案例1.展示3D效果2.旋转动画效果3.利用鼠标控制动画三维场景4.插入新的几何体4.1 常用几何体4.2 辅助坐标系4.3 插入新的几何体5.设置光源6.设置材质总结前言学习内容参考Three.js电子书，http://www.webgl3d.cn/Three.js/Three.js是基于原生WebGL封装运行的三维引擎，因项目需要，现开始学习。一、引入three.js打开前端编译软件新建HTML(我使用的是WebStorm）。在.html文件.
复制链接

扫一扫