Three.js+WebVR 虚拟现实空间的立方体

WebVR Experience, 需要VR外设的支持才能完整体验。

three, webvr

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

"use strict";
var App = (function() {
    function App() {
            var _this = this;
            /**
             * Animation.
             * @param timestamp Timestamp
             */
            this.animate = function(timestamp) {
                var delta = Math.min(timestamp - _this.lastRender, 500);
                _this.lastRender = timestamp;
                // Apply rotation to cube mesh
                _this.cube.rotation.y += delta * 0.0002;
                // Update VR headset position and apply to camera.
                _this.controls.update();
                // Render the scene.
                _this.effect.render(_this.scene, _this.camera);
                // Keep looping.
                requestAnimationFrame(_this.animate);
            };
            /**
             * Resize handler.
             */
            this.onResize = function() {
                console.log("Resizing to %s x %s.", window.innerWidth, window.innerHeight);
                _this.effect.setSize(window.innerWidth, window.innerHeight);
                _this.camera.aspect = window.innerWidth / window.innerHeight;
                _this.camera.updateProjectionMatrix();
            };
            /**
             * Display presentation change.
             */
            this.onVRDisplayPresentChange = function() {
                console.log("onVRDisplayPresentChange");
                _this.onResize();
            };
            /**
             * Enter fullscreen handler.
             * @param el Element
             */
            this.onEnterFullscreen = function(el) {
                if (el.requestFullscreen) {
                    el.requestFullscreen();
                } else if (el.mozRequestFullScreen) {
                    el.mozRequestFullScreen();
                } else if (el.webkitRequestFullscreen) {
                    el.webkitRequestFullscreen();
                } else if (el.msRequestFullscreen) {
                    el.msRequestFullscreen();
                }
            };
            if (App._instance)
                throw new Error("Error: Instantiation failed: Use App.getInstance() instead of new");
            App._instance = this;
        }
        // SINGLETON MANAGEMENT
        // --------------------
    App.getInstance = function() {
        return App._instance;
    };
    /**
     * Initialization.
     */
    App.prototype.init = function() {
        var _this = this;
        // Setup three.js WebGL renderer. Note: Antialiasing is a big performance hit.
        // Only enable it if you actually need to.
        this.renderer = new THREE.WebGLRenderer({
            antialias: false
        });
        this.renderer.setPixelRatio(Math.floor(window.devicePixelRatio));
        // Append the canvas element created by the renderer to document body element.
        // noinspection XHTMLIncompatabilitiesJS
        document.body.appendChild(this.renderer.domElement);
        // Create a three.js scene.
        this.scene = new THREE.Scene();
        // Create a three.js camera.
        this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 10000);
        // Apply VR headset positional data to camera.
        this.controls = new THREE.VRControls(this.camera);
        // Apply VR stereo rendering to renderer.
        this.effect = new THREE.VREffect(this.renderer);
        this.effect.setSize(window.innerWidth, window.innerHeight);
        // Add a repeating grid as a skybox.
        var boxWidth = 5;
        var loader = new THREE.TextureLoader();
        loader.load("http://crossorigin.me/http://assets.vancura.org/codepen/images/vr/box.png", function(texture) {
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(boxWidth, boxWidth);
            var geometry = new THREE.BoxGeometry(boxWidth, boxWidth, boxWidth);
            var material = new THREE.MeshBasicMaterial({
                color: 0x01BE00,
                map: texture,
                side: THREE.BackSide
            });
            var skybox = new THREE.Mesh(geometry, material);
            _this.scene.add(skybox);
        });
        // Get the VRDisplay and save it for later.
        this.vrDisplay = null;
        if (navigator.getVRDisplays) {
            navigator.getVRDisplays().then(function(displays) {
                if (displays.length > 0) {
                    _this.vrDisplay = displays[0];
                }
            });
        }
        // Create 3D objects.
        var geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
        var material = new THREE.MeshNormalMaterial();
        this.cube = new THREE.Mesh(geometry, material);
        // Position cube mesh
        this.cube.position.z = -1;
        // Add cube mesh to your three.js scene
        this.scene.add(this.cube);
        // Request animation frame loop function
        this.lastRender = 0;
        // Resize the WebGL canvas when we resize and also when we change modes.
        window.addEventListener("resize", this.onResize);
        window.addEventListener("vrdisplaypresentchange", this.onVRDisplayPresentChange);
        document.addEventListener("touchmove", function(e) {
            e.preventDefault();
        });
        // Button click handlers.
        document.querySelector("button#fullscreen").addEventListener("click", function() {
            _this.onEnterFullscreen(_this.renderer.domElement);
        });
        document.querySelector("button#vr").addEventListener("click", function() {
            _this.vrDisplay.requestPresent([{
                source: _this.renderer.domElement
            }]);
        });
        document.querySelector("button#reset").addEventListener("click", function() {
            _this.vrDisplay.resetPose();
        });
        // Kick off animation loop.
        requestAnimationFrame(this.animate);
    };
    App._instance = new App();
    return App;
}());
App.getInstance().init();

编译

CSS

HTML

WebVR Experience, 需要VR外设的支持才能完整体验。

three, webvr

编辑器支持Emmet

快捷键

WebVR Experience, 需要VR外设的支持才能完整体验。

three, webvr

WebGL Three.js立方体矩阵起伏动画

WebGL Three.js构造的3D空间涟漪波传播动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：