Créer un projet en utilisant 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, qui a une certaine valeur d'apprentissage de référence pour l'étude ou le travail de chacun

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 à des applications Web, tout en permettant aux HMD de se connecter à des applications Web. être capable de recevoir des informations de localisation et de mouvement 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 pas 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

Écrivez une classe de base three.js

Il s'agit d'une classe de base Three.js créée qui contient des scènes et des caméras, un moteur de rendu, un 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, tout cela si vous avez besoin de créer un projet Three , vous devez 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

comme suit. file est une classe qui hérite de la classe VRpage, puis nous réécrivons la méthode start et la méthode update, dans la méthode start, nous ajoutons un cube à la scène, et la méthode update est une animation de déformation que nous donnons au cube, qui. sera combiné La méthode renderStart dans VRcore.js est utilisée 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;
 }
 }

Ici, j'utilise le framework 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;

Ce qui précède est ce que j'ai compilé pour tout le monde, je j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment utiliser JS pour implémenter la balle en suivant le mouvement de la souris

À propos des événements personnalisés dans les composants Vue (tutoriel détaillé)

Fermetures PHP et fonctions anonymes (tutoriel détaillé)

Comment utiliser les sélecteurs de liaison à trois niveaux dans les mini-programmes WeChat

Comment utiliser jquery pour obtenir des effets d'accordéon

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!