| Date | Update |
|---|---|
| 2021-02-25 | New: Scan a QR code to update the url of the gltf model. Update: 1. add a directional light for the model viewer to make the model have shadows. 2. add the device pixel ratio for the panorama viewer to make the picture clear. |
| 2019-10-31 | Updated: Use a new Gltf loader modified by "wechat-miniprogram". Support .glb format without textures and .gltf format. |
| 2019-09-17 | New: A WeChat MiniProgram 3D that includes a Panorama Viewer and a 3D Viewer using the device orientation control. |
Three.js is a JavaScript 3D library.
There is a WeChat MiniProgram adapted version of Three.js.
Index Page
3D Viewer Page
When click the "Panorama" button, a panorama viewer will be showed.
portrait screen
landscape screen
When start a device motion, the device orientation control will rotate the screen.
When stop a device motion, use a hand to rotate the screen.
At first, we enable the "打开调试" button. It is used for loading a model.
When click the "Model Viewer" button, a 3D viewer will be showed.
We can rotate the screen by a device orientation control or using my hands.
Note: 3D Viewer on Android Wechat has no the camera background.
The Mini-program depends on a "threejs-miniprogram" npm package.
step 1: npm install
step 2: run "微信开发者工具--工具--构建npm", a folder "miniprogram_npm" will be updated.
The project has included a folder "miniprogram_npm" precompiled.
File: /package.json
"dependencies": {
"threejs-miniprogram": "0.0.2"
}You can search a keyword "2019.9.11 modified" in GLTFLoader.js. The search result is a code modified.
For example, added a export of function "GLTF_Loader". Use the function to set the "THREE" object into the "GLTFLoader.js" module.
File: /utils/GLTFLoader.js
// 2019.9.11 modified
// THREE.GLTFLoader = ( function () {
export function GLTF_Loader(THREE) {The project includes a gltf model that are depolyed on a website. The default value of parameter "modelUrl" is a website url that may be very slow on your network. You can replace the default url with a web site url.
Download models: https://github.com/sanyuered/sanyuered.github.io/tree/master/gltf
// set your site url of a gltf model
const modelUrl = 'https://sanyuered.github.io/gltf/robot.glb';
//const modelUrl = 'http://127.0.0.1/robot.glb';A part of the demo can not work on Android Wechat.
The functions disabled on Android are below.
file: /package_3d_viewer/utils/cameraBusiness.js
if (!isAndroid) {
// init Orthographic Camera
initBackroundScene();
} if (!isAndroid) {
// make the Orthographic Camera and the Perspective Camera work together.
renderer.autoClear = false;
} if (!isAndroid) {
// render for Orthographic Camera
if (cameraFrame) {
planeTexture.image = cameraFrame;
planeTexture.needsUpdate = true;
renderer.render(sceneRTT, cameraRTT);
}
}