Three.js 3D手机和内置移动网站视频内容展示

Phone Showcase with html5 webgl。包含一个手机表面的3D光照阴影效果。

Three.js, phone

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// Model:
// http://www.blendswap.com/blends/view/69415
//
// Dimensions for the texture:
// 3.488 x 6.21 = 0.56167471819646 / 0,56167471819646
//
// Ffmpeg conversion commands:
// ffmpeg -i pole-screencast.mov -b:v 3000k -c:v libx264 -r 30 -y -s 376x674 -an pole-screencast.mp4
// ffmpeg -i pole-screencast.mov -b:v 3000k -codec:v libtheora -r 30 -y -s 376x674 -an pole-screencast.ogv
//

// This trick allows ColladaLoader to load cross domain textures.
// Sure I'm opening bunch of security holes here, so I just
// close my eyes, smile and go forward.
THREE.ImageLoader.prototype.crossOrigin = "Anonymous";
THREE.ImageUtils.crossOrigin = '';

/**
 * 3D scene.
 */
var ThreeDScene = new Function();

/**
 */
ThreeDScene.prototype.scene = {};
ThreeDScene.prototype.camera = {};
ThreeDScene.prototype.renderer = {};
ThreeDScene.prototype.composer = {};
ThreeDScene.prototype.clock = {};

ThreeDScene.prototype.width = window.innerWidth; //384;
ThreeDScene.prototype.height = window.innerHeight; //150;

ThreeDScene.prototype.tweenComplete = 0;

/**
 * Init scene and start animation.
 */
ThreeDScene.prototype.init = function init() {

this.scene = new THREE.Scene();
    this.initCamera();
    this.initRenderer();
    this.initLight();
    this.initShapes();
    this.initClock();
    this.initResizeHandler();
    this.render();

};

/**
 * Init window resize handler.
 */
ThreeDScene.prototype.initResizeHandler = function() {

$(window).bind("resize", function() {

this.width = window.innerWidth;
        this.height = window.innerHeight;

this.camera.aspect = this.width / this.height;
        this.camera.updateProjectionMatrix();
        this.renderer.setSize(this.width, this.height);

}.bind(this));

}

/**
 * Init camera.
 */
ThreeDScene.prototype.initCamera = function() {

this.camera = new THREE.PerspectiveCamera(45, this.width / this.height, 1, 30);
    this.camera.position.y = -2;
    this.camera.position.z = 0;
    this.camera.position.x = 10;
    this.camera.updateProjectionMatrix();
    this.camera.lookAt(this.scene.position);

// Add orbital controls.
    /*
    this.controls = new THREE.OrbitControls( this.camera,  this.renderer.domElement );
    this.controls.enableDamping = true;
    this.controls.dampingFactor = 0.25;
    this.controls.enableZoom = false; 
    this.controls.minPolarAngle = 0;
    this.controls.maxPolarAngle = Math.PI * 0.55;
    */

};

/**
 * Init clock.
 */
ThreeDScene.prototype.initClock = function() {
    this.clock = new THREE.Clock(true);
}

/**
 * Renderer.
 */
ThreeDScene.prototype.initRenderer = function() {

this.renderer = new THREE.WebGLRenderer({
        canvas: $(".showcase__scene")[0],
        antialias: true,
        alpha: true
    });

this.renderer.setSize(this.width, this.height);

// Background color.
    this.renderer.setClearColor(0x000000, 0)

// Enable shadowmaps.
    this.renderer.shadowMapEnabled = true;
    this.renderer.shadowMapType = THREE.PCFSoftShadowMap;

// Set autoclear to false. We're doing this manually.
    // This is required for shaders to work.
    this.renderer.autoClear = false;
    //document.body.appendChild(this.renderer.domElement);

};

/**
 * Lights.
 */
ThreeDScene.prototype.initLight = function() {

var light = new THREE.DirectionalLight(0xffffff, 1.2);
    light.position.set(20, 10, -5);
    this.scene.add(light);

var light2 = new THREE.DirectionalLight(0xffffff, 1.2);
    light2.position.set(20, 10, 5);
    this.scene.add(light2);

};

/** 
 * Shapes.
 */
