Example code of a project class written based on three. js, sample code of three. js

Example code of a project class written based on three. js, sample code of three. js

WebVR

Before starting, we will introduce WebVR. WebVR is an experimental Javascript API that allows HMD (head-mounted displays) to connect to web apps, the location and action information of these devices are also accepted. This makes it possible to develop VR applications using Javascript (of course, many API interfaces have made Javascript a development language, but this does not affect our excitement for WebVR ). So that we can preview and experience it immediately. chrome on mobile devices already supports WebVR and uses mobile phones as a simple HMD. The mobile phone can divide the screen into the left and right eyes and apply sensors such as the accelerometer and gyroscope in the mobile phone. What you need to do is perhaps to buy a cardboard. Let's take a look at the text below:

This is an article about how to create configurable three. js Objects Based on three. js.

Project address

Compile a base class of three. js

This is a Three. js base class that contains scenarios, cameras, Renderer, controllers, and some methods.

// VRcore. js import * as THREE from 'three '; const OrbitControls = require ('Three-orbit-controls') (three) let Scene, Camera, Renderer, controls, loopID; function createScene ({domContainer = document. body, fov = 50, far = 1000}) {if (! (DomContainer instanceof HTMLElement) {throw new Error ('domcontainer is not a HTMLElement! ');} // Initialize scene Scene = new THREE. scene (); // initialize camera Camera = new THREE. perspectiveCamera (fov, domContainer. clientWidth/domContainer. clientHeight, 1, far); Camera. position. sets (200,200,200); Camera. lookAt (Scene. position); Scene. add (Camera); // initialize renderer Renderer = new THREE. webGLRenderer ({canvas: domContainer, antialias: true, alpha: true}); Renderer. clear (); Renderer. setClearColo R (0 xeeeeee, 1); // change the Renderer color Renderer. setSize (domContainer. clientWidth, domContainer. clientHeight); Renderer. shadowMap. enabled = true; Renderer. setPixelRatio (domContainer. devicePixelRatio); initVR ();} function initVR () {// initialize controller Controls = new OrbitControls (Camera, Renderer. domElement); Controls. addEventListener ('change', render); Controls. enableZoom = true;} function render () {Renderer. rende R (Scene, Camera);} function renderStart (callback) {loopID = 0; // record loop times, there is a return with the object in the clear scene if (loopID =-1); let animate = function () {loopID = requestAnimationFrame (animate); callback (); Controls. update (); render ();} animate () ;}// pause the animation rendering function renderStop () {if (loopID! =-1) {window. cancelAnimationFrame (loopID); loopID =-1 ;}// reclaim function clearScene () {for (let I = Scene. children. length-1; I> = 0; I --) {Scene. remove (Scene. children [I]) ;}}// clear 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 must inherit this class and then generate a Three project.

// VRpage. js import * as THREE from 'three '; import * as VRcore from '. /VRcore. js'; export default class VRpage {constructor (options) {// create scenario VRcore. createScene (options); this. start (); this. loadPage ();} loadPage () {VRcore. renderStart () => this. update (); this. loaded ();} initPage () {this. loadPage (); this. start () ;}start () {}loaded () {} update (){}}

Generate a Three. js Project

The following file is a class that inherits the VRpage class. Then we overwrite the start and update methods. In the start method, we add a cube to the scenario, the update method is a deformation animation for the cube, which combines VRcore. the renderStart method in js is used for animation.

// Page. js import * as THREE from 'three '; import VRpage from '.. /.. /utils/VRpage. js'; import * as VRcore from '.. /.. /utils/VRcore. js'; export default class Page extends VRpage {start () {// create a scene 3d model let geometry = new THREE before starting rendering. cubeGeometry (100,100,100); let material = new THREE. meshLambertMaterial ({color: 0x0000ff}); this. box = new THREE. mesh (geometry, material); this. box. position. set (3,-2,-3); const PointLight = new THREE. pointLight (0 xffffff); PointLight. position. set (500,500,500); const AmbientLight = new THREE. ambientLight (0x404040); // soft white light VRcore. scene. add (PointLight); VRcore. scene. add (AmbientLight); VRcore. scene. background = new THREE. color (0 xeeeeee); // Changes the background Color of the scenario VRcore. scene. add (this. box);} update () {this. box. rotation. y ++ = 0.01 ;}}

Here I use the react framework.

 // index.js import React, { Component } from 'react'; import PropTypes from 'prop-types'; import Page from './Page.js'; class Oho extends Component { constructor() {  super();  this.init = this.init.bind(this); } componentDidMount() {  const dom = document.querySelector('#Oho');  this.init(dom); } init(dom) {  const page = new Page({domContainer: dom}); } render() {  return (  <div className="three-demo">   <canvas id="Oho" ref="camera"></canvas>  </div>  ); } } export default Oho;

Summary

The above is all the content of this article. I hope the content of this article has some reference and learning value for everyone's learning or work. If you have any questions, please leave a message to us, thank you for your support.