const renderer = new THREE.WebGL1Renderer()//渲染器
const scene = new THREE.Scene()//场景
renderer.setPixelRatio(window.devicePixelRatio);//像素
const camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 60)//相机
const cameracontrol = new OrbitControls(camera, renderer.domElement)//相机轨道对象
const state = new Stats()//帧率
export function init() {
cameracontrol.addEventListener("change", render)//操作相机轨道以及执行渲染操作
camera.position.set(0, 1, 0)//相机位置
renderer.setSize(window.innerWidth, window.innerHeight)//渲染器长宽
document.body.appendChild(renderer.domElement)//加入渲染器
document.body.appendChild(state.dom)
const mesh = addimg("https://qhyxpicoss.kujiale.com/r/2019/07/01/L3D137S8ENDIADDWAYUI5L7GLUF3P3WS888_3000x4000.jpg?x-oss-process=image/resize,m_fill,w_1600,h_920/format,webp", scene, 1)
scene.add(mesh)
}
function render() { //函数渲染与帧率加载
renderer.render(scene, camera)
state.update()
}
function addimg(url, scene, n) {
const texture = new THREE.TextureLoader().load(url)//加载纹理图
const material = new THREE.MeshBasicMaterial({ map: texture });//贴图
material.side = THREE.DoubleSide;//双向贴图
const geometry = new THREE.SphereGeometry(50, 256, 256);//创建一个球形几何体(半径,水平分段数,垂直分段数)
const mesh = new THREE.Mesh(geometry, material);//网格对象,将几何体和材质加入到网格里
cameracontrol.minDistance = 1;//相机轨道的最小视距
cameracontrol.maxDistance = 2;//相机轨道的最大视距
cameracontrol.update();
scene.add(mesh);//把网格加入到场景中
return mesh
}
存在的问题:
显示过于粗糙,猜测是由于景深相机的深度与浏览器的像素渲染问题,球形还是过于搪塞,下次用矩形的实现就好的多了!
three-js中文地址
three-js官网
借鉴:https://juejin.cn/post/6844903918409875469