在three.js中创建一个3D世界

发布日期：2022/1/20 6:28:32      浏览量：

创建一个3D世界需要：

1. 创建一个场景
2. 设置光源
3. 创建相机，设置相机位置和相机镜头的朝向
4. 创建3D渲染器，使用渲染器把创建的场景渲染出来

关于场景

你可以为场景添加背景颜色，或创建一个盒模型（球体、立方体），给盒模型的内部贴上图片，再把相机放在这个盒模型内部以达到模拟场景的效果。盒模型的方式多用于360度全景，比如房屋vr展示

【登陆页面】创建场景的例子：

const scene = new THREE.Scene()
// 在场景中添加雾的效果，Fog参数分别代表‘雾的颜色’、‘开始雾化的视线距离’、刚好雾化至看不见的视线距离’
scene.fog = new THREE.Fog(0x000000, 0, 10000)
// 盒模型的深度
const depth = 1400
// 在场景中添加一个圆球盒模型
// 1.创建一个立方体
const geometry = new THREE.BoxGeometry(1000, 800, depth)
// 2.加载纹理
const texture = new THREE.TextureLoader().load(’bg.png’)
// 3.创建网格材质（原料）
const material = new THREE.MeshBasicMaterial({map: texture, side: THREE.BackSide})
// 4.生成网格
const mesh = new THREE.Mesh(geometry, material)
// 5.把网格放入场景中
scene.add(mesh)

关于光源

为场景设置光源的颜色、强度，同时还可以设置光源的类型（环境光、点光源、平行光等）、光源所在的位置

【登陆页面】创建光源的例子：

// 1.创建环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 1)
// 2.创建点光源，位于场景右下角
const light_rightBottom = new THREE.PointLight(0x0655fd, 5, 0)
light_rightBottom.position.set(0, 100, -200)
// 3.把光源放入场景中
scene.add(light_rightBottom)
scene.add(ambientLight)

透视相机：被用来模拟人眼所看到的景象。它是3D场景的渲染中使用得最普遍的投影模式。如图：

/**
 * 为了避免边缘变形，这里将fov角度设置小一些，距离拉远一些
 * 固定视域角度，求需要多少距离才能满足完整的视野画面
 * 15度等于(Math.PI / 12)
 */
const container = document.getElementById(’login-three-container’)
const width = container.clientWidth
const height = container.clientHeight
const fov = 15
const distance = width / 2 / Math.tan(Math.PI / 12)
const zAxisNumber = Math.floor(distance - depth / 2)
const camera = new THREE.PerspectiveCamera(fov, width / height, 1, 30000)
camera.position.set(0, 0, zAxisNumber)
const cameraTarget = new THREE.Vector3(0, 0, 0)
camera.lookAt(cameraTarget)

关于渲染器

用WebGL渲染出你精心制作的场景。它会创建一个canvas进行渲染

【登陆页面】创建渲染器的例子：

// 获取容器dom
const container = document.getElementById(’login-three-container’)
// 创建webgl渲染器实例
const renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true })
// 设置渲染器画布的大小
renderer.setSize(width, height)
// 把画布实例（canvas）放入容器中
container.appendChild(renderer.domElement)
// 渲染器渲染场景
renderer.render(scene, camera)

需要注意，这样创建出来的场景并没有动效，原因是这次渲染的仅仅只是这一帧的画面。为了让场景中的物体能动起来，我们需要使用requestAnimationFrame，所以我们可以写一个loop函数

//动画刷新
const loopAnimate = () => {
    requestAnimationFrame(loopAnimate)
    scene.rotateY(0.001)
    renderer.render(scene, camera)
}
loopAnimate()