three实现一个360全景中的三维赛车MP4/5效果代码
代码语言:html
所属分类:三维
代码描述:three实现一个360全景中的三维赛车MP4/5效果代码
代码标签: 360 全景 中的 三维 赛车 MP4 / 5 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 0; } canvas { width: 100%; height: 100%; } button { background: white; color: black; border: 1px solid black; padding: 0.5em 1em; position: absolute; top: 1em; left: 1em; cursor: pointer; } </style> </head> <body > <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script> <script> class Scene { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0xffffff); // this.scene.fog = new THREE.FogExp2(0x222277, 0.2); return this.scene; }} class Renderer { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(this.sketch.sizes.width, this.sketch.sizes.height); this.renderer.setPixelRatio(Math.min(2, window.devicePixelRatio)); this.renderer.shadowMap.enabled = true; this.renderer.outputEncoding = THREE.sRGBEncoding; this.renderer.update = this.update.bind(this.sketch); return this.renderer; } update() { this.renderer.render(this.scene, this.camera); }} class Camera { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.camera = new THREE.PerspectiveCamera( 75, this.sketch.sizes.width / this.sketch.sizes.height, 0.01, 500); this.camera.position.x = -50; this.camera.position.y = 50; this.camera.position.z = 50; this.sketch.scene.add(this.camera); return this.camera; }} class Animator { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.tasks = []; } /** * * @param {function} fn */ add(fn) { this.tasks.push(fn); } animate() { requestAnimationFrame(this.animate.bind(this)); this.tasks.forEach(task => task()); this.sketch.renderer.update(); }} class Controls { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.controls = new THREE.OrbitControls( this.sketch.camera, this.sketch.renderer.domElement); return this.controls; }} class Events { constructor(sketch, settings) { this.sketch = sketch; this.settings = { ...settings }; this.addEvents(); } addEvents() { window.addEventListener("resize", this.onWindowR.........完整代码请登录后点击上方下载按钮下载查看
网友评论0