基于three.js构建3D全景图

以最简单的方式实现3D全景色

import * as THREE from 'three'
import {OrbitControls} from './OrbitControls'export class Panorama {constructor (renderer, camera, scene) {this.renderer = rendererthis.camera = camerathis.scene = scenethis.init()}init () {this.initRenderer()this.initScene()this.initCamera()this.initGeometry()this.initControls()}initRenderer () {this.renderer = new THREE.WebGLRenderer()this.renderer.setSize(window.innerWidth, window.innerHeight)document.body.appendChild(this.renderer.domElement)}initScene () {this.scene = new THREE.Scene()}initCamera () {this.camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)this.camera.position.z = 800}initGeometry () {const geometry = new THREE.BoxGeometry(800, 800, 800)const textureLoader = new THREE.TextureLoader()const imgArr = [require('../assets/posx.jpg'),require('../assets/negx.jpg'),require('../assets/posy.jpg'),require('../assets/negy.jpg'),require('../assets/posz.jpg'),require('../assets/negz.jpg')]let material = []for (let i = 0; i < imgArr.length; i++) {material.push(new THREE.MeshBasicMaterial({map: textureLoader.load(imgArr[i]), side: THREE.DoubleSide}))}const mesh = new THREE.Mesh(geometry, material)this.scene.add(mesh)}animate () {requestAnimationFrame(() => this.animate())this.renderer.render(this.scene, this.camera)}initControls () {const controls = new OrbitControls(this.camera, this.renderer.domElement)controls.addEventListener('change', this.animate())}
}

注:重点处理柱状图的坐标包含或者等于你的相机的坐标。

基于three.js构建3D全景图相关推荐

基于babylon.js的3D网页游戏从零教程
3D 游戏的 javascript 框架: 在很久一段时间 web 端的 3D 游戏引擎一直是 nothing,但现在却如雨后春笋. Unity (Unity 2018.2 开始已经彻底弃用 js,使 ...
three相机在模型上_基于 three.js 的 3D 粒子动效实现
作者:个推web前端开发工程师梁神一.背景粒子特效是为模拟现实中的水.火.雾.气等效果由各种三维软件开发的制作模块,原理是将无数的单个粒子组合使其呈现出固定形态,借由控制器.脚本来控制其整体或单 ...
Ghost 基于 Node.js 构建的开源博客平台
介绍: Ghost 是一个开源的博客平台, 可以把他看作 WordPress 的一个挑战者. 现阶段的 WordPress 已经可以明显感觉到有些臃肿不堪, 无论是构架, 设计, 还是实现处处都显 ...
基于three.js的3D炫酷元素周期表
最近在学习three.js在拿example中的项目练手,用了一整天的时间模仿了一个炫酷的元素周期表,在原有的基础上进行了一些改变.下面我会逐步讲解这个项目,算是加深理解,让大家提提意见. 因为我未搭 ...
使用three.js和CSS3DRenderer.js构建3D空间图片
分为两个部分,html部分和js引入部分,自己感兴趣也可以去three.js官网看,都有源码 three.js gitHub库地址:https://github.com/mrdoob/three.js ...
基于Three.js实现3D汽车模型
tips: 运行前请准备好对应的3D模型及Three.js三方库依赖 <!DOCTYPE html> <html lang="en"><head> ...
基于Three.js的3D简历制作
3D 简历 Github 项目Demo Three.js, Vue+Element UI, ES6 前言最近制作了一张3D简历.下面记录一下制作流程. 草图构造下载模型制作贴图编写代码写在后 ...
html调用手机陀螺仪,前端基于THREE.js的3D全景，支持鼠标控制和手机陀螺仪的切换...
/p> 'use strict' ;(function(_window) { var navigatorUserAgent = navigator.userAgent var iPhone = ...
基于 Egg.js 框架的 Node.js 服务构建之用户管理设计
转载需经本人同意且标注本文原始地址:https://zhaomenghuan.github.io/blog/nodejs-eggjs-usersytem.html 前言近来公司需要构建一套 EMM( ...

基于three.js构建3D全景图

以最简单的方式实现3D全景色

基于three.js构建3D全景图相关推荐

最新文章

热门文章