three.js iOS灯光限制?

时间:2018-08-17 00:00:47

标签: javascript ios three.js webgl

在iOS的three.js场景中可以包含多少个灯光是否有限制?以下代码可在Linux,Mac和Windows上运行...但是在iOS上则无法运行(已在Firefox焦点和野生动物园上测试)。如果我将光量从15降低到14可以正常工作,但是当我通过15时就无法在iOS上正常工作

let AMOUNT = 15
let scene = new THREE.Scene()
let camera = new THREE.PerspectiveCamera(40, innerWidth/innerHeight, 0.1, 1000)
camera.position.z = 4

let renderer = new THREE.WebGLRenderer()
renderer.setSize(innerWidth, innerHeight)
document.body.appendChild(renderer.domElement)

let tx = new THREE.TextureLoader()
    .load('https://s4.mzstatic.com/us/r1000/046/Purple/bd/8f/fd/mzl.emkswtfe.jpg')
let geometry = new THREE.BoxGeometry( 1, 1, 1 )
let material = new THREE.MeshPhongMaterial({map:tx})
let cat = new THREE.Mesh( geometry, material )
cat.position.z = -2
scene.add( cat )

// point lights

class Point {
    constructor(i){
        let g = new THREE.SphereBufferGeometry( 0.1, 4, 4 )
        let m = new THREE.MeshBasicMaterial({color:'#ff0'})
        this.mesh = new THREE.Mesh( g, m )
        this.light = new THREE.PointLight('#fff', 0.1, 100 )
        this.mesh.add(this.light)
        this.mesh.name = 'point'
        let y = 1 - i/8
        this.mesh.position.set(0,y,0)
    }
    update(tick){
        let x = Math.sin(tick) * 1
        this.mesh.position.x = x
    }
}

let points = []
for (let i = 0; i < AMOUNT; i++) {
    let s = new Point(i)
    points.push(s)
    scene.add(s.mesh)
}

let clock = new THREE.Clock()

function animate() {
    let tick = clock.getElapsedTime()
    requestAnimationFrame( animate )
    points.forEach(spark=>spark.update(tick))
    renderer.render( scene, camera )
}
animate()
border { margin: 0; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/95/three.min.js"></script>

0 个答案:

没有答案