Erstellen Sie ein Projekt mit three.js

Dieser Artikel führt Sie hauptsächlich in die relevanten Informationen zu einer auf Three.js geschriebenen Projektklasse ein. Der Artikel stellt sie detailliert anhand von Beispielcode vor, der einen gewissen Referenzlernwert für das Studium oder die Arbeit jedes Einzelnen hat

WebVR

Bevor wir beginnen, stellen wir WebVR vor, eine experimentelle Javascript-API, die es HMD (Head-Mounted Displays) ermöglicht, eine Verbindung zu Web-Apps herzustellen Standort- und Bewegungsinformationen von diesen Geräten empfangen zu können. 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 Szenen und Kameras, Renderer, Controller usw. enthält einige Methoden

 // 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, alles, was erstellt werden muss. Drei Projekte müssen erben Diese Klasse und dann ein Three-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() {}
 }

Ein Three.js-Projekt generieren

Die folgende Datei ist eine A-Klasse, die die erbt VRpage-Klasse, und dann überschreiben wir die Startmethode und die Update-Methode. Die Update-Methode ist eine Verformungsanimation, die wir dem Cube geben. Sie wird mit VRcore.js kombiniert Methode wird verwendet, 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;
 }
 }

Hier verwende ich das 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;

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Wie man mit JS den Ball implementiert, der der Bewegung der Maus folgt

Über benutzerdefinierte Ereignisse in Vue-Komponenten (ausführliches Tutorial)

PHP-Verschlüsse und anonyme Funktionen (ausführliches Tutorial)

So verwenden Sie dreistufige Verknüpfungsselektoren in WeChat-Miniprogrammen

Wie man mit jquery Akkordeoneffekte erzielt

Das obige ist der detaillierte Inhalt vonErstellen Sie ein Projekt mit three.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!