WebVR
Before you start, let's introduce WebVR, an experimental Javascript API that allows HMD (head-mounted displays) to connect to web apps, while accepting location and action information of these devices. This makes it possible to develop VR applications using Javascript (of course there are already many interface APIs that make Javascript a development language, but this does not affect our excitement for WebVR). And allowing us to preview and experience immediately, Chrome on mobile devices has supported WebVR and makes the phone a simple HMD. Mobile phones can divide the screen into left and right eye vision and apply sensors such as accelerometers and gyroscopes in the phone. All you need to do is buy a cardboard. I won’t say much below, let’s take a look at the main text of this article:
This is an article about how to create configurable objects based on configurable objects
Project gallery
Write a base class
This is a base class created which contains scenes, cameras, renderers, controllers and some methods
//
import * as THREE from 'three';
const OrbitControls = require('three-orbit-controls')(THREE)
let Scene, Camera, Renderer, Controls, loopID;
function createScene({domContainer = , fov = 50,far = 1000}){
if (!(domContainer instanceof HTMLElement)) {
throw new Error('domContainer is not a HTMLElement!');
}
// Initialize scene Scene = new ();
// Initialize camera Camera = new (fov, / , 1, far);
( 200, 200, 200 );
();
(Camera);
// Initialize renderer Renderer = new ({ canvas: domContainer, antialias: true, alpha: true } );
();
( 0xeeeeee, 1); // Change the renderer color (, );
= true;
();
initVR();
}
function initVR() {
// Initialize the controller Controls = new OrbitControls(Camera, );;
('change', render);
= true;
}
function render() {
(Scene, Camera);
}
function renderStart(callback) {
loopID = 0; // Record the cycle several times, followed by objects in the scene cleared if (loopID === -1) return;
let animate = function(){
loopID = requestAnimationFrame(animate);
callback();
();
render();
}
animate();
}
// Pause animation rendering function renderStop() {
if (loopID !== -1) {
(loopID);
loopID = -1;
}
}
// Recycle the current scene function clearScene() {
for(let i = - 1; i >= 0; i-- ) {
([i]);
}
}
// Clean the page function cleanPage() {
renderStop();
clearScene();
}
export {
Scene,
Camera,
Renderer,
Controls,
createScene,
initVR,
renderStart,
renderStop,
clearScene,
cleanPage
}
Create a VRpage base class
This is a base class of VRpage. All three projects that need to be created need to inherit this class and then generate a Three project
//
import * as THREE from 'three';
import * as VRcore from './';
export default class VRpage {
constructor(options) {
// Create a scene (options);
();
();
}
loadPage() {
(() => ());
();
}
initPage() {
();
();
}
start() {}
loaded() {}
update() {}
}
Generate a project
The following file is a class that inherits the VRpage class. Then we rewrite the start method and the update method. In the start method, we add a cube to the scene. The update method is a deformation animation for this cube. It will combine the renderStart method inside to perform animation effects.
//
import * as THREE from 'three';
import VRpage from '../../utils/';
import * as VRcore from '../../utils/';
export default class Page extends VRpage {
start() { // Create a 3D scene model before starting rendering let geometry = new (100,100,100);
let material = new ( { color:0x0000ff} );
= new (geometry,material);
(3, -2, -3);
const PointLight = new (0xffffff);
(500, 500, 500);
const AmbientLight = new ( 0x404040 ); // soft white light
(PointLight);
(AmbientLight);
= new ( 0xeeeeee ); // Change the background color of the scene ();
}
update() {
+= 0.01;
}
}
Here I am using react framework
//
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Page from './';
class Oho extends Component {
constructor() {
super();
= (this);
}
componentDidMount() {
const dom = ('#Oho');
(dom);
}
init(dom) {
const page = new Page({domContainer: dom});
}
render() {
return (
<div className="three-demo">
<canvas ref="camera"></canvas>
</div>
);
}
}
export default Oho;
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.