前言
通过结合上面的场景Scene、相机Camera、 光源Light、 网格模型Mesh等概念,绘制一个静态的立方体。
vue项目的three安装与引入
npm install three --dev-save
项目中three的引入
import * as THREE from 'three'
场景Scene
Scene 对象是 three.js 的核心对象它继承自 Object3D 对象。
场景是我们放置物体、灯光和相机的地方。
Object3D是 Three.js 中大多数对象的基类,并提供一组用于在 3D 空间中操作对象的属性和方法。
var scene = new THREE.Scene();
创建网格模型Mesh
three.js中的几何体是不能直接被渲染的,只有几何体和材质结合成网格才能被渲染到屏幕上。
几何体Geometry
// let geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
let geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
材质Material
let material = new THREE.MeshLambertMaterial({
color: 0x0000ff
});
结合二者创建mesh,并添加至scene中
let mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
scene.add(mesh); //网格模型添加到场景中
光源Light
对场景中的对象进行一个打灯的效果,就需要创建一个光源。
let point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
let ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
相机Camera
let width = window.innerWidth; //窗口宽度
let height = window.innerHeight; //窗口高度
let k = width / height; //窗口宽高比
let s = 200; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
//正射投影相机 OrthographicCamera
//透射投影 PerspectiveCamera
let camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
这里的scene.position是默认值,坐标原点。
渲染器Renderer
就是将scene与camera进行一系列的计算,然后将计算结果绘制在canvas上。
- 先渲染器创建
- 开始渲染
- canvas对象
2和3顺序可以颠倒
var renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);//设置渲染区域尺寸
renderer.setClearColor(0x000000, 1); //设置背景颜色
document.getElementById(this.id).appendChild(renderer.domElement); //div元素中插入canvas对象
//执行渲染操作 指定场景、相机作为参数
renderer.render(scene, camera);
结果
点光源效果
环境光效果
点光源+环境光效果