小程序
小游戏
企业微信
微信支付
扫描小程序码分享
如何在ar环境下使用OrbitControls?
1 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
需要在小程序的项目中安装 OrbitControls 库。可以使用 npm 或者 yarn 安装:
npm install --save three orbit-controls 或者使用 yarn
在小程序中使用 WebGL 组件创建一个 canvas 元素,并在组件的 onReady 回调函数中初始化 OrbitControls。
onReady
<web-gl canvas-id="webgl" bind:webgl-ready="webglReady" style="height: 100%; width: 100%;" /> const THREE = require('three') const OrbitControls = require('three-orbit-controls')(THREE) Page({ webglReady(e) { // 初始化摄像机、渲染器和场景 const width = e.detail.width const height = e.detail.height const context = e.detail.context const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000) const renderer = new THREE.WebGLRenderer({ canvas: context.canvas, context: context }) const scene = new THREE.Scene() // 初始化 OrbitControls const controls = new OrbitControls(camera, renderer.domElement) // 渲染场景 function render() { controls.update() renderer.render(scene, camera) requestAnimationFrame(render) } render() }, })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
需要在小程序的项目中安装 OrbitControls 库。可以使用 npm 或者 yarn 安装:
npm install --save three orbit-controls 或者使用 yarn
在小程序中使用 WebGL 组件创建一个 canvas 元素,并在组件的
onReady
回调函数中初始化 OrbitControls。<web-gl canvas-id="webgl" bind:webgl-ready="webglReady" style="height: 100%; width: 100%;" /> const THREE = require('three') const OrbitControls = require('three-orbit-controls')(THREE) Page({ webglReady(e) { // 初始化摄像机、渲染器和场景 const width = e.detail.width const height = e.detail.height const context = e.detail.context const camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000) const renderer = new THREE.WebGLRenderer({ canvas: context.canvas, context: context }) const scene = new THREE.Scene() // 初始化 OrbitControls const controls = new OrbitControls(camera, renderer.domElement) // 渲染场景 function render() { controls.update() renderer.render(scene, camera) requestAnimationFrame(render) } render() }, })