three.js新手入门

simple-lau

已于 2022-03-28 13:57:27 修改

阅读量2.1k

点赞数

文章标签：贴图 3d

于 2022-03-18 07:09:54 首次发布

本文链接：https://blog.csdn.net/weixin_48263065/article/details/123321585

版权

本文介绍了如何在网页上使用three.js进行3D场景创建，包括场景对象的设置、透视摄像机的使用、WebGLRenderer的配置，以及立方体和基本材质的组合。通过实例演示，读者将学会如何初始化并操控一个简单的3D环境。

摘要由CSDN通过智能技术生成

# three.js
为了真正能够three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。

## 场景 Scene()
> 场景能够让你在什么地方、摆放什么东西，这是你放置物体、灯光和摄像机的地方。

相关常用属性:
1. autoUpdate : Boolean
默认值为true，若设置了这个值，则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。当设为false时，则需要手动维护场景中的矩阵。
2. background : Object
默认值为null，可以设置为纯背景色，也可以设置为纹理(背景图)。
3. environment : Texture
默认为null，若该值不为null，则该纹理贴图将会被设为场景中所有物理材质的环境贴图。
4. fog : Fog
一个fog实例定义了影响场景中的每个物体的雾的类型。默认值为null。

## 摄像机
摄像机分为透明摄像机和正交摄像机，简单理解的话，对于同一个物体，透明摄像机近大远小，而正交摄像机则是远近大小相同。

### 透视摄像机 PerspectiveCamera()
> 这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
> 透明摄像机对象需携带4个参数
fov : 摄像机视锥体垂直视野角度
aspect : 摄像机视锥体长宽比，通常就是盒子的长宽比
near : 摄像机视锥体近端面，即当距离小于这个距离则不展示
far : 摄像机视锥体远端面，即当距离大于这个距离则不展示

## 渲染器(WebGLRenderer)
相关常用属性:
1. domElement : DOMElement
一个canvas，渲染器在其上绘制输出。渲染器的构造函数会自动创建(如果没有传入canvas参数);你需要做的仅仅是像下面这样将它加页面里去。该属性还有给当前dom设置大小的方法setSize(width, height)。

## 几何体(Geometry)
> three.js里面内置了多种几何体，目前先只了解最简单的立方体。

### 立方体(BoxGeometry)
> 立方体在这里只是一个形状，并不能真正算一个物体，他需要和材质进行结合才能生成一个物体。
> 生成立方体对象所需携带参数
width : X轴上面的宽度，默认值为1。
height : Y轴上面的高度，默认值为1。
depth : Z轴上面的深度，默认值为1。

## 材质(Meterial)

### 基础网格材质(MeshBasicMaterial)
> 这种材质不受光照的影响。

相关常用属性：
1. color：材质的颜色(Color)，默认值为白色 (0xffffff)。
2. envMap : Texture，环境贴图。默认值为null。

## 网格（Mesh）
> 表示基于以三角形为polygon mesh（多边形网格）的物体的类。

相关常用方法：
1. clone () : Mesh
返回这个Mesh对象及其子级的克隆。

## three.js-demo
现在，你应该可以看懂以下代码了吧~
```html
<html>
   <head>
       <meta charset="utf-8">
       <title>My first three.js app</title>
       <style>
           body { margin: 0; }
       </style>
   </head>
   <body>
       <script src="http://www.yanhuangxueyuan.com/threejs/build/three.js"></script>
       <script>
           const scene = new THREE.Scene();
           const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

           const renderer = new THREE.WebGLRenderer();
           renderer.setSize( window.innerWidth, window.innerHeight );
           document.body.appendChild( renderer.domElement );

           const geometry = new THREE.BoxGeometry();
           const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
           const cube = new THREE.Mesh( geometry, material );
           scene.add( cube );

camera.position.z = 5;

function animate() {
requestAnimationFrame( animate );

cube.rotation.x += 0.01;
cube.rotation.y += 0.01;

renderer.render( scene, camera );
};

           animate();
       </script>
   </body>
</html>

simple-lau

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
three.js新手入门

# three.js为了真正能够three.js来进行显示，我们需要以下几个对象：场景、相机和渲染器，这样我们就能透过摄像机渲染出场景。## 场景 Scene()> 场景能够让你在什么地方、摆放什么东西，这是你放置物体、灯光和摄像机的地方。相关常用属性:1. autoUpdate : Boolean默认值为true，若设置了这个值，则渲染器会检查每一帧是否需要更新场景及其中物体的矩阵。当设为false时，则需要手动维护场景中的矩阵。2. background : O...
复制链接

扫一扫