跳到主要内容

Three.js

更多代码案例

scene

const scene = new THREE.Scene()

camera

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2000)

renderer

const renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

geometry and material

给场景添加物品

const geometry = new THREE.BufferGeometry()
geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3))

const material = new THREE.PointsMaterial({
size: 1,
vertexColors: true
})

const points = new THREE.Points(geometry, material)
scene.add(points)

渲染

const animate = function () {
requestAnimationFrame(animate)
renderer.render(scene, camera)
}

animate()

controls

常用controls,比如OrbitControl.js,提供了良好的交互效果

const controls = new THREE.OrbitControls(camera, renderer.domElement)

camera.position.z = 10
controls.update()

const animate = function () {
requestAnimationFrame(animate)
controls.update()
renderer.render(scene, camera)
}

animate()

dat.gui.js

这个和Three.js没关系,不过有的官网例子中有用到,可以方便的修改数据。

const params = {
name: 'sumoqi', // 开发者
size: 1, // 粒子大小
color: '#25d25b', // 粒子颜色
background: 0x000000, // 背景颜色
flag: true,
}
const gui = new dat.GUI()
gui.add(params, 'name').name('开发者')
gui.add(params, 'size', 1, 10, 0.5).name('粒子大小').onChange(sizeChangeHandler)
gui.addColor(params, 'color').name('粒子颜色').onChange(colorChangeHandler)
gui.addColor(params, 'background').name('背景颜色').onChange(backgroundChangeHandler)
gui.add(params, 'flag').name('开启')

stats.js

这个也和Three.js没关系,不过可以显示实时的帧数