刚接触小游戏,分享一个VR看图小程序,用小游戏实现的,附上源码,可以查看效果。
视频效果
- 使用了three.js
import * as THREE from './libs/three.min.js'
const screenWidth = window.innerWidth
const screenHeight = window.innerHeight
var startX, endX, startY, endY;
var that;
var isVrMove = false;
/* 物体 */
var scene;
const R_BALL = 50;
var vrSphere;
export default class main {
constructor() {
that = this;
setTimeout(function(){
that.drawBall('https://mamba-blog-images.oss-cn-shanghai.aliyuncs.com/2020-06-10/1c3352744d88b048b14d02648a064fbd.jpg')
},1000)
scene = new THREE.Scene();
this.camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
this.camera.position.set(0,0,0)
scene.add(this.camera);
this.renderer = new THREE.WebGLRenderer({
canvas: canvas,
antialias: true
});
this.renderer.shadowMapEnabled = true;
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.start()
wx.onTouchStart(function(e){
isVrMove = false;
if(e.touches.length > 0) {
console.log(vrSphere.rotation.y + ":" + vrSphere.rotation.x);
var touch = e.changedTouches[0];
startX = touch.clientX;
startY = touch.clientY;
isVrMove = true
}
})
wx.onTouchMove(function (e) {
if (e.touches.length > 0) {
var touch = e.changedTouches[0];
endX = touch.clientX;
endY = touch.clientY;
var x = endX - startX;
var y = endY - startY;
if (isVrMove){
var moveObject = vrSphere
moveObject.rotation.y = moveObject.rotation.y - x * 0.003;
moveObject.rotation.x = moveObject.rotation.x - y * 0.003;
// 判断是否超出范围
if (moveObject.rotation.x < -1) {
moveObject.rotation.x = -1;
} else if (moveObject.rotation.x > 1) {
moveObject.rotation.x = 1;
}
if (moveObject.rotation.y > Math.PI * 2) {
moveObject.rotation.y -= Math.PI * 2;
} else if (moveObject.rotation.y < 0){
moveObject.rotation.y += Math.PI * 2;
}
}
startX = endX;
startY = endY;
}
})
window.requestAnimationFrame(this.loop.bind(this), canvas);
}
start() {
}
drawBall(url){
var segemnt = 32, rings = 32;
var geometry = new THREE.SphereGeometry(R_BALL, segemnt, rings);
// 加载纹理贴图
var texture = new THREE.TextureLoader().load(url);
var material = new THREE.MeshBasicMaterial({ map: texture, side: THREE.BackSide });
vrSphere = new THREE.Mesh(geometry, material);
vrSphere.name = "vrball"
vrSphere.position.set(0,0,0)
scene.add(vrSphere);
}
update() {
}
loop() {
this.update()
this.renderer.render(scene, this.camera);
window.requestAnimationFrame(this.loop.bind(this), canvas);
}
}
你好,我在你的githup上没有找到这个项目呀
怎么实现的图片素材怎么弄
开源必须支持