Three.js | 您所在的位置:网站首页 › threejs rotation › Three.js |
「这是我参与2022首次更文挑战的第3天,活动详情查看:2022首次更文挑战」 简介在three.js中,摄像机的作用就是不断的拍摄我们创建好的场景,然后通过渲染器渲染到屏幕中。想通过不同的角度观看场景,就需要修改摄像机的位置来拍摄场景。本文详细介绍的是透视相机(PerspectiveCamera) 它是用来模拟人眼所看到的景象,它也是3D场景的渲染中使用得最普遍的投影模式。 透视相机(PerspectiveCamera) 根据视锥的范围给渲染器提供需要渲染的场景范围。 实例化new THREE.PerspectiveCamera() 接受4个参数来确认视锥的范围。只要在视锥范围内的场景才会渲染。 fov 摄像机视锥体垂直视野角度。 aspect 摄像机视锥体长宽比。 near 摄像机视锥体近端面。 far 摄像机视锥体远端面。PerspectiveCamera对象的基类是Object3D,它具有: .position 设置相机在三维坐标中的位置。 camera.position.set(0,0,0); .up 设置相机拍摄时相机头顶的方向。 camera.up.set(0,1,0); .lookAt 设置相机拍摄时指向的方向。 camera.lookAt(0, 0, 0); 开始使用 学习 import * as THREE from 'https://threejs.org/build/three.module.js' const canvas = document.querySelector('#c2d') // 渲染器 const renderer = new THREE.WebGLRenderer({ canvas }) const fov = 40 // 视野范围 const aspect = 2 // 相机默认值 画布的宽高比 const near = 0.1 // 近平面 const far = 1000 // 远平面 // 透视投影相机 const camera = new THREE.PerspectiveCamera(fov, aspect, near, far) camera.position.set(0, 10, 20) camera.lookAt(0, 0, 0) // 场景 const scene = new THREE.Scene() scene.background = new THREE.Color('black') { // 地面 平铺 const planeSize = 20 const loader = new THREE.TextureLoader() const texture = loader.load('https://threejs.org/manual/examples/resources/images/checker.png') texture.wrapS = THREE.RepeatWrapping texture.wrapT = THREE.RepeatWrapping texture.magFilter = THREE.NearestFilter const repeats = planeSize / 2 texture.repeat.set(repeats, repeats) const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize) const planeMat = new THREE.MeshPhongMaterial({ map: texture, side: THREE.DoubleSide }) const mesh = new THREE.Mesh(planeGeo, planeMat) mesh.rotation.x = Math.PI * -0.5 scene.add(mesh) } { // 方块 const cubeSize = 4 const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize) const cubeMat = new THREE.MeshPhongMaterial({ color: '#8f4b2e' }) const mesh = new THREE.Mesh(cubeGeo, cubeMat) mesh.position.y = 2 scene.add(mesh) } { // 灯光 const color = 0xffffff const intensity = 1 // 方向光 const light = new THREE.DirectionalLight(color, intensity) light.position.set(0, 10, 0) light.target.position.set(-5, 0, 0) scene.add(light) scene.add(light.target) } // 渲染 function render() { renderer.render(scene, camera) requestAnimationFrame(render) } requestAnimationFrame(render) |
CopyRight 2018-2019 实验室设备网 版权所有 |