ThreeDScene.prototype.initShapes = function() {

var self = this;

// Init videotexture.
    video = $(".showcase__video")[0];
    texture = new THREE.VideoTexture(video);
    //texture.minFilter = THREE.LinearMipMapLinearFilter;
    //texture.magFilter = THREE.LinearMipMapLinearFilter;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.format = THREE.RGBFormat;
    texture.anisotropy = this.renderer.getMaxAnisotropy();

// Init collada model loader.
    var loader = new THREE.ColladaLoader();
    loader.options.convertUpAxis = true;

// Load phone model.
    loader.load('http://cdn.evermade.fi/threejs/ubuntu-edge-phone/collada/ubuntu%20edge3g.dae', function(collada) {

self.dae = collada.scene;

//self.dae.scale.x = self.dae.scale.y = self.dae.scale.z = 60;

self.dae.updateMatrix();
        self.scene.add(self.dae);

// Get the display.
        var display = self.scene.getObjectByName("Display");

// Get phone body.
        var body = self.scene.getObjectByName("PhoneBody");

// Add environmental reflection to body to make it fancier.
        var envMap = new THREE.TextureLoader().load('http://cdn.evermade.fi/threejs/ubuntu-edge-phone/environment-map.jpg');
        envMap.mapping = THREE.SphericalReflectionMapping;

var bodyMaterial = new THREE.MeshPhongMaterial({
            envMap: envMap,
            reflectivity: 1,
            color: new THREE.Color(0.03, 0.03, 0.03),
            specular: new THREE.Color(0.05, 0.05, 0.05)
        });
        body.children[0].material = bodyMaterial;

var displayMaterial = new THREE.MeshPhongMaterial({
            envMap: envMap,
            reflectivity: 0.5,
            map: texture,
            specular: new THREE.Color(0, 0, 0),
            side: THREE.DoubleSide
        });
        display.children[0].material = displayMaterial;

self.dae.position.y = -3;
        self.dae.rotation.x = Math.PI / 2;
        self.dae.rotation.y = 0;

createjs.Tween.get(self.dae.rotation).wait(3000).to({
            x: 0,
            y: Math.PI / 2
        }, 2000, createjs.Ease.quadInOut);
        createjs.Tween.get(self.dae.position).wait(3000).to({
            y: 0
        }, 2000, createjs.Ease.quadInOut).call(function() {
            $(".showcase").addClass("showcase--tweencomplete");
            self.tweenComplete = self.clock.getElapsedTime();
        });

$(".showcase").addClass("showcase--loaded");

});

};

/**
 * Render method.
 */
ThreeDScene.prototype.render = function() {

// Rotate phone.
    if (typeof(this.dae) != "undefined" && this.tweenComplete != 0) {

this.dae.rotation.y = Math.PI / 2 + Math.sin((this.clock.getElapsedTime() - this.tweenComplete) / 5) / 2;
        //Tween.update();
        //createjs.Tween.tick(this.clock.getDelta());
    }

// Render scene.
    this.renderer.render(this.scene, this.camera);

// Request new frame.
    requestAnimationFrame(this.render.bind(this));

};

/**
 * Run da shit when DOM is ready.
 */
document.addEventListener("DOMContentLoaded", function() {

// Just to make console cleaner.
    console.clear();

// Init scene.
    var threeDScene = new ThreeDScene();
    threeDScene.init();

});

编译

CSS

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #d2d2d2;
}
.showcase {
    height: 100vh;
    position: relative;
}
.showcase__background {
    height: 80vh;
    overflow: hidden;
    position: relative;
    background: black;
    opacity: 0;
    transition: opacity 2s ease-out;
}
.showcase__background__inner {
    background-image: url("https://www.polebicycles.com/wp-content/uploads/2015/07/New-School-MTB1-1920x1282.jpg");
    background-size: cover;
    position: absolute;
    left: -10px;
    right: -10px;
    top: -10px;
    bottom: -10px;
    transition: all 2s ease-out;
    transform: scale(1);
    opacity: 0.4;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}
.showcase__video {
    display: none;
}
.showcase__scene {
    position: absolute;
    height: 100vh;
    top: 0;
    opacity: 0;
    transition: opacity 2s ease-out;
}
.showcase--loaded .showcase__scene {
    opacity: 1;
}
.showcase--tweencomplete .showcase__background {
    opacity: 1;
}

HTML

</div>

Phone Showcase with html5 webgl。包含一个手机表面的3D光照阴影效果。

Three.js, phone

编辑器支持Emmet

快捷键

Phone Showcase with html5 webgl。包含一个手机表面的3D光照阴影效果。

Three.js, phone

Three.js 3D机器人（无人机）动画

Three.js 3D低多边形云演示动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：