配置threejs-miniprogram环境
搭建node环境
初始化node工程
npm init
导入threejs-miniprogram
npm i threejs-miniprogram
注意：安装threejs-miniprogram 后一定要进行 构建npm 否则引用不生效。由于开发工具和版本的关系可能路径有区别已知路径：工具--构建npm；详情-本地设置--启用npm；
threejs-miniprogram 使用
// pages/ar/ar.js
import getBehavior from './behavior'
import yuvBehavior from './yuvBehavior'
const {renderExample1} =require('./example1')
const {showAR} =require('./threeJSDemos/threeJS_1')
import {createScopedThreejs} from 'threejs-miniprogram'
Page({
behaviors: [getBehavior(), yuvBehavior],
/**
* 页面的初始数据
*/
data: {
theme: 'light',
camera:null,
scene:null,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
wx.createSelectorQuery()
.select('#webgl')
.node()
.exec(res=>{
const canvas=res[0].node;
const THREE=createScopedThreejs(canvas)
// renderExample1(canvas,THREE);
showAR(canvas,THREE);
})
;
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
threeJS_1如下：
export function showAR(canvas, THREE) {
var camera, scene, renderer;
var cube;
var sphereMesh;
init();
animate();
function init() {
//创建相机对象
camera = new THREE.PerspectiveCamera(100, canvas.width / canvas.height, 1, 1000);
/**
* 创建场景对象Scene
*/
scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
/**
* 创建渲染器对象
*/
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio);
renderer.setSize(canvas.width, canvas.height);
/**
* 创建网格模型
*/
var geometry = new THREE.BoxGeometry(10, 10, 10);
var material = new THREE.MeshBasicMaterial({ color: 0x0000ff });//材质对象Material
cube = new THREE.Mesh(geometry, material);//网格模型对象Mesh
scene.add(cube);
//创建一个球体几何对象
var sphereGeometry = new THREE.SphereGeometry(5, 5, 5);
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });//材质对象Material
sphereMesh=new THREE.Mesh(sphereGeometry,sphereMaterial);
sphereMesh.position.set(10,10,0);
scene.add(sphereMesh);
/**
* 光源设置
*/
//点光源
var point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300); //点光源位置
scene.add(point); //点光源添加到场景中
//环境光
var ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
camera.position.z = 20;
}
function animate() {
cube.rotation.x += 0.02;
sphereMesh.rotation.x += 0.01;
cube.rotation.y += 0.01;
canvas.requestAnimationFrame(animate);
renderer.render(scene, camera);
}
}
布局如下：
<!--pages/ar/ar.wxml-->
<view>
<canvas type="webgl" id="webgl" style="width: 100%; height: 450px" bindtouchend="onTouchEnd">
</canvas>
</view>
补充一些配置
{
"usingComponents": {},
"disableScroll": true,
"navigationBarTitleText": "AR基础"
}
基本到这了。以后的AR专题会补充一些AR知识
好用的Api工具推荐
历时一年半多开发终于smartApi-v1.0.0版本在2023-09-15晚十点正式上线 smartApi是一款对标国外的postman的api调试开发工具，由于开发人力就作者一个所以人力有限，因此v1.0.0版本功能进行精简，大功能项有：
- api参数填写
- api请求响应数据展示
- PDF形式的分享文档
- Mock本地化解决方案
- api列表数据本地化处理
- 再加上UI方面的打磨
本地运行，性能优越，高效，快捷
下面是一段smartApi使用介绍：
