Three.js:画一个八面体

时间:2017-05-20 01:10:59

标签: javascript three.js

我想画一个八面体,但结果的形状低于预期。我不知道原因和下一步我想画一个十二面体,有什么建议吗?The result of the Octahedron

我的代码:

var mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

// renderer
renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// scene
scene = new THREE.Scene();

// camera
camera = new THREE.PerspectiveCamera(40, window.innerWidth / 
window.innerHeight, 1, 10000);
camera.position.set(20, 20, 20);

// controls
controls = new THREE.OrbitControls(camera);

// ambient
scene.add(new THREE.AmbientLight(0x222222));

// light
var light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(20, 20, 0);
scene.add(light);

// axes
scene.add(new THREE.AxisHelper(20));

// geometry
//var geometry = new THREE.SphereGeometry(5, 12, 8);
var vertices = [
                0.5,0,0, 0,0.3,0, -0.5,0,0, 0,-0.3,0, 0,0,0.3, 0,0,-0.3
            ];
            var faces = [
                0,1,4, 1,2,4, 2,3,4, 3,0,4, 0,1,5, 1,2,5, 2,3,5, 3,0,5
            ];
var geometry = new THREE.PolyhedronGeometry(vertices, faces, 5, 1);
// material
var material = new THREE.MeshPhongMaterial({
    color: 0x00ffff,
    shading: THREE.FlatShading,
    wireframe:true,
    transparent: true,
    opacity: 0.7,
});

// mesh
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

}

function animate() {

requestAnimationFrame(animate);

//controls.update();

renderer.render(scene, camera);

}

1 个答案:

答案 0 :(得分:0)

使用

var geometry = new THREE.OctahedronGeometry( 5, 0 ); // or DodecahedronGeometry

如果您想直接使用OctahedronGeometry.js,请阅读并理解PolyhedronGeometry的源代码。

如果wireframe为真,请改用MeshBasicMaterial

three.js r.85