Three.js 3D房间 - 踏得网

沙发、书架、电脑、打印机、黑板、窗户、窗帘。模型数据使用了json格式。使用了纹理贴图。

three, room

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

/*
	Basic Setup
*/

//__________ Variables
var textureMap = document.getElementById('textureMap');

textureMap.onload = function() {
    initSetup(this);
}

function initSetup(texture) {

var main_color = 0x000000;
    var canvas_height = window.innerHeight;
    var canvas_width = window.innerWidth;
    //__________ scene
    var scene = new THREE.Scene();

//__________ camera

loadModel(texture);

var camera = new THREE.PerspectiveCamera(1, canvas_width / canvas_height, 10000, 100000);

camera.position.set(10698, 9788, 10745);
    scene.add(camera);
    //__________ renderer

var renderer = new THREE.WebGLRenderer({
        alpha: true,
        antialias: true,
        transparent: true
    }); /// { alpha: true }
    renderer.setSize(canvas_width, canvas_height);
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;

document.body.appendChild(renderer.domElement);

//__________ resize

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

//__________ controls

controls = new THREE.OrbitControls(camera);

controls.damping = 0.2;
    controls.maxPolarAngle = Math.PI / 2;
    controls.minPolarAngle = 1;
    controls.minDistance = 10000;
    controls.maxDistance = 30000;

// controls.minAzimuthAngle = 80 * Math.PI / 180; // radians
    //controls.maxAzimuthAngle =  -230 * Math.PI / 180; // radians
    controls.target = new THREE.Vector3(50, 70, 65);

//__________ light
    var ambient = new THREE.AmbientLight(0xaaaaaa, 1);
    scene.add(ambient);

var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(200, 100, 0);
    spotLight.intensity = 1;
    spotLight.castShadow = true;
    spotLight.shadowCameraVisible = true;
    scene.add(spotLight);

//__________ cubes

function loadModel(texture) {
            var loader = new THREE.JSONLoader();
            var roomGroup = new THREE.Group();
            var tex = new THREE.Texture(texture);

tex.needsUpdate = true;
            loader.load('/uploads/160801/room.json', function(geometry, material) {
                material.forEach(function(m, index) {
                    m.map = tex
                    m.bumpMap = tex;
                    m.side = THREE.DoubleSide;
                    m.shading = THREE.FlatShading;
                    m.shininess = 10;
                    m.color = new THREE.Color(0xffffff);
                    m.specular = new THREE.Color(0x333333);

m.needsUpdate = true;
                });

var roomMaterial = new THREE.MeshFaceMaterial(material);

var room = new THREE.Mesh(geometry, roomMaterial);

scene.add(room);
            });
        }
        //__________ render
    var render = function() {
        requestAnimationFrame(render);
        controls.update();
        renderer.render(scene, camera);
    };

//__________

render();

}

编译

CSS

HTML

沙发、书架、电脑、打印机、黑板、窗户、窗帘。模型数据使用了json格式。使用了纹理贴图。

three, room

编辑器支持Emmet

快捷键

沙发、书架、电脑、打印机、黑板、窗户、窗帘。模型数据使用了json格式。使用了纹理贴图。

three, room

WebGL Three.js构造的3D空间涟漪波传播动画

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：