three.js를 사용하여 프로젝트 만들기

이 글에서는 three.js를 기반으로 작성된 프로젝트 클래스에 대한 관련 정보를 주로 소개하고 있으며, 모두의 공부나 업무에 참고할 만한 학습 가치가 있는 샘플 코드를 통해 아주 자세하게 소개하고 있습니다.

WebVR

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

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

프로젝트 주소

베이스 작성 three.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 기본 클래스 만들기

이것은 기본 클래스입니다. 생성해야 하는 세 가지 프로젝트 모두 이 클래스를 상속한 다음 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() {}
 }

Three.js 프로젝트 생성

다음 파일은 VRpage 클래스 클래스를 상속한 파일입니다. 그런 다음 시작 메소드와 업데이트 메소드를 다시 작성했습니다. 업데이트 메소드는 VRcore의 renderStart 메소드와 함께 애니메이션화됩니다. Effect

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

위는 모든 사람을 위해 편집한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

JS를 사용하여 마우스의 움직임에 따라 공을 구현하는 방법

Vue 구성 요소의 사용자 정의 이벤트 정보(자세한 튜토리얼)

PHP 클로저 및 익명 함수(자세한 튜토리얼)

WeChat 미니 프로그램에서 3단계 연결 선택기를 사용하는 방법

jquery를 사용하여 아코디언 효과를 얻는 방법

위 내용은 three.js를 사용하여 프로젝트 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!