three.js 微信小游戏

时间：2022-12-24 23:05:49

最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识

把 three.js 弄到微信小游戏里，先随便跑一跑

最终效果：

three.js 微信小游戏

代码结构如下：

three.js 微信小游戏

(先忽略 audio 和 images, 这里先不用)

game.js 代码

import './js/libs/weapp-adapter'

import './js/libs/symbol'

import * as THREE from './js/engine/three.min'

let scene = new THREE.Scene()

let camera = new THREE.PerspectiveCamera(45, canvas.width/canvas.height, 1, 1000)

camera.position.z = 16

camera.lookAt(scene.position)

let renderer = new THREE.WebGLRenderer({ context: canvas.getContext('webgl') }) // { canvas: canvas }

renderer.setSize(canvas.width, canvas.height)

// renderer.setClearColor(new THREE.Color(0xAAAAAA))

let spotLight = new THREE.SpotLight(0xffffff)

spotLight.position.set(10, 10, 10)

scene.add(spotLight)

let geo = new THREE.BoxGeometry(4, 4, 4);

let material = new THREE.MeshPhongMaterial({ shininess: 40, color: 0xad0000, specular: 0x808080 });

let cube = new THREE.Mesh(geo, material);

scene.add(cube);

function loop()

{

  requestAnimationFrame(loop)

  cube.rotation.x += 0.1

  cube.rotation.y += 0.1

  // cube.rotation.z += 0.1

  renderer.render(scene, camera)

}

function start()

{

  let fps = 60

  wx.setPreferredFramesPerSecond(fps)

  requestAnimationFrame(loop)

}

start()

相关文章