【微信小程序】【AR】threejs-miniprogram 安装(76/100）

原创已于 2025-08-24 20:20:10 修改 · 4.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #微信小程序switch #微信小程序怎么打断点调试 #微信小程序单选框 #微信开发者工具mac

于 2022-08-01 19:00:00 首次发布

微信小程序专栏收录该内容

29 篇文章

订阅专栏

本文介绍了如何配置threejs-miniprogram环境，包括搭建node环境、初始化工程及构建npm的注意事项。还提到了threejs-miniprogram的使用，并预告了未来的AR专题。同时，推荐了自研API调试开发工具SmartApi，详细说明了其开发背景、功能特性以及下载地址。

在这里插入图片描述

配置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知识

产品推荐

官网地址SmartApi

http://www.smartapi.site/

是的，兄弟们，我还是建立了自己的官网！需要下载的大佬直接去官网下载就可以了蛤，顺便看看官网介绍
看下面的简单的
在这里插入图片描述