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

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.