zoukankan      html  css  js  c++  java
  • 微信小游戏开发之四:使用three.js引擎

    一、前言

    微信小游戏中最魔性的‘跳一跳’就是基于three.js 引擎开发的

    源码放到github上了:GitHub地址   请自行下载。

    二、下载

    three.min.js 打开页面,复制代码到本地

    三、引用

    使用如下方式在小游戏中引用three 

    1. let THREE = require('three.min.js的路径')  

    四、开始

    创建3dgame.js文件

    需要注意的是,在微信小游戏中并没有‘ImageBitmap’这个全局对象,所以在加载纹理贴图时会报错,此时需要修改源码

      

    let THREE = require('./three/three')  
      
    export default class Game3d {  
        constructor() {  
            // 场景  
            this.scene = new THREE.Scene();  
            // 透视摄像头  
            this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
            // webGL渲染器  
            // 同时指定canvas为小游戏暴露出来的canvas  
            this.renderer = new THREE.WebGLRenderer({  
                canvas: canvas  
            });  
            this.start()  
        }  
        start() {  
            this.renderer.setSize(window.innerWidth, window.innerHeight);  
            var geometry = new THREE.CubeGeometry(1, 1, 1);  
            // 加载纹理贴图  
            var texture = new THREE.TextureLoader().load("images/metal.jpg");  
            var material = new THREE.MeshBasicMaterial({ map: texture });  
            this.cube = new THREE.Mesh(geometry, material);  
            this.scene.add(this.cube);  
            // 设置camera的高度,若是低于当前场景的高度则屁也看不到  
            this.camera.position.z = 2.5;  
            this.cube.castShadow = true  
            console.log(this.cube)  
            window.requestAnimationFrame(this.loop.bind(this), canvas);  
        }  
        update() {  
            this.cube.rotation.x += 0.02;  
            this.cube.rotation.y += 0.04;  
            this.cube.rotation.z += 0.06;  
        }  
        loop() {  
            this.update()  
            this.renderer.render(this.scene, this.camera);  
            window.requestAnimationFrame(this.loop.bind(this), canvas);  
        }  
    }  
    

      

    在game.js中调用

    import './js/libs/weapp-adapter'  
    import './js/libs/symbol'  
      
    import Game3d from './3dgame'  
      
    new Game3d()

    五、效果

    您可能感兴趣的

    原文链接:https://blog.csdn.net/Register_man/article/details/78950187

  • 相关阅读:
    软工实践寒假作业(1/2)
    java判断是否为数字
    前端测试工具Cypress
    StringBuffer&StringBuilder
    IO流
    kafka简介
    Python学习笔记10--unittest参数化
    python学习笔记9--日志模块logging
    Python学习笔记9-多线程和多进程
    python学习笔记9-单元测试unittest
  • 原文地址:https://www.cnblogs.com/curationFE/p/wegaem_threejs.html
Copyright © 2011-2022 走看看