uniapp小程序和h5如何使用three.js詳解

更新時(shí)間：2022年12月12日 10:51:23 作者：山與路

Three.js是通過對WebGL接口的封裝與簡化而形成的一個(gè)易用的圖形庫,下面這篇文章主要給大家介紹了關(guān)于uniapp小程序和h5如何使用three.js的相關(guān)資料,需要的朋友可以參考下

前言

個(gè)人認(rèn)為uniapp同時(shí)開發(fā)小程序和h5多多少少在某些地方存在不兼容問題,這也比較苦惱,特別是在使用某些ui庫的時(shí)候更加讓人頭大,要邊看邊對比,有時(shí)候h5那邊樣式或者什么的都o(jì)k,但是小程序那邊就直接拉胯,著實(shí)有點(diǎn)難受,好了廢話不多說了

h5

threejs本身好像就是開發(fā)web的一個(gè)庫,所以我們先從簡單入手,h5對threejs的兼容性要比小程序要好很多,而且方便很多

首先我們需要去官網(wǎng)下載相關(guān)的threejs的相關(guān)庫

threejs.org/build/three…

three.js/examples at…

在寫之前我們需要先導(dǎo)入必要的包

const  THREE=require('@/static/js/three.js');
import {
OrbitControls
} from '@/static/js/lib/controls/OrbitCon

在使用時(shí)可能會(huì)出現(xiàn)以下情況

我們直接找到OrbitControls.js文件導(dǎo)入three.js即可,可能還有更好的方法

小程序

小程序其實(shí)對threejs兼容性不是很好,我也不知道到底哪個(gè)庫能完全兼容threejs,不過個(gè)人目前使用three-platformize比較好的

安裝依賴

這里直接安裝小程序版的threejs----->three-platformize

yarn add three-platformize

這里為什么要直接安裝three-platformize而不安裝threejs,因?yàn)?strong>three-platformize要依賴threejs,所以three-platformize會(huì)自帶threejs相關(guān)的包

繪制立方體

var scene = new THREE.Scene();
		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 10);
scene.add(camera);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const materials = new THREE.MeshBasicMaterial();
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
let t = document.getElementById('content');
t.appendChild(renderer.domElement);
const controls = new THREE.OrbitControls(camera, renderer.domElement)
function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
}
animate();

這樣即可實(shí)現(xiàn)立方體,基本上和其他threejs使用一致,所以這里也不多說什么了

繪制一個(gè)可以旋轉(zhuǎn)的立方體

在寫之前我們需要先導(dǎo)入必要的包

import * as THREE from 'three-platformize';
//軌道控制器
import { OrbitControls } from 'three-platformize/examples/jsm/controls/OrbitControls'

接下來我們需要在html寫一個(gè)canvas,這個(gè)是必須要寫的,因?yàn)樾〕绦蚝孟裰恢С钟?strong>canvas的基礎(chǔ)下對canvas進(jìn)行繪制

接下來獲取canvas

我們要先獲取到canvas,獲取到當(dāng)前節(jié)點(diǎn),如果節(jié)點(diǎn)都獲取不到則代碼或許你得仔細(xì)看看,是不是單詞拼寫錯(cuò)誤或者其他原因

uni.createSelectorQuery()
.in(this)
.select('#webgl')
.fields({ node: true })
.exec(res => {
        console.log(res[0].node);
});

獲取到節(jié)點(diǎn)后,則需要注冊WechatPlatform如果不注冊則在后續(xù)的WebGLRenderer將導(dǎo)致無法渲染

const canvas = res[0].node;
const platform = new WechatPlatform(canvas); // webgl canvas
platform.enableDeviceOrientation('game'); // 開啟DeviceOrientation
THREE.PLATFORM.set(platform);
this.platform = platform;

three繪制立方體的代碼(這里就不介紹了,基本上和上面的h5代碼類似)

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, canvas.width / canvas.height, 0.1, 1000);
camera.position.set(0, 0, 10);
scene.add(camera);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const materials = new THREE.MeshBasicMaterial();
const cube = new THREE.Mesh(geometry, materials);
scene.add(cube);
const light = new THREE.AmbientLight(0xffffff);
scene.add(light);
//注意,這里必須要添加一個(gè){ canvas: canvas },不然會(huì)報(bào)createElementNS錯(cuò)誤
const renderer = new THREE.WebGLRenderer({ canvas: canvas });
renderer.setSize(canvas.width, canvas.height);
const controls = new OrbitControls(camera, renderer.domElement);
function animate() {
    //這里不再是requestAnimationFrame而是canvas.requestAnimationFrame
    canvas.requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();