[英]Three.js THREE.ImageUtils.loadTexture Image resize
I'm using Three.js and have a question. 我正在使用Three.js,有一个问题。 Within particle function, I'm adding image, which flying around. 在粒子函数中,我添加了图像,该图像四处飞行。 Code: 码:
function makeParticles() { 函数makeParticles(){
var particle, material;
// we're gonna move from z position -1000 (far away)
// to 1000 (where the camera is) and add a random particle at every pos.
for ( var zpos= -1000; zpos < 1000; zpos+=20 ) {
// we make a particle material and pass through the
// colour and custom particle render function we defined.
var particleTexture = THREE.ImageUtils.loadTexture('img/fly.png');
material = new THREE.ParticleBasicMaterial( { map: particleTexture, transparent: true, program: particleRender } );
// make the particle
particle = new THREE.Particle(material);
// give it a random x and y position between -500 and 500
particle.position.x = Math.random() * 1000 - 500;
particle.position.y = Math.random() * 1000 - 500;
// set its z position
particle.position.z = zpos;
// scale it up a bit
particle.scale.x = particle.scale.y = 0.3;
// add it to the scene
scene.add( particle );
// and to the array of particles.
particles.push(particle);
}
}
Problem is, when I'm resizing page, all those images gets their width crushed and does not keep proportions. 问题是,当我调整页面大小时,所有这些图像的宽度都被压缩,无法保持比例。 How to keep size of images, while resizing page? 调整页面大小时如何保持图像大小?
Full code: 完整代码:
<script>
// the main three.js components
var camera, scene, renderer,
// to keep track of the mouse position
mouseX = 0, mouseY = 0,
// an array to store our particles in
particles = [];
// let's get going!
init();
function init() {
// Camera params :
// field of view, aspect ratio for render output, near and far clipping plane.
camera = new THREE.PerspectiveCamera(-50, window.innerWidth / window.innerHeight, -20, -10000 );
// move the camera backwards so we can see stuff!
// default position is 0,0,0.
camera.position.z = 80;
// the scene contains all the 3D object data
scene = new THREE.Scene();
// camera needs to go in the scene
scene.add(camera);
// and the CanvasRenderer figures out what the
// stuff in the scene looks like and draws it!
renderer = new THREE.CanvasRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
// the renderer's canvas domElement is added to the body
document.body.appendChild( renderer.domElement );
makeParticles();
// add the mouse move listener
document.addEventListener( 'mousemove', onMouseMove, false );
// render 30 times a second (should also look
// at requestAnimationFrame)
setInterval(update,1000/30);
}
// the main update function, called 30 times a second
function update() {
updateParticles();
// and render the scene from the perspective of the camera
renderer.render( scene, camera );
}
// creates a random field of Particle objects
function makeParticles() {
var particle, material;
// we're gonna move from z position -1000 (far away)
// to 1000 (where the camera is) and add a random particle at every pos.
for ( var zpos= -1000; zpos < 1000; zpos+=20 ) {
// we make a particle material and pass through the
// colour and custom particle render function we defined.
var particleTexture = THREE.ImageUtils.loadTexture('img/fly.png');
material = new THREE.ParticleBasicMaterial( { map: particleTexture, transparent: true, program: particleRender } );
// make the particle
particle = new THREE.Particle(material);
// give it a random x and y position between -500 and 500
particle.position.x = Math.random() * 1000 - 500;
particle.position.y = Math.random() * 1000 - 500;
// set its z position
particle.position.z = zpos;
// scale it up a bit
particle.scale.x = particle.scale.y = 0.3;
// add it to the scene
scene.add( particle );
// and to the array of particles.
particles.push(particle);
}
}
// there isn't a built in circle particle renderer
// so we have to define our own.
function particleRender( context ) {
// we get passed a reference to the canvas context
context.beginPath();
// and we just have to draw our shape at 0,0 - in this
// case an arc from 0 to 2Pi radians or 360ยบ - a full circle!
context.arc( 0, 0, 1, 0, Math.PI * 2, true );
context.fill();
};
// moves all the particles dependent on mouse position
function updateParticles() {
// iterate through every particle
for(var i=0; i<particles.length; i++) {
particle = particles[i];
// and move it forward dependent on the mouseY position.
particle.position.z += mouseY * 0.02;
// if the particle is too close move it to the back
if(particle.position.z>1500) particle.position.z-=2300;
}
}
// called when the mouse moves
function onMouseMove( event ) {
// store the mouseX and mouseY position
mouseX = event.clientX;
mouseY = event.clientY;
}
</script>
I guess, you need to resize the renderer and update the camera aspect ratio. 我想,您需要调整渲染器的大小并更新相机的宽高比。 The following code can be found in almost every three.js example, but I don't see it in your code. 几乎每个Three.js示例中都可以找到以下代码,但我在您的代码中看不到。
window.addEventListener( 'resize', onWindowResize, false );
function onWindowResize() {
var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;
renderer.setSize( canvasWidth, canvasHeight );
camera.aspect = canvasWidth / canvasHeight;
camera.updateProjectionMatrix();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.