three.js - 如何为3d视图重现此图像？

Question

我有tower image' - but i don't know how to reproduce this for 3d view using the three.js`任何人帮助我？

这是图像：

这是我的尝试：

$(function () {

    "use strict";

    var container, scene, camera, renderer, controls, stats;
    var keyboard = new THREEx.KeyboardState();
    var clock = new THREE.Clock();

// custom global variables
var cube;

// initialization
init();

// animation loop / game loop
animate();



function init() 
{

    scene = new THREE.Scene();


    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;   

    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;

    camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);

    scene.add(camera);

    camera.position.set(0,150,400);
    camera.lookAt(scene.position);  


    renderer = new THREE.WebGLRenderer( {antialias:true} );

    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

    container = document.getElementById( 'ThreeJS' );

    container.appendChild( renderer.domElement );


    THREEx.WindowResize(renderer, camera);

    THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });

    controls = new THREE.OrbitControls( camera, renderer.domElement );

    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.bottom = '0px';
    stats.domElement.style.zIndex = 100;
    container.appendChild( stats.domElement );




    var light = new THREE.PointLight(0xffffff);
    light.position.set(0,250,0);
    scene.add(light);
    var ambientLight = new THREE.AmbientLight(0x111111);


    var cloneTexture = new THREE.ImageUtils.loadTexture( 'images/tower.png' );

    var geometry = new THREE.CylinderGeometry( 1, 1, 100, 32 );
    var material = new THREE.MeshBasicMaterial( {map: cloneTexture, side: THREE.DoubleSide} );
    var cylinder = new THREE.Mesh( geometry, material );
    scene.add( cylinder );

    var axes = new THREE.AxisHelper(100);
    scene.add( axes );



    var floorTexture = new THREE.ImageUtils.loadTexture( 'images/plain-grass-lawn.jpeg' );
    var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );
    var floorGeometry = new THREE.PlaneBufferGeometry(1000, 1000, 1, 1);
    var floor = new THREE.Mesh(floorGeometry, floorMaterial);
    floor.position.y = -0.5;
    floor.rotation.x = Math.PI / 2;
    scene.add(floor);

}

function animate() 
{
    requestAnimationFrame( animate );
    render();       
}


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

});

这是我糟糕的输出：

Answer 1

您想在3D世界中有效地将图像显示为精灵吗？就像链接到下面的Sprite示例一样？

http://stemkoski.github.io/Three.js/#sprites

精灵渲染的示例源代码

https://threejsdoc.appspot.com/doc/three.js/examples.source/webgl_sprites.html.html

链接到与精灵相关的官方three.js文档

http://threejs.org/docs/#Reference/Objects/Sprite