3D模型：优雅的女士

一位坐着的女士，卷发、礼服和高跟鞋。

three, 模型, human

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

if (!Detector.webgl) Detector.addGetWebGLMessage();

var container, stats;

var camera, cameraTarget, scene, renderer, mesh;

var mouseX = 0,
    mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init() {

container = document.createElement('div');
    document.body.appendChild(container);

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 15);
    camera.position.set(0, -3, 0);

cameraTarget = new THREE.Vector3(0, -0.25, 0);

scene = new THREE.Scene();
    scene.fog = new THREE.Fog(0x72645b, 2, 15);

// Ground
    var plane = new THREE.Mesh(
        new THREE.PlaneBufferGeometry(40, 40),
        new THREE.MeshPhongMaterial({
            ambient: 0x999999,
            color: 0x999999,
            specular: 0x101010
        })
    );
    plane.rotation.x = -Math.PI / 2;
    plane.position.y = -0.5;
    scene.add(plane);

plane.receiveShadow = true;

// ASCII file
    var loader = new THREE.STLLoader();
    loader.addEventListener('load', function(event) {

var geometry = event.content;
        var material = new THREE.MeshPhongMaterial({
            ambient: 0xff5533,
            color: 0xeeaa88,
            specular: 0x111111,
            shininess: 200
        });
        mesh = new THREE.Mesh(geometry, material);

mesh.position.set(-0.25, -0.5, 0);
        mesh.rotation.set(0, Math.PI / 2, 0);
        mesh.scale.set(1, 1, 1);

mesh.castShadow = true;
        mesh.receiveShadow = true;

scene.add(mesh);

});
    loader.load('/uploads/160601/women_sitting.stl');

// Lights
    scene.add(new THREE.AmbientLight(0x777777));

addShadowedLight(1, 1, -100, 0xffffff, 1.5);
    addShadowedLight(0.5, 1, -100, 0xffaa00, 1);

// renderer

renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setClearColor(scene.fog.color, 1);

renderer.gammaInput = true;
    renderer.gammaOutput = true;

renderer.shadowMapEnabled = true;
    renderer.shadowMapCullFace = THREE.CullFaceBack;

container.appendChild(renderer.domElement);

// stats

stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    container.appendChild(stats.domElement);
    document.addEventListener('mousemove', onDocumentMouseMove, false);
    window.addEventListener('resize', onWindowResize, false);
}

function addShadowedLight(x, y, z, color, intensity) {
    var directionalLight = new THREE.DirectionalLight(color, intensity);
    directionalLight.position.set(x, y, z)
    scene.add(directionalLight);

directionalLight.castShadow = true;
    // directionalLight.shadowCameraVisible = true;

var d = 1;
    directionalLight.shadowCameraLeft = -d;
    directionalLight.shadowCameraRight = d;
    directionalLight.shadowCameraTop = d;
    directionalLight.shadowCameraBottom = -d;

directionalLight.shadowCameraNear = 1;
    directionalLight.shadowCameraFar = 4;

directionalLight.shadowMapWidth = 1024;
    directionalLight.shadowMapHeight = 1024;

directionalLight.shadowBias = -0.005;
    directionalLight.shadowDarkness = 0.15;

}

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate() {
    requestAnimationFrame(animate);
    render();
    stats.update();
}

function onDocumentMouseMove(event) {
    mouseX = (event.clientX - windowHalfX) / 2;
    mouseY = (event.clientY - windowHalfY) / 2;
}

function render() {
    mesh.rotation.z += .01;

camera.lookAt(scene.position);
    renderer.render(scene, camera);
}

编译

CSS

HTML

一位坐着的女士，卷发、礼服和高跟鞋。

three, 模型, human

编辑器支持Emmet

快捷键

一位坐着的女士，卷发、礼服和高跟鞋。

three, 模型, human

3D模型：跳舞的女孩

使用three.phenomenon构建的3D模型消解动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：