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

目录

• 前言
• h5
• 在写之前我们需要先导入必要的包
• 小程序
• 安装依赖
• 绘制立方体
• 绘制一个可以旋转的立方体
• 接下来获取canvas
• three绘制立方体的代码(这里就不介绍了,基本上和上面的h5代码类似)
• 让立方体可以自动旋转
• 效果
• 总结

前言

个人认为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

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

效果

总结

到此这篇关于uniapp小程序和h5使用three.js的文章就介绍到这了,更多相关uniapp小程序和h5使用three.js内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！