Three.js学习3:第一个Three.js页面

 -----------------------------华丽的分割线---------------------

相关代码均已上传到 gitee 中:myThree: 学习 Three.js ,努力加油~!

Gitee 静态演示地址:Three JS 演示页面

 -----------------------------华丽的分割线---------------------

一、一图看懂Three.js 坐标

这个没什么好说的,只是需要注意颜色。在 Three.js 提供的编辑器中,各种物体的坐标也这样的色彩:

  • 红色:x 轴

  • 绿色:y 轴

  • 蓝色:z 轴

Three.js 提供的编辑器可以在本地 Three.js 文档中的 editor 目录里访问到:

http://localhost:9000/editor/

如果不知道怎么做,可以参考我的这篇博文:

Three.js学习1:threejs简介及文档本地部署-CSDN博客

Three.js 的坐标单位不是像素。因为考虑到项目的内容,有些项目长度单位是米,甚至是公里都有可能。所以,坐标的单位,我们一般就称为"单位"。根据项目需要,它可以是毫米,厘米,分米,公里等。  

二、Three.js 的基本组件

借用一张网图:

1. 场景 Sence

场景是所有 3D 物体的容器,可以理解为要展示的 3D 世界。

所有要展示的内容都要放入场景中,包括 Three.js 提供的立方体、圆球、圆柱之类的,也包括外部加载的 3D 模型,以及灯光相机等等。

// 创建3D场景对象Scene
const scene = new THREE.Scene();
// 通过 add 方法可以添加内容到场景中。
scene.add( 物品 )

2. 相机 Camera

相机决定了场景中哪个角度的 3D 物体会显示出来。

相机就像人的眼睛,人站在不同位置,抬头或者低头都能够看到不同的物体。场景只有一种,但是相机却有很多种。只要设置相机不同的参数,就能够让相机产生不一样的效果。

如,透视相机 PerspectiveCamera。本质上就是在模拟人眼观察这个世界的规律,远小近大,也是用的比较多的相机。

// 创建一个透视投影相机对象
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100);
scene.add( camera );            // 添加相机到场景中

其参数分别为:

  1. fov :摄像机视锥体垂直视野角度,以角度来表示。默认值是50

  2. aspect :摄像机视锥体宽高比:默认值为 1,一般用渲染器到宽高比

  3. near:摄像机视锥体近截面,默认值是0.1

  4. far:摄像机视锥体远截面,默认值是2000

只有在视锥体范围内,近截面和远截面之间的物体才会被渲染出来。

 Three.js 编辑器里视锥体的样子:

因为,相机默认在原点上,物体也默认在原点上。所以,要看到物品,要把相机往后挪动位置,也既只修改 z 轴位置。

// 调整相机位置 x,y,z
camera.position.z = 0;
camera.position.x = 0;
camera.position.y = 10;

// 或者 
camera.position.set(0,0,10);

3. 物体

物体分为两部分:物体形状,材质。它们合在一起,形成一个(网格)物体

(网格)物体添加到场景里就可以看到它了。

(1)物体形状:几何体 geometry

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

文档搜索关键词 geometry 可以看到 three.js 提供各种几何体相关API,具体使用方法,可以参考文档。

如,创建一个立方体。

//创建一个立方体几何对象Geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);  // 长宽高都一样,正方体

(2)物体外观:材质 Material

材质可以简单理解为物体的皮肤。

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

文档搜索关键词 material 可以看到 three.js 提供各种材质相关API,具体使用方法,也可以参考文档。

//创建一个基础材质对象Material
const material = new THREE.MeshBasicMaterial({
    color: 0xff0000,//0xff0000设置材质颜色为红色
});

(3)物体:网格对象 Mesh

几何体材质组合起来,创建一个物体,也既网格对象

// 两个参数分别为几何体geometry、材质material
const mesh = new THREE.Mesh(geometry, material); //网格对象 Mesh
// 可以设置网格对象在三维空间中的位置坐标,默认是坐标原点
mesh.position.set(0,10,0);
//通过场景的add方法把网格对象 mesh 添加到场景中
scene.add(mesh);

4. 渲染器 Renderer

渲染器将场景和相机中的 3D 对象渲染到屏幕上。Three.js 提供了多个渲染器,包括 WebGLRenderer 、CSS3DRenderer、SVGRenderer 等。其中,WebGLRenderer 用的最多,它的本质就是一个 Canvas 标签。

Three.js 同时提供了其他几种渲染器,当用户所使用的浏览器过于老旧,或者由于其他原因不支持 WebGL 时,可以使用这几种渲染器进行降级。

渲染器到作用就是根据相机镜头内容,画出 3D 场景,并把结果呈现在 canvas 标签里。所以,还要把渲染器(canvas标签)添加到页面中。

const renderer = new THREE.WebGLRenderer();
// 设置渲染器尺寸,也就是 canvas 标签尺寸。这里设置为窗口大小。
renderer.setSize(window.innerWidth, window.innerHeight);

renderer.render(scene, camera); //执行渲染操作
// 挂载到页面。会给页面增加一个 canvas 标签,该标签就会展现 3D 物体
document.body.appendChild(renderer.domElement);

三、第一个 3D 页面

这个案例来自官方文档,虽然简单,但是把前面说的 Three.js 基本组件简单引用了一下。

大家可以反复练习。

本案例是做了一个旋转的 3D 立方体。其中,动画运用了 requestAnimationFrame ,去反复执行渲染操作。每次渲染之前都让立方体旋转了一点点。

1.html:

 <script src="js/myjs.js" type="module"></script>

my.js:

import * as THREE from "./three.module.min.js";

// 场景
const scene = new THREE.Scene();
scene.background = new THREE.Color( 0xEEEEEE);  // 设置场景背景色

// 物体:包含几何形 geometry 和 材质(皮肤) meterial 两部分
const geometry = new THREE.BoxGeometry(1,1,1);  // 立方体
const meterial = new THREE.MeshBasicMaterial({  
    color: "#ff0000"
});
const mesh = new THREE.Mesh( geometry, meterial);
scene.add( mesh );              // 添加物体到场景中

// 相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 100);
camera.position.set(0,0,10);    // 修改相机位置
camera.lookAt( mesh.position ); // 相机镜头盯着物体
scene.add( camera );            // 添加相机到场景中

// 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );   // 设置渲染器(canvas标签)大小
document.body.appendChild( renderer.domElement );            // 添加渲染器(canvas标签)到页面中

function animateFun(){
    mesh.rotation.x += 0.01;   // 旋转物体
    mesh.rotation.y += 0.01;
    // 渲染
    renderer.render( scene, camera);
    requestAnimationFrame(animateFun);
}
animateFun();

运行 1.html,可以看到一个旋转的立方体。

  • 18
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值