前言

通过结合上面的场景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);

结果

点光源效果

环境光效果

点光源+环境光效果

three.js-新手上路-第一个3D场景

前言