WebGL Three.js 3D盒子翻转动画（如何使用阴影）

WebGL: Learning to play with Shadowmaps

webgl，盒子，翻转

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

第三方库
作品简介 2038
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer({
    antialias: true,
    transparent: false
});
renderer.setClearColor(0x000000, 0);
renderer.setClearAlpha(0);
document.body.appendChild(renderer.domElement);
var dpr = window.devicePixelRatio || 1;
renderer.setSize(innerWidth * dpr, innerHeight * dpr);
renderer.domElement.style.width = "100%";
renderer.domElement.style.height = "100%";
var persp = new THREE.PerspectiveCamera(30, innerWidth / innerHeight, .1, 1000);

persp.position.z = -10;
persp.position.x = -10;
persp.lookAt(new THREE.Vector3());
var cubeGeo = new THREE.CubeGeometry(2, 2, 2);

var mat = new THREE.MeshPhongMaterial({
    color: 0xf02010
});

var mat2 = new THREE.MeshPhongMaterial({
    color: 0xf04030
});

var light = new THREE.SpotLight(0xffffff, .8);
scene.add(light);
light.position.y = 5;
light.position.x = 5;
var light2 = new THREE.SpotLight(0xffffff, 1.);
scene.add(light2);
light2.position.x = -5;
light2.position.z = -5;

var planeGeo = new THREE.PlaneGeometry(40, 4);
var planeMesh = new THREE.Mesh(planeGeo, mat2);
scene.add(planeMesh);
planeMesh.rotation.x = -Math.PI / 2;

cubeGeo.vertices.forEach(function(v) {
    v.x += 1;
    v.y += 1;
});
var cubeMesh = new THREE.Mesh(cubeGeo, mat);
scene.add(cubeMesh);

light.castShadow = true;
light.shadowDarkness = 0.5;
light.shadowCameraNear = 0.1;
light.shadowCameraFar = 200;

light2.castShadow = true;
light2.shadowDarkness = 0.5;
light2.shadowCameraNear = 0.1;
light2.shadowCameraFar = 200;

renderer.shadowMapEnabled = true;
renderer.shadowMapType = THREE.PCFSoftShadowMap;

planeMesh.receiveShadow = true;
planeMesh.castShadow = true;
cubeMesh.castShadow = true;
cubeMesh.receiveShadow = true;

cubeMesh.receiveShadow = false;

var decayDiff = 0;
var lx = 0;

function render() {

var now = new Date().getTime() / 1;
    cubeMesh.position.x = -Math.floor((now % 11000) / 1000) * 2 + 13;
    decayDiff += Math.abs(lx - cubeMesh.position.x);
    decayDiff *= 0.6;
    lx = cubeMesh.position.x;
    var rz = ((now % 1000) / 1000);
    rz = ease(rz, 0.05, 0.45);
    rz = ease(rz, 0.05, 0.45);
    rz = ease(rz, 0.05, 0.45);
    cubeMesh.rotation.z = rz * Math.PI / 2;
    renderer.render(scene, persp);
    requestAnimationFrame(render);
    persp.position.y = 1 - decayDiff / 10;
}

render();

function ease(pi, a, b) {
    var ip = 1 - pi;
    return 3 * ip * ip * pi * (a || 0.05) +
        3 * ip * pi * pi * (b || 0.95) +
        1 * pi * pi * pi;

}

编译

CSS

HTML

WebGL: Learning to play with Shadowmaps

webgl，盒子，翻转

编辑器支持Emmet

快捷键

WebGL: Learning to play with Shadowmaps

webgl，盒子，翻转

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：