Three.js 简单的模型构造器实例

Three.js Simple Model Constructor Source: http://www.jasonharron.com/spacestation6/

three, constructor

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

//base.js
function init() {

///////////////////////////////////////////////////
    //  Create Prototype for Extrude Vector2 Points  //
    ///////////////////////////////////////////////////

PrismGeometry = function(vertices, height) {

var Shape = new THREE.Shape();

(function f(ctx) {

ctx.moveTo(vertices[0].x, vertices[0].y);
            for (var i = 1; i < vertices.length; i++) {
                ctx.lineTo(vertices[i].x, vertices[i].y);
            }
            ctx.lineTo(vertices[0].x, vertices[0].y);

})(Shape);

var settings = {};
        settings.amount = height;
        settings.bevelEnabled = false;
        THREE.ExtrudeGeometry.call(this, Shape, settings);

};

PrismGeometry.prototype = Object.create(THREE.ExtrudeGeometry.prototype);

// Setup Renderer, Camera, and Scene
    renderer = new THREE.WebGLRenderer(Antialiasing = true);
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    renderer.shadowMapEnabled = true;

scene = new THREE.Scene();

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.y = 2;
    camera.position.z = 20;

scene.add(camera);

//  Grid XY
    var gridXY = new THREE.GridHelper(15, 1);
    gridXY.setColors(0x808080, 0x808080);
    scene.add(gridXY);

//  Axis
    var axis = new THREE.AxisHelper(15);
    scene.add(axis);

//  Controls
    controls = new THREE.TrackballControls(camera, renderer.domElement);

controls.addEventListener('change', render);

//  Stats
    stats = new Stats();

stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';
    stats.domElement.style.zIndex = 100;
    document.body.appendChild(stats.domElement);

rendererStats.domElement.style.position = 'absolute'
    rendererStats.domElement.style.left = '0px'
    rendererStats.domElement.style.bottom = '0px'
    document.body.appendChild(rendererStats.domElement)

window.addEventListener('resize', onWindowResize, false);
}

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

controls.handleResize();

}

function animate() {

stats.update();
    rendererStats.update(renderer);
    requestAnimationFrame(animate);
    controls.update();
    render();

}

function render() {
    renderer.render(scene, camera);

}

function addObject(x, y, z, rx, ry, rz) {

mainObject = new THREE.Object3D();

addShapes(); //Get the object grouping

var newObject = mainObject.clone();

newObject.position.set(x, y, z);

newObject.rotation.set((rx * Math.PI / 180), (ry * Math.PI / 180), (rz * Math.PI / 180));

scene.add(newObject);

}

function addBox(geometry, material) {

var sizeX = geometry.width || 0;
    var sizeY = geometry.height || 0;
    var sizeZ = geometry.length || 0;
    var posX = geometry.x || 0;
    var posY = geometry.y || 0;
    var posZ = geometry.z || 0;
    var degX = geometry.rx || 0;
    var degY = geometry.ry || 0;
    var degZ = geometry.rz || 0;
    var mass = geometry.mass || 0;
    var castShadow = geometry.castShadow || false;
    var receiveShadow = geometry.receiveShadow || false;

if (material.opacity != 1.0 && material.opacity != null) {
        material.transparent = true;
        renderOrder = 2;
    } else {
        material.transparent = false;
        renderOrder = 1;
    }

if (material.materialType == 'Basic' || material.materialType == 'basic') {
        var material = new THREE.MeshBasicMaterial(material);
    } else if (material.materialType == 'Depth' || material.materialType == 'depth') {
        var material = new THREE.MeshDepthMaterial(material);
        //  } else if (material.materialType == 'Face' || material.materialType == 'face') {   //Error cannot read property 'transparent' of undefined
        //      var material = new THREE.MeshFaceMaterial(material);
    } else if (material.materialType == 'Lambert' || material.materialType == 'lambert') {
        var material = new THREE.MeshLambertMaterial(material);
    } else if (material.materialType == 'Normal' || material.materialType == 'normal') {
        var material = new THREE.MeshNormalMaterial(material);
    } else if (material.materialType == 'Phong' || material.materialType == 'phong') {
        var material = new THREE.MeshPhongMaterial(material);
    } else {
        var material = new THREE.MeshNormalMaterial(material); // Use Normal if no materialType is defined
        console.log('Mesh has used an invalid matieralType... using Normal Mesh instead');
    }

var boxGeometry = new THREE.BoxGeometry(sizeX * 2, sizeY * 2, sizeZ * 2);
    var boxMesh = new THREE.Mesh(boxGeometry, material);

var e1 = degX;
    var e2 = degY;
    var e3 = -degZ;
    var u0 = 0;
    var u1 = 0;
    var u2 = 0;
    var u3 = 0;

with(Math) {
        u0 = sqrt(cos(e2 * PI / 180) * cos(e1 * PI / 180) + cos(e2 * PI / 180) * cos(e3 * PI / 180) - sin(e2 * PI / 180) * sin(e1 * PI / 180) * sin(e3 * PI / 180) + cos(e1 * PI / 180) * cos(e3 * PI / 180) + 1) / 2;
        u1 = (cos(e1 * PI / 180) * sin(e3 * PI / 180) + cos(e2 * PI / 180) * sin(e3 * PI / 180) + sin(e2 * PI / 180) * sin(e1 * PI / 180) * cos(e3 * PI / 180)) / sqrt(cos(e2 * PI / 180) * cos(e1 * PI / 180) + cos(e2 * PI / 180) * cos(e3 * PI / 180) - sin(e2 * PI / 180) * sin(e1 * PI / 180) * sin(e3 * PI / 180) + cos(e1 * PI / 180) * cos(e3 * PI / 180) + 1) / 2;
        u2 = (sin(e2 * PI / 180) * sin(e3 * PI / 180) - cos(e2 * PI / 180) * sin(e1 * PI / 180) * cos(e3 * PI / 180) - sin(e1 * PI / 180)) / sqrt(cos(e2 * PI / 180) * cos(e1 * PI / 180) + cos(e2 * PI / 180) * cos(e3 * PI / 180) - sin(e2 * PI / 180) * sin(e1 * PI / 180) * sin(e3 * PI / 180) + cos(e1 * PI / 180) * cos(e3 * PI / 180) + 1) / 2;
        u3 = (sin(e2 * PI / 180) * cos(e1 * PI / 180) + sin(e2 * PI / 180) * cos(e3 * PI / 180) + cos(e2 * PI / 180) * sin(e1 * PI / 180) * sin(e3 * PI / 180)) / sqrt(cos(e2 * PI / 180) * cos(e1 * PI / 180) + cos(e2 * PI / 180) * cos(e3 * PI / 180) - sin(e2 * PI / 180) * sin(e1 * PI / 180) * sin(e3 * PI / 180) + cos(e1 * PI / 180) * cos(e3 * PI / 180) + 1) / 2;
    }

boxMesh.position.set(posX, posY, posZ);
    boxMesh.quaternion.set(u3, u2, u0, u1);
    if (geometry.castShadow) {
        boxMesh.castShadow = true;
    }
    if (geometry.receiveShadow) {
        boxMesh.receiveShadow = true;
    }
    boxMesh.renderOrder = renderOrder;
    mainObject.add(boxMesh);
}

function addSphere(geometry, material) {

var radius = geometry.radius || 0;
    var widthSegments = geometry.widthSegments || 8;
    var heightSegments = geometry.heightSegments || 8;
    var posX = geometry.x || 0;
    var posY = geometry.y || 0;
    var posZ = geometry.z || 0;
    var degX = geometry.rx || 0;
    var degY = geometry.ry || 0;
    var degZ = geometry.rz || 0;
    var mass = geometry.mass || 0;
    var castShadow = geometry.castShadow || false;
    var receiveShadow = geometry.receiveShadow || false;

var sphereGeometry = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
    var sphereMesh = new THREE.Mesh(sphereGeometry, material);

var e1 = degX;
    var e2 = degY;
    var e3 = -degZ;
    var u0 = 0;
    var u1 = 0;
    var u2 = 0;
    var u3 = 0;

sphereMesh.position.set(posX, posY, posZ);
    sphereMesh.quaternion.set(u3, u2, u0, u1);
    //if (geometry.castShadow) { sphereMesh.castShadow = true; }
    //if (geometry.receiveShadow) { sphereMesh.receiveShadow = true; }
    //sphereMesh.renderOrder = renderOrder;
    mainObject.add(sphereMesh);
}

function addCylinder(geometry, material) {

var radiusTop = geometry.radiusTop || 0;
    var radiusBottom = geometry.radiusBottom || 0;
    var height = geometry.height || 0;
    var radiusSegments = geometry.radiusSegments || 10;
    var posX = geometry.x || 0;
    var posY = geometry.y || 0;
    var posZ = geometry.z || 0;
    var degX = geometry.rx || 0;
    var degY = geometry.ry || 0;
    var degZ = geometry.rz || 0;
    var mass = geometry.mass || 0;
    var castShadow = geometry.castShadow || false;
    var receiveShadow = geometry.receiveShadow || false;

var cylinderGeometry = new THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments);
    var cylinderMesh = new THREE.Mesh(cylinderGeometry, material);

