집 > 기사 > 웹 프론트엔드 > three.js로 작성된 프로젝트 클래스의 샘플 코드 공유

three.js로 작성된 프로젝트 클래스의 샘플 코드 공유

小云云원래의: 2018-01-08 09:05:081728검색

이 글은 three.js를 기반으로 작성된 프로젝트 클래스에 대한 관련 정보를 주로 소개합니다. 이 글은 샘플 코드를 통해 이를 매우 자세하게 소개하며, 이를 필요로 하는 모든 사람의 학습 또는 학습 가치를 담고 있습니다. 아래에서 함께 배워봅시다.

WebVR

시작하기 전에 WebVR을 소개하겠습니다. WebVR은 HMD(헤드 마운트 디스플레이)가 웹 앱에 연결하는 동시에 이러한 장치에서 위치 및 동작 정보를 받을 수 있도록 하는 실험적인 Javascript API입니다. 이를 통해 Javascript를 사용하여 VR 애플리케이션을 개발할 수 있습니다(물론 Javascript를 개발 언어로 사용하는 인터페이스 API가 이미 많이 있지만 이것이 WebVR에 대한 우리의 기대에 영향을 미치지는 않습니다). 우리가 즉시 미리 보고 경험할 수 있도록 모바일 장치의 Chrome은 이미 WebVR을 지원하고 휴대폰을 간단한 HMD로 사용할 수 있도록 허용합니다. 휴대폰은 화면을 왼쪽 눈과 오른쪽 시력으로 나눌 수 있고 휴대폰에 있는 가속도계, 자이로스코프 및 기타 센서를 사용할 수 있습니다. 카드보드를 구입하면 됩니다. 아래에서 할 말은 별로 없지만 이 글의 본문을 살펴보겠습니다.

이 글은 three.js를 기반으로 구성 가능한 three.js 객체를 생성하는 방법에 대한 글입니다

프로젝트 주소

3.js 작성 기본 클래스

씬, 카메라, 렌더러, 컨트롤러 및 일부 메소드를 포함하는 Three.js 기본 클래스입니다.

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

VRpage 기본 클래스 만들기

VRpage 기본 클래스 클래스입니다. create 3개의 프로젝트는 이 클래스를 상속받아야 하고, 3개의 프로젝트를 생성해야 합니다.

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

Three.js 프로젝트 생성

다음 파일은 VRpage 클래스를 상속받은 클래스이며, 시작 메소드와 업데이트 메소드를 다시 작성합니다. start 메소드에서는 큐브를 장면에 추가합니다. 업데이트 메소드는 큐브에 제공하는 변형 애니메이션입니다. VRcore.js의 renderStart 메소드와 결합하여 애니메이션 효과를 수행합니다.

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

여기서 사용하는 것입니다.

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

three.js로 작성된 프로젝트 클래스의 샘플 코드 공유

관련 기사