我有一个塔图像” - 但我不知道如何使用
Three.js`为3d View 重现此图像,有人可以帮助我吗?
这是图片:
这是我的尝试:
$(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 );
}
});
这是我的错误输出:
最佳答案
您想在 3D 世界中将图像有效地显示为 Sprite 吗?喜欢下面链接的 Sprite 示例吗?
http://stemkoski.github.io/Three.js/#sprites
Sprite 渲染的示例源代码
https://threejsdoc.appspot.com/doc/three.js/examples.source/webgl_sprites.html.html
与 Sprite 相关的官方 Three.js 文档链接
关于javascript - Three.js - 如何为 3D View 重现此图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31451410/