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

时间:2022-12-12 山与路人气:0

前言

个人认为uniapp同时开发小程序和h5多多少少在某些地方存在不兼容问题,这也比较苦恼,特别是在使用某些ui库的时候更加让人头大,要边看边对比,有时候h5那边样式或者什么的都ok,但是小程序那边就直接拉胯,着实有点难受,好了废话不多说了

h5

threejs本身好像就是开发web的一个库,所以我们先从简单入手,h5对threejs的兼容性要比小程序要好很多,而且方便很多

首先我们需要去官网下载相关的threejs的相关库

threejs.org/build/three…

three.js/examples at…

在写之前我们需要先导入必要的包

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

在使用时可能会出现以下情况

我们直接找到OrbitControls.js文件导入three.js即可,可能还有更好的方法

小程序

小程序其实对threejs兼容性不是很好,我也不知道到底哪个库能完全兼容threejs,不过个人目前使用three-platformize比较好的

安装依赖

这里直接安装小程序版的threejs----->three-platformize

yarn add three-platformize

这里为什么要直接安装three-platformize而不安装threejs,因为three-platformize要依赖threejs,所以three-platformize会自带threejs相关的包

绘制立方体

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();

这样即可实现立方体,基本上和其他threejs使用一致,所以这里也不多说什么了

绘制一个可以旋转的立方体

在写之前我们需要先导入必要的包

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

接下来我们需要在html写一个canvas,这个是必须要写的,因为小程序好像只支持有canvas的基础下对canvas进行绘制

接下来获取canvas

我们要先获取到canvas,获取到当前节点,如果节点都获取不到则代码或许你得仔细看看,是不是单词拼写错误或者其他原因

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

获取到节点后,则需要注册WechatPlatform如果不注册则在后续的WebGLRenderer将导致无法渲染

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);
//注意,这里必须要添加一个{ canvas: canvas },不然会报createElementNS错误
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();

让立方体可以自动旋转

小程序和h5是不一样的,不能旦旦加了OrbitControls就能实现自由动,这里需要添加3个方法

touchStart
touchMove
touchEnd

添加这三个方法才能使立方体开始任意旋转

效果

总结

加载全部内容