Partage d'un exemple de code pour une classe de projet écrite en three.js

Cet article vous présente principalement les informations pertinentes sur une classe de projet écrite sur la base de three.js. L'article la présente en détail à travers un exemple de code. Il a une certaine valeur d'apprentissage de référence pour les études ou le travail de tous les amis qui en ont besoin. peut suivre Apprenons avec l'éditeur.

WebVR

Avant de commencer, présentons WebVR WebVR est une API Javascript expérimentale qui permet aux HMD (casques montés sur la tête) de se connecter aux applications Web tout en pouvant également accepter. informations de localisation et de mouvement provenant de ces appareils. Cela permet de développer des applications VR en utilisant Javascript (il existe bien sûr déjà de nombreuses API d'interface qui utilisent Javascript comme langage de développement, mais cela n'affecte en rien notre enthousiasme pour WebVR). Afin que nous puissions en avoir un aperçu et en faire l'expérience immédiatement, Chrome sur les appareils mobiles prend déjà en charge WebVR et permet d'utiliser le téléphone comme un simple HMD. Le téléphone mobile peut diviser l'écran en vision des yeux gauche et droit et utiliser l'accéléromètre, le gyroscope et d'autres capteurs du téléphone mobile. Tout ce que vous avez à faire est peut-être d'acheter un carton. Pas grand chose à dire ci-dessous, jetons un coup d'œil au texte principal de cet article :

Ceci est un article sur la façon de créer des objets three.js configurables basés sur three.js

Adresse du projet

Écrire une classe de base three.js

Il s'agit d'une classe de base Three.js créée qui contient la scène, la caméra, le moteur de rendu, le contrôleur et quelques méthodes

 // 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
 }

Créer une classe de base VRpage

Il s'agit d'une classe de base VRpage Tous ceux qui ont besoin de créer des projets Three doivent hériter de cette classe puis générer un projet Three

 // 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() {}
 }

Générer un projet Three.js

Le fichier suivant est une classe qui hérite de la classe VRpage, puis nous remplaçons la méthode start et la méthode update, start Dans la méthode, nous avons ajouté un cube à la scène. La méthode de mise à jour est une animation de déformation que nous donnons au cube. Elle sera combinée avec la méthode renderStart dans VRcore.js pour effectuer des effets d'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() { // 启动渲染之前，创建场景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;
 }
 }

Ce que j'utilise ici C'est un framework de réagir

 // 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;

Recommandations associées :

Three.js implémente l'affichage du modèle 3D

Exemples pour expliquer le chargement de three.js modèle obj

Exemple pour expliquer le chargement du modèle externe de Three.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!