Three.js构建的可旋转三维书本（或产品盒）

3d book or product box by three.js，可用于3D在线书展、商品预览。

three, book

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

window.onload = function() {

// Create the renderer and add it to the page's body element
    var renderer = new THREE.WebGLRenderer({
        alpha: true
    });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

// Create the scene to hold the object
    var scene = new THREE.Scene();

// Create the camera
    var camera = new THREE.PerspectiveCamera(
        35, // Field of view
        window.innerWidth / window.innerHeight, // Aspect ratio
        0.1, // Near plane distance
        1000 // Far plane distance
    );

// Position the camera
    camera.position.set(-15, 10, 20);

// Add the lights

var light = new THREE.PointLight(0xffffff, .4);
    light.position.set(10, 10, 10);
    scene.add(light);

ambientLight = new THREE.AmbientLight(0xbbbbbb);
    scene.add(ambientLight);

// Load the textures (book images)
    var textureLoader = new THREE.TextureLoader();
    var bookCoverTexture = textureLoader.load('/uploads/2001/southern-gems-cover.png');
    var bookSpineTexture = textureLoader.load('/uploads/2001/southern-gems-spine.png');
    var bookBackTexture = textureLoader.load('/uploads/2001/southern-gems-back.png');
    var bookPagesTexture = textureLoader.load('/uploads/2001/southern-gems-pages.png');
    var bookPagesTopBottomTexture = textureLoader.load('/uploads/2001/southern-gems-pages-topbottom.png');

// Use the linear filter for the textures to avoid blurriness
    bookCoverTexture.minFilter = bookSpineTexture.minFilter = bookBackTexture.minFilter = bookPagesTexture.minFilter = bookPagesTopBottomTexture.minFilter = THREE.LinearFilter;

// Create the materials

var materials = [
        bookPages, // Right side
        bookSpine, // Left side
        bookPagesTopBottom, // Top side
        bookPagesTopBottom, // Bottom side
        bookCover, // Front side
        bookBack // Back side
    ];

// Create the book and add it to the scene
    var book = new THREE.Mesh(new THREE.BoxGeometry(7, 10, 1.2, 4, 4, 1), materials);
    scene.add(book);

// Create the orbit controls for the camera
    controls = new THREE.OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.dampingFactor = 0.25;
    controls.enablePan = false;
    controls.enableZoom = false;

// Begin the animation
    animate();

/*
      Animate a frame
    */

function animate() {

// Update the orbit controls
        controls.update();

// Render the frame
        renderer.render(scene, camera);

// Keep the animation going
        requestAnimationFrame(animate);
    }

}

编译

CSS

HTML

3d book or product box by three.js，可用于3D在线书展、商品预览。

three, book

编辑器支持Emmet

快捷键

3d book or product box by three.js，可用于3D在线书展、商品预览。

three, book

WebGL Three.js构建流浪地球3D场景（新的太阳）

使用Three.js构建动态三角形全屏背景图案的网站引导页面模板

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：