three.js is a javascript can be used to draw 3d graphics library, WebGL encapsulates the api, allowing developers more convenient, just like the DOM api for jQuery encapsulates the same. Then record what steps to draw a triangle in a small rotation of the game:
A. Initialization Project
Download the official micro-channel Developer Tools , then New Project
appid Select test number to project the path to self-designate
Open the project with an editor, you get the following directories:
Then in addition to game.js, game.json, project.config.json Delete all, and the contents of game.js empty.
game.js is the entrance to the whole game, game.json small game configuration. Specific reference document .
II. Three.js introduction and Adapter
-
Adapter
The operating environment of small game there is no BOM and DOM, use wx API analog BOM and DOM code consisting library called Adapter. An official Adapter, with it the line.
-
three.js
Copy the contents of three.min.js
New directory libs, will three.js and Adapter on the source directory
In game.js added:
import './libs/weapp-adapter'
import * as THREE from './libs/three'
复制代码III. Draw a triangle
According to the document as long as the adapter of the adapter will be introduced to create a screen on a Canvas, and exposure to a global variable canvas.
Three.js three conditions using a graphics rendering necessary: renderer, scene, camera
-
Renderer Renderer
Renderer to see the name to know, is used to render graphics onto a screen.
-
Scene Scene
If the drawn graphics seen as one object, then the local scene is used to store these objects.
-
Camera Camera
The camera just like the human eye as a camera used to determine where to see objects in the scene, if there is one thing, a different point of view of this object, it is possible to see is not the same shape.
Creating these three things in game.js
import './libs/weapp-adapter'
import * as THREE from './libs/three'
const width = window.innerWidth
const height = window.innerHeight
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer({
// 由于weapp-adapter会自动创建一个全屏的canvas所以这里直接用
canvas
})
// 创建场景
const scene = new THREE.Scene()
/**
* OrthographicCamera是正交相机，
* 在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。
*/
const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 1000)
复制代码new THREE.OrthographicCameraThe parameters can refer to the official documentation or Three.js base to explore the two - orthogonal projection camera
Now three conditions are necessary, we should add objects to the scene.
Three.js known in the mesh object, which consists of geometry (Geometry) and material (Material's) composition.
I understand that is the basic shape of the object geometry, like the WebGL vertex shader, the material is color, ah geometry, lighting and other information, as WebGL the fragment shader.
three.js provided in a lot of geometry, but it seems there is no basic triangle, so she painted a triangle.
In game.js added:
// 画一个三角形
const triangleShape = new THREE.Shape()
triangleShape.moveTo(0, 100) // 三角形起始位置
triangleShape.lineTo(-100, -100)
triangleShape.lineTo(100, -100)
triangleShape.lineTo(0, 100)
复制代码Three.js said here about the coordinate system
With substantially triangular shape, api three.js provided by the geometry of the triangle into
In game.js added:
// 将三角形变成组成物体的几何体
const geometry = new THREE.ShapeGeometry(triangleShape)
复制代码The geometry of the object to get the composition.
Then the material is:
In game.js added:
// 物体的材料
const material = new THREE.MeshBasicMaterial({
color: new THREE.Color('#7fffd4'), // 颜色信息
side: THREE.DoubleSide // 用于确定渲染哪一面，因为是旋转的，所以需要正反面都渲染，也就是两面
})
复制代码+ Material with geometry object, and added to the scene:
// 组成物体并添加到场景中
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, -200) // 设置物体在场景中的位置
scene.add(mesh)
复制代码Set the camera's position and look to the coordinates
camera.position.set(0, 0, 0) // 相机位置
camera.lookAt(new THREE.Vector3(0, 0, -200)) // 让相机从0, 0, 0 看向 0, 0, -200
复制代码The final step is rendered:
renderer.setClearColor(new THREE.Color('#f84462')) // 设置背景色
renderer.setSize(width, height) // 设置最终渲染的尺寸
renderer.render(scene, camera)
复制代码This time to the developer tools, you can see a triangle of:
IV. Let triangle move
const render = () => {
mesh.rotateY(0.05) // three.js 中旋转角度是通过弧度计算的，公式：度＝弧度×180°/π
renderer.render(scene, camera)
requestAnimationFrame(render)
}
render()
复制代码effect:
Complete code:
import './libs/weapp-adapter'
import * as THREE from './libs/three'
const width = window.innerWidth
const height = window.innerHeight
// 创建WebGL渲染器
const renderer = new THREE.WebGLRenderer({
// 由于weapp-adapter会自动创建一个全屏的canvas所以这里直接用
canvas
})
// 创建场景
const scene = new THREE.Scene()
/**
* OrthographicCamera是正交相机，
* 在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。
*/
const camera = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 1000)
// 画一个三角形
const triangleShape = new THREE.Shape()
triangleShape.moveTo(0, 100) // 三角形起始位置
triangleShape.lineTo(-100, -100)
triangleShape.lineTo(100, -100)
triangleShape.lineTo(0, 100)
// 将三角形变成组成物体的几何体
const geometry = new THREE.ShapeGeometry(triangleShape)
// 物体的材料
const material = new THREE.MeshBasicMaterial({
color: new THREE.Color('#7fffd4'), // 颜色信息
side: THREE.DoubleSide // 用于确定渲染哪一面，因为是旋转的，所以需要正反面都渲染，也就是两面
})
// 组成物体并添加到场景中
const mesh = new THREE.Mesh(geometry, material)
mesh.position.set(0, 0, -200) // 设置物体在场景中的位置
scene.add(mesh)
camera.position.set(0, 0, 0) // 相机位置
camera.lookAt(new THREE.Vector3(0, 0, -200)) // 让相机从0, 0, 0 看向 0, 0, -200
renderer.setClearColor(new THREE.Color('#f84462')) // 设置背景色
renderer.setSize(width, height) // 设置最终渲染的尺寸
const render = () => {
mesh.rotateY(0.05) // three.js 中旋转角度是通过弧度计算的，公式：度＝弧度×180°/π
renderer.render(scene, camera)
requestAnimationFrame(render)
}
render()
复制代码Reproduced in: https: //juejin.im/post/5cfd08aef265da1b614feb3a