Dieser Artikel stellt Ihnen hauptsächlich die relevanten Informationen zu einer auf Three.js geschriebenen Projektklasse vor. Der Artikel stellt ihn ausführlich anhand von Beispielcode vor. Er hat einen gewissen Referenzlernwert für alle, die ihn beim Lernen oder Arbeiten benötigen können Sie Let’s learning gemeinsam mit dem Herausgeber verfolgen.
WebVR
Bevor wir beginnen, stellen wir WebVR vor. WebVR ist eine experimentelle Javascript-API, die es HMDs (Head-Mounted Displays) ermöglicht, eine Verbindung zu Web-Apps herzustellen und gleichzeitig akzeptieren zu können Standort- und Bewegungsinformationen von diesen Geräten. Dadurch ist es möglich, VR-Anwendungen mithilfe von Javascript zu entwickeln (natürlich gibt es bereits viele Schnittstellen-APIs, die Javascript als Entwicklungssprache verwenden, aber das tut unserer Begeisterung für WebVR keinen Abbruch). Damit wir es sofort in der Vorschau sehen und erleben können, unterstützt Chrome auf Mobilgeräten bereits WebVR und ermöglicht die Nutzung des Telefons als einfaches HMD. Das Mobiltelefon kann den Bildschirm in Sicht für das linke und rechte Auge unterteilen und den Beschleunigungsmesser, das Gyroskop und andere Sensoren im Mobiltelefon verwenden. Möglicherweise müssen Sie lediglich einen Karton kaufen. Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf den Haupttext dieses Artikels:
Dies ist ein Artikel darüber, wie man konfigurierbare Three.js-Objekte basierend auf Three.js erstellt
Projektadresse
Schreiben Sie eine Three.js-Basisklasse
Dies ist eine erstellte Three.js-Basisklasse, die Szene, Kamera, Renderer, Controller und einige Methoden enthält
// 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
} Erstellen Sie eine VRpage-Basisklasse
Dies ist eine VRpage-Basisklasse. Alle, die drei Projekte erstellen müssen, müssen diese Klasse erben und dann ein drei Projekt generieren
// 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() {}
}Generieren Sie ein Three.js-Projekt
Die folgende Datei ist eine Klasse, die die VRpage-Klasse erbt, und dann überschreiben wir die Startmethode und die Aktualisierungsmethode, start In der Methode haben wir a hinzugefügt Cube zur Szene. Die Update-Methode ist eine Verformungsanimation, die wir dem Cube geben. Sie wird mit der renderStart-Methode in VRcore.js kombiniert, um Animationseffekte auszuführen.
// 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;
}
}Was ich hier verwende Framework of React
// 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;Verwandte Empfehlungen:
Three.js implementiert die 3D-Modellanzeige
Beispiele zur Erläuterung des Ladens von Three.js obj-Modell
Beispiel zur Erläuterung des Ladens eines externen Modells durch Three.js
Das obige ist der detaillierte Inhalt vonTeilen von Beispielcode für eine in three.js geschriebene Projektklasse. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
