大大 请问 我运行的时候只出现绘制的canvas颜色 并没有三角形旋转 请问是为什么?

来源:4-4 小游戏平台(旋转三角实战)

粉饰太平

2019-06-19

以下是我的代码 ps控制台没有报错信息

import ‘./libs/weapp-adapter.js’;图片描述
import * as THREE from ‘./libs/three.js’;

var width = 400;
var height = 400;

var renderer = new THREE.WebGLRenderer({
canvas:canvas
})
var scene =new THREE.Scene()
var camera = new THREE.OrthographicCamera(-width / 2,height/2,-height/2,-1000,1000)

renderer.setClearColor (new THREE.Color(0x000000,1.0))
renderer.setSize(400,400)

var triangleShape = new THREE.Shape()
triangleShape.moveTo(0,100)
triangleShape.lineTo(-100,-100)
triangleShape.lineTo(100,-100)
triangleShape.lineTo(0,100)

var geometry = new THREE.ShapeGeometry(triangleShape)
var material = new THREE.MeshBasicMaterial({
color:0Xff0000,
side:THREE.DoubleSide

})
var mesh = new THREE.Mesh(geometry,material)
mesh.position.x = 0;
mesh.position.y = 0;
mesh.position.z = 1
scene.add(mesh)

camera.position.x = 0;
camera.position.y = 0;
camera.position.z = 0;
camera.lookAt(new THREE.Vector3(0,0,1))

var currentAngle = 0
var lastTimestamp = Date.now()

var animate = function(){
var now = Date.now()
var duration = now - lastTimestamp
lastTimestamp = now
currentAngle = currentAngle+duration/1000 * Math.PI
}

var render = function(){
animate()
mesh.rotation.set(0,0,currentAngle)
renderer.render(scene,camera)
requestAnimationFrame(render)
}

render()

写回答

1回答

semaplex

2019-06-26

这个语句错了

var camera = new THREE.OrthographicCamera(-width / 2,height/2,-height/2,-1000,1000)

按照threejs的文档,应该是

var camera = new THREE.OrthographicCamera(width / - 2, width / 2, height / 2, height / - 2, 1, 1000)


0
0

three.js-打造微信小游戏跳一跳 快速掌握3D游戏开发

three.js+WebGL+微信小游戏API, 带你进入3D的游戏世界

793 学习 · 147 问题

查看课程