This article mainly introduces to you the relevant information about a project class written based on three.js. The article introduces it in great detail through sample code. It has certain reference learning value for everyone's study or work. Friends who need it can follow Let’s learn together with the editor.
WebVR
Before we begin, let’s introduce WebVR. WebVR is an experimental Javascript API that allows HMDs (head-mounted displays) to connect to web apps while also being able to Accept location and motion information from these devices. This makes it possible to develop VR applications using Javascript (of course there are already many interface APIs that use Javascript as 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 allows the phone to be used as a simple HMD. The mobile phone can divide the screen into left and right eye vision and use the accelerometer, gyroscope and other sensors in the mobile phone. All you need to do may be to buy a cardboard. Not much to say below, let’s take a look at the main text of this article:
This is an article about how to create configurable three.js objects based on three.js
Project address
Writing a three.js base class
This is a Three.js base class created which contains scenes, cameras, renderers, and 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!');
}
// 初始化 scene
Scene = new THREE.Scene();
// 初始化 camera
Camera = new THREE.PerspectiveCamera(fov, domContainer.clientWidth / domContainer.clientHeight, 1, far);
Camera.position.set( 200, 200, 200 );
Camera.lookAt(Scene.position);
Scene.add(Camera);
// 初始化 renderer
Renderer = new THREE.WebGLRenderer({ canvas: domContainer, antialias: true, alpha: true } );
Renderer.clear();
Renderer.setClearColor( 0xeeeeee, 1); // 更改渲染器颜色
Renderer.setSize(domContainer.clientWidth, domContainer.clientHeight);
Renderer.shadowMap.Enabled = true;
Renderer.setPixelRatio(domContainer.devicePixelRatio);
initVR();
}
function initVR() {
// 初始化控制器
Controls = new OrbitControls(Camera, Renderer.domElement);;
Controls.addEventListener('change', render);
Controls.enableZoom = true;
}
function render() {
Renderer.render(Scene, Camera);
}
function renderStart(callback) {
loopID = 0; // 记录循环几次，后面有与清除场景中的物体
if (loopID === -1) return;
let animate = function(){
loopID = requestAnimationFrame(animate);
callback();
Controls.update();
render();
}
animate();
}
// 暂停动画渲染
function renderStop() {
if (loopID !== -1) {
window.cancelAnimationFrame(loopID);
loopID = -1;
}
}
// 回收当前场景
function clearScene() {
for(let i = Scene.children.length - 1; i >= 0; i-- ) {
Scene.remove(Scene.children[i]);
}
}
// 清理页面
function cleanPage() {
renderStop();
clearScene();
}
export {
Scene,
Camera,
Renderer,
Controls,
createScene,
initVR,
renderStart,
renderStop,
clearScene,
cleanPage
}Create a VRpage base class
This is a VRpage base class. All those who need to create Three projects need to 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) {
// 创建场景
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, and then we rewrite the start method and update method. In the start method, we A cube is added to the scene. The update method is a deformation animation we give to the cube. It will be combined with the renderStart method in VRcore.js to perform animation effects.
// 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() { // 启动渲染之前，创建场景3d模型
let geometry = new THREE.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(0xffffff);
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( 0xeeeeee ); // 更改场景背景色
VRcore.Scene.add(this.box);
}
update() {
this.box.rotation.y += 0.01;
}
}Here I am using 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 (
<p className="three-demo">
<canvas id="Oho" ref="camera"></canvas>
</p>
);
}
}
export default Oho;Related recommendations:
Three.js implements 3D model display
Example explanation of three.js loading obj model
Examples to explain Three.js loading external models
The above is the detailed content of Sharing of sample code for a project class written in three.js. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