var e1 = degX;
    var e2 = degY;
    var e3 = -degZ;
    var u0 = 0;
    var u1 = 0;
    var u2 = 0;
    var u3 = 0;

cylinderMesh.position.set(posX, posY, posZ);
    cylinderMesh.quaternion.set(u3, u2, u0, u1);
    if (geometry.castShadow) {
        cylinderMesh.castShadow = true;
    }
    if (geometry.receiveShadow) {
        cylinderMesh.receiveShadow = true;
    }
    cylinderMesh.renderOrder = renderOrder;
    mainObject.add(cylinderMesh);
}

function addExtrude(geometry, extrudeSettings, shape, material) {
    var posX = geometry.x || 0;
    var posY = geometry.y || 0;
    var posZ = geometry.z || 0;
    var degX = geometry.rx || 0;
    var degY = geometry.ry || 0;
    var degZ = geometry.rz || 0;
    var mass = geometry.mass || 0;
    var castShadow = geometry.castShadow || false;
    var receiveShadow = geometry.receiveShadow || false;

var extrudeGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
    var extrudeMesh = new THREE.Mesh(extrudeGeometry, material);

var e1 = degX;
    var e2 = degY;
    var e3 = -degZ + 180;
    var u0 = 0;
    var u1 = 0;
    var u2 = 0;
    var u3 = 0;

extrudeMesh.position.set(posX, posY, (posZ - (extrudeSettings.amount / 2)));
    //extrudeMesh.quaternion.set(u3, u2, u0, u1); //  Divide by zero
    extrudeMesh.rotation.set((degX * Math.PI / 180), (degY * Math.PI / 180), (degZ * Math.PI / 180));
    if (geometry.castShadow) {
        extrudeMesh.castShadow = true;
    }
    if (geometry.receiveShadow) {
        extrudeMesh.receiveShadow = true;
    }
    extrudeMesh.renderOrder = renderOrder;
    mainObject.add(extrudeMesh);
}

function addPointLight(x, y, z, r) {
    var light = new THREE.PointLight(0xFFFFFF, 1, r);
    light.position.set(x, y, z);
    var newLight = light.clone();
    scene.add(newLight);
}

function addSpotLight(x, y, z, near, far, fov) {
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(x, y, z);
    spotLight.shadowCameraVisible = true;
    spotLight.castShadow = true;

spotLight.shadowMapWidth = 1024;
    spotLight.shadowMapHeight = 1024;

spotLight.shadowCameraNear = (near + 0.001);
    spotLight.shadowCameraFar = far;
    spotLight.shadowCameraFov = fov;

scene.add(spotLight);
}

//app.js
var camera, scene, renderer, controls, container;
var geometry, material;
var rendererStats = new THREEx.RendererStats();
var stats;
var groundMaterial, cameraMesh;
var dt = 1 / 60;
var onRenderFcts = [];
var time = Date.now();
var boxes = [];
var bodies = [];
var FPS = false;
var mainObject = new THREE.Object3D();
var staticSceneGeometry = [];
var staticSceneMaterial = [];
init();
addLights();
addShapes(0, 0, 0, 0, 0, 0);
for (i = 0; i < staticSceneGeometry.length; i++) {
    var mesh = new THREE.Mesh(staticSceneGeometry[i], staticSceneMaterial[i]);
    if (staticSceneMaterial[i].color.getHex() == 4473924) {
        mesh.receiveShadow = true;
    }
    mesh.castShadow = true;
    scene.add(mesh);
}

camera.position.set(0, 10, 30);
animate();

function addLights() {
    addPointLight(0, 20, 100, 250);
    addPointLight(0, 20, -100, 250);
    addPointLight(-100, 20, 0, 250);
    addPointLight(100, 20, 0, 250);
    addSpotLight(-10, 10, -10, 1, 30, 60);
}

编译

CSS

HTML

Three.js Simple Model Constructor Source: http://www.jasonharron.com/spacestation6/

three, constructor

编辑器支持Emmet

快捷键

Three.js Simple Model Constructor Source: http://www.jasonharron.com/spacestation6/

three, constructor

Three.js ExtrudeGeometry塑形模型使用实例

基于Three.js实现的体积光线前进特效 - 麻花（沙琪玛）模型

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：