Three.js如何切换到VR模式（Stereo Effect）

单双目切换（单目切换到双目模式以及相反）

three, vr, mode, switch

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3588
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene()
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(70, 0, 70)
scene.add(camera)
var renderer = new THREE.WebGLRenderer({
    alpha: true
})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
var controls = new THREE.OrbitControls(camera, renderer.domElement)
var effect = new THREE.StereoEffect(renderer)

var squares = []
var geometry = new THREE.BoxGeometry(.1, 3, 3)
var radius = 50
var VR = false

for (var lon = 1; lon < 20; lon++) {
    for (var lat = 1; lat < 20; lat++) {

var square = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({
            transparent: true,
            opacity: 0.9,
            color: 0xffffff
        }))
        squares.push(square)
        scene.add(square)

var x = radius * Math.sin(lon) * Math.cos(lat)
        var y = radius * Math.cos(lon)
        var z = radius * Math.sin(lon) * Math.sin(lat)

square.position.x = x
        square.position.y = y
        square.position.z = z

}
}

function animate() {
    requestAnimationFrame(animate)

if (VR) {
        effect.render(scene, camera)
    } else {
        renderer.render(scene, camera)
    }

}

function toggleVR() {
    if (VR) {
        VR = false
    } else {
        VR = true
    }
}

animate();
toggleVR();

编译

CSS

HTML

单双目切换（单目切换到双目模式以及相反）

three, vr, mode, switch

编辑器支持Emmet

快捷键

单双目切换（单目切换到双目模式以及相反）

three, vr, mode, switch

three.js gltf扩展（draco压缩，pbr，binary）模型加载代码示例

three.js shader生成泰森多边形模式（基于Voronoi噪音算法）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：