HTML5/WebGL三维彩灯圣诞树

3D圣诞树

three, tree, xmas

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

console.clear();

var scene, camera, renderer, orbit, light;

scene = new THREE.Scene();
scene.fog = new THREE.Fog(0xF4F4F6, 20, 150);

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 10, 200);
camera.position.z = 70;
camera.position.y = -10;
camera.updateProjectionMatrix();

renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0xF4F4F6);

renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;

window.addEventListener('resize', function() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}, false);

document.body.appendChild(renderer.domElement);

/*////////////////////////////////////////*/

orbit = new THREE.OrbitControls(camera, renderer.domElement);
orbit.enableZoom = true;
orbit.enablePan = false;

orbit.rotateSpeed = 0.6;
orbit.zoomSpeed = 0.6;
//orbit.autoRotate = true;
//orbit.autoRotateSpeed = 0.3;
//orbit.minPolarAngle = -Math.PI * 0.4;
//orbit.maxPolarAngle = Math.PI * 0.4;

orbit.minAzimuthAngle = -Math.PI * 0.3; // radians
orbit.maxAzimuthAngle = Math.PI * 0.3; // radians

orbit.minDistance = 30;
orbit.maxDistance = 90;

/*////////////////////////////////////////*/

light = new THREE.PointLight(0xFCE3E3, 0.4, 0, 40); //Math.PI / 2 );
light.position.set(0, 30, 100);

light.castShadow = true;

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

light.shadow.camera.far = 200;
light.shadow.bias = 0.1;
light.shadow.radius = 10;

scene.add(light);

let hemiLight = new THREE.HemisphereLight(0xEBF7FD, 0xEBF7FD, 0.7);
//hemiLight.color.setRGB(0.75,0.8,0.95);
hemiLight.position.set(0, 100, 0);
scene.add(hemiLight);

/*////////////////////////////////////////*/

let geometry = new THREE.PlaneGeometry(200, 200, 10, 10);

let material = new THREE.MeshPhongMaterial({
    color: 0xdddddd,
    shininess: 1000,
    emissive: 0xEBF7FD,
    emissiveIntensity: 0.2,
    side: THREE.DoubleSide,
    shading: THREE.SmoothShading
});
let plane = new THREE.Mesh(geometry, material);
plane.receiveShadow = true;

scene.add(plane);

/*////////////////////////////////////////*/

let colors = [0xFFFFFF, 0xF23557, 0xF0D43A, 0x22B2DA]; // ,0xA82FFC];
let ballMaterials = [];
colors.forEach((color, i) => {
    ballMaterials[i] = new THREE.MeshPhongMaterial({
        color: color,
        emissive: color,
        emissiveIntensity: 0.1,
        //transparent: true,
        //opacity: 0.95,
        shininess: 600,
    });
});

function Ball() {

THREE.Mesh.call(this,
        new THREE.SphereGeometry(0.4, 16, 16),
        ballMaterials[1]
    );

this.randomColor();
    // this._light = new THREE.PointLight( 0xFFFFFF, 1, 3, 2 );
    // this._light.position.z = 1;
    // this.add(this._light);
}

let lastColor = 0;
Ball.prototype = Object.assign(THREE.Mesh.prototype, {
    constructor: Ball,

lastColor: 0,

randomColor: function() {
        let color = Math.floor(Math.random() * ballMaterials.length);
        if (color === lastColor || color === this.lastColor) {
            return this.randomColor();
        }
        lastColor = this.lastColor = color;

this.material = ballMaterials[color];
        //this._light.color = ballMaterials[color].color.clone().offsetHSL(0,0,0.1)

}
});

/*////////////////////////////////////////*/

let pieceMaterial = new THREE.MeshPhongMaterial({
    color: 0x2C9E4B,
    shininess: 100,
    //emissive: 0xEBF7FD,
    //emissiveIntensity: 0.1,
});

function Piece(width, height, depth) {
    width = width;
    height = height || 3;
    depth = depth || 5;

let geometry = new THREE.BoxGeometry(width, height, depth);

THREE.Mesh.call(this, geometry, pieceMaterial.clone());
    this.castShadow = true;
    this.position.z = (depth / 2) - 0.1;

return this;
}

Piece.prototype = Object.create(THREE.Mesh.prototype, {
    constructor: Piece
});

let pieces = [];

let len = 10;
let pieceGroup = new THREE.Group();

for (let i = 0; i < len; i++) {

let size = 40 * (i + 1) / len;
    let height = 3;
    let depth = 3;
    let piece = new Piece(i === len - 1 ? 5 : size, height, depth);
    piece.position.y = -size;

if (i !== len - 1) {
        let j = (i === 0 ? 0 : (size / -2) + 2);

while (j < size / 2) {

let newBall = new Ball();
            newBall.position.z += depth * 0.5;
            newBall.position.x = j + (Math.random() - 0.5) * 0.2; //size;
            newBall.position.y = (Math.random() * 0.1 + 0.3) * (j % 2 !== 0 ? 1 : -1) * (i % 2 ? 1 : -1);
            piece.add(newBall);

j += 3;
        }
    }

pieces[i] = piece;

pieceGroup.add(pieces[i]);
}

pieceGroup.position.y = 5 * (len / 2);
scene.add(pieceGroup);

/*////////////////////////////////////////*/

let count = 0;

function render() {
    requestAnimationFrame(render);
    //orbit.update();
    renderer.render(scene, camera);
};

render();

/*////////////////////////////////////////*/

let tl = new TimelineMax({
    delay: 0.25,
    repeat: -1,
    repeatDelay: 0.5,
    yoyo: true
});

let colorTl = new TimelineMax({
    repeat: -1,
    repeatDelay: 0.75
});
//console.log(pieces[0].children[0].position);

pieces.forEach(function(piece, i) {

let label = 'piece' + i;
    tl.addLabel(label, i * 0.1);

tl.from(piece.position, 1, {
        z: -1.6,
        ease: Power3.easeInOut
    }, label);

tl.from(piece.material.color, 0.8, {
        r: 0.95,
        g: 0.95,
        b: 0.95,
        ease: Cubic.easeInOut,
    }, label + '+=0.2')

piece.children.forEach(function(child, i) {

tl.from(child.position, 1, {
            z: '-=0.6', //1.6,
            ease: Power3.easeInOut,
            delay: 0.2,
        }, label + '+=' + i * 0.02);

if (child.randomColor) {
            colorTl.add(() => {
                child.randomColor();
            }, null, null);
        }

});

tl.set({}, {}, "+=2") //

编译

CSS

HTML

3D圣诞树

three, tree, xmas

编辑器支持Emmet

快捷键

3D圣诞树

three, tree, xmas

HTML5 WebGL冬日雪夜里的3D房屋和圣诞树

HTML5/WebGL豹纹波动着色器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：