위 챗 애플 릿 Three. js 로 3d 모델 불 러 오기

위 챗 애플 릿 은 외부 에서 3d 모델 을 불 러 옵 니 다.
1.3d 모델 의 몇 가지 형식 은?2. 3d 모델 을 어떻게 불 러 옵 니까?3. 정리 (자신 이 쓴 전체 항목 github 주 소 를 붙 였 습 니 다)
1. 모델 의 형식
애플 릿 은 외부 에서 3d 모델 을 불 러 오 는 몇 가지 형식 을 지원 합 니 다. a. obj 형식 b. gltf 형식 c. fbx 형식 은 이 몇 가 지 를 열거 합 니 다.
2. 3d 모델 불 러 오기
gltf 형식의 모델 gltf 3d 모드 형식 은 두 가지 가 있 습 니 다. gltf 는 json 기반 텍스트 파일 입 니 다. 예 를 들 어 텍 스 처 스티커 와 바 이 너 리 격자 데이터 등 입 니 다.glb 는 바 이 너 리 버 전 으로 보통 작고 독립 적 이지 만 편집 이 쉽 지 않 습 니 다.
(1) 우선 파일 다운로드 three. js github 주소
(2) 파일 가 져 오기 위해 서 는 three. js 와 gltf - loader. js (로드 모델) 를 가 져 와 다운로드 한 압축 파일 에서 디 렉 터 리 를 복사 해 야 합 니 다 threejs - miniprogram - master \ example \ miniprogramnpm \ threejs - miniprogram 의 [index. js] 파일 및 threejs - miniprogram - master \ example \ loaders 의 [gltf - loader. js] 파일
(3) 코드 쓰기 ① index. wxml

<view style="height: 50px"></view>
<canvas type="webgl" id="webgl" style="width: 100%; height: 450px;"></canvas>
<canvas type="webgl" id="webgl" style="width: 100%; height: 300px;"></canvas>

② inde. js 중점: 두 개의 폴 더 를 가 져 옵 니 다. 그 안에 각각 파일 three. js 와 gltf - loader. js (외부 모델 가 져 오기) 가 있 습 니 다. 장면 에 있 는 카메라, 빛, 렌 더러 를 설정 해 야 합 니 다.

import { createScopedThreejs } from 'threejs-miniprogram';
import { registerGLTFLoader } from '../loaders/gltf-loader';

const app = getApp();
var camera, scene, renderer, model;
var requestAnimationFrame; //       

Page({
  data: {},
  onLoad: function () {
    let that = this;

    var query = wx.createSelectorQuery();
    query.select('#webgl').node().exec((res) => {

      var canvas = res[0].node;
      //       
      var gl = canvas.getContext('webgl', {
        alpha: true
      });

      if (canvas != undefined) {
        //  canvas.width  canvas.style     ，        
        canvas.width = canvas._width;
        canvas.height = canvas._height;
        requestAnimationFrame = canvas.requestAnimationFrame;
        that.init(canvas);
      }
    });
  },

  init: function(canvas){
    let that = this;
    const THREE = createScopedThreejs(canvas)
    registerGLTFLoader(THREE)
    //    
    camera = new THREE.PerspectiveCamera(45, canvas.width / canvas.height, 0.25, 100);
    camera.position.set(- 5, 3, 10);
    camera.lookAt(new THREE.Vector3(0, 2, 0));
    scene = new THREE.Scene();
    //    
    var light = new THREE.HemisphereLight(0xffffff, 0x444444);
    light.position.set(0, 20, 0);
    scene.add(light);
    light = new THREE.DirectionalLight(0xffffff);
    light.position.set(0, 20, 10);
    scene.add(light);
    //      
    var loader = new THREE.GLTFLoader();
    loader.load('https://threejs.org/examples/models/gltf/RobotExpressive/RobotExpressive.glb', function (gltf) {
      model = gltf.scene;
      scene.add(model);
    }, undefined, function (e) {
      console.error(e);
    });
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(canvas.width, canvas.height);
    //    
    that.animate();
  },

  animate:function(){
    let that = this;
    requestAnimationFrame(that.animate);
    renderer.render(scene, camera);
  }
})

3. 총화
전체 실현 과정 에서 three. js 와 gltf - loader. js 를 다운로드 하고 두 파일 을 자신의 프로젝트 에 넣 고 코드 에 장면 파 라 메 터 를 설정 하여 모델 을 가 져 오 면 됩 니 다.전체 항목 코드: github 주소 csdn 주소 (github 에 다운로드 하 는 것 을 추천 합 니 다. csdn 에 업로드 할 때 포 인 트 를 설정 해 야 다운로드 할 수 있 습 니 다 ^ ^) 소 백 하나 입 니 다. 질문 을 지적 해 주 십시오 ~ ~