小程序使用threejs第一篇——安装

更新时间:2023-07-09 00:06:17 阅读: 评论:0

⼩程序使⽤threejs第⼀篇——安装
Three.js ⼩程序 WebGL 的适配版本(threejs-miniprogram)已经发布很久了,我也好奇了很久,终于有时间去学习研究⼀下,不对的地⽅欢迎指正。
(⼀)构建⽅法(2种)
第⼀种:官⽅提供的安装⽅法是通过npm安装构建,如下:
1、通过 npm 安装
马来语
npm install --save threejs-miniprogram
安装完成之后在微信开发者⼯具中点击构建 npm。
2、导⼊⼩程序适配版本的 Three.js
import{createScopedThreejs}from'threejs-miniprogram'
Page({
onReady(){
.lect('#webgl')
.node()
.exec((res)=>{
const canvas = res[0].node
// 创建⼀个与 canvas 绑定的 three.js
const THREE=createScopedThreejs(canvas)
// 传递并使⽤ THREE 变量dan
})
}
})
<canvas
type="webgl"
id="webgl"
2015mbc歌谣大祭典
></canvas>
第⼆种:本⼈⼀向喜欢复制粘贴,可将threejs-miniprogram直接复制进项⽬中指定位置,如下:
再依照上述步骤2导⼊,这时候就构建成功了,是不是很简单。
(⼆)测试⽰例
构建成功后测试效果:
1、导⼊测试实例example.js
const{ renderExample1 }=require('../threejsCas/example1')
2、调⽤renderExample1中⽅法
renderExample1(canvas,THREE)
example1的代码如下:
export function renderExample1(canvas,THREE){
var camera, scene, renderer;
var cube;
init();怎样化眼部妆
animate();
function init(){
camera =new THREE.PerspectiveCamera(100, canvas.width / canvas.height,1,1000);
bogouscene =new THREE.Scene();
scene.background =new THREE.Color(0xf0f0f0);
renderer =new THREE.WebGLRenderer();
renderer.SystemInfoSync().pixelRatio);
renderer.tSize(canvas.width, canvas.height);
var geometry =new THREE.BoxGeometry(10,10,10);
bitch意思var material =new THREE.MeshBasicMaterial({ color:0xed3ed3});
天之痕钢琴曲cube =new THREE.Mesh(geometry, material);
scene.add(cube);
water clot
camera.position.z =20;
}
function animate(){
}
libera
}
接下来就可以看到⼀个粉红⾊正⽅体在旋转了,如图:
广州龙洞(三)测试⽰例
threejs效果体验
下⼀篇我们将花⼀点点时间了解⼀下example1.js中究竟发⽣了什么,以便于初学者有个概念了解,再进⾏后续学习研究。

本文发布于:2023-07-09 00:06:17,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/90/171486.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:构建   了解   微信   开发者   时间   研究
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图