three学习路线(一)

  1. 安装three官网包
  2. 引入three.js
<script type="module">
// 现在浏览器支持ES6语法,自然包括import方式引入js文件
import * as THREE from './build/three.module.js';
</script>

three.js三个基本概念场景Scene相机Camera渲染器Renderer

1.三维场景Scene

你可以把三维场景Scene (opens new window)对象理解为虚拟的3D场景,用来表示模拟生活中的真实三维场景,或者说三维世界。

创建3D场景对象Scene

const scene = new THREE.Scene();

2.物体形状:几何体Geometry

   Three.js提供了各种各样的几何体API,用来表示三维物体的几何形状

{

   长方体(BoxGeomentry)

   圆柱体(CylinderGeometry)

   球体(SphereGeometry)

   圆锥(ConeGeometry)

   矩形平面(PlaneGeometry)

   圆面图(CircleGeometry)

}

//创建一个长方体几何对象Geometry

const geometry = new THREE.BoxGeometry(100, 100, 100); 

3.物体外观:材质Material

如果你想定义物体的外观效果,比如颜色,就需要通过材质Material相关的API实现。

threejs不同材质渲染效果不同,下面就以threejs最简单的网格基础材质

MeshBasicMaterial (opens new window)为例给大家实现一个红色材质效果。

{

   网格基础材质(MeshBasicMaterial)

   网格漫反射材质(MeshLamberMaterial)

   网格高光材质(MeshPhongMaterial)

   物理材质(MeshStanderMaterial)(MeshPhysicalMaterial)

   点材质(PointsMaterial)

   线基础材质(LineBasicMaterial)

   精灵材质(SpriteMaterial)

}

//创建一个材质对象Material

const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
}); 

4.物体:网格模型Mesh

实际生活中有各种各样的物体,在threejs中可以通过网格模型Mesh (opens new window)表示一个虚拟的物体,比如一个箱子、一个鼠标。

// 两个参数分别为几何体geometry、材质material

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh

5.模型位置:position

实际生活中,一个物体往往是有位置的,对于threejs而言也是一样的,你可以通过位置属性position定义网格模型Mesh在三维场景Scene中的位置。

const mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
//设置网格模型在三维空间中的位置坐标,默认是坐标原点
mesh.position.set(0,10,0);

6.add()方法

在threejs中你创建了一个表示物体的虚拟对象Mesh,需要通过.add()方法,把网格模型mesh添加到三维场景scene中。

scene.add(mesh); 

代码小结

<script type="module">
            // es6引入three.js
            import * as THREE from "../build/three.module.js";
            
            // 创建场景
            const scene = new THREE.Scene();
 
            // 创建物体形状(几何体)
            const geomeyry = new THREE.BoxGeometry(100, 100, 100);
 
            // 添加物体外观(材质)
            const material = new THREE.MeshBasicMaterial({
                color: 0xff0000,
            });
            // 创建网格模型 把形状外观放入模型中
            const mesh = new THREE.Mesh(geomeyry, material);
 
            // 设置模型所在场景(Scene)中的位置
            mesh.position.set(0, 10, 0);
 
            // 把模型添加到场景(Scene)中
            scene.add(mesh);
</script>


点赞1
点击评论1
收藏0
浏览 59
 

还没有评论,快来发表第一个评论吧

免责声明:凡在本网站出现的信息,均仅供参考。本网站将尽力确保所提供信息的准确性及可靠性,但不保证有关资料的准确性及可靠性,注册用户和一般页面游览者在使用前请进一步核实,并对任何自主决定的行为负责。本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任(包括侵权责任、合同责任和其它责任)
*尊重作者,转载请注明出处!