用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

2

主題

671

帖子

2175

積分

布道者

Rank: 6Rank: 6

積分
2175
2020-6-11 14:00:28 mamba96 布道者 樓主 41547
游客,如果您要查看本帖隱藏內容請回復


剛接觸小游戲,分享一個VR看圖小程序,用小游戲實現的,附上源碼,可以查看效果。
https://bmob-cdn-28016.bmobcloud.com/2020/06/10/8c837a9640b09c4780f0f8e3cf6d6853.mp4


[JavaScript] 純文本查看 復制代碼
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);
    }
}




分享至 : QQ空間
0 人收藏
加油

非常不錯的源碼
Hnnice 發表于 2020-6-22 21:34
非常不錯的源碼

666
感謝分享
發新帖
您需要登錄后才可以回帖 登錄 | 立即注冊
梦幻单人赚钱方法 福建体彩31选7专家号 黑龙江快乐十分62期开的什么号 点牛股配资 分分pk10定位胆计划 排列五开奖号码结果 郑州银行股票今日 河南快三玩法说明 四川体彩金7乐app 今日股票行情查询网 广东11选五5彩吧助手