Javascript 如何在Z-WebGL中翻译？
我的问题是函数Javascript 如何在Z-WebGL中翻译？,javascript,three.js,webgl,translate-animation,translate3d,Javascript,Three.js,Webgl,Translate Animation,Translate3d,我的问题是函数translateZ停止代码并且不工作。没有这一行：分词。translateZ（50）代码可以工作，但是我想用这个代码将Z轴上的分词翻译50 <!DOCTYPE html> <!-- saved from url=(0070)http://mrdoob.github.com/three.js/examples/webgl_particles_random.html --> <html lang="en"><meta style="visib
translateZ分词。translateZ（50）代码可以工作，但是我想用这个代码将Z轴上的分词翻译50
<!DOCTYPE html>
<!-- saved from url=(0070)http://mrdoob.github.com/three.js/examples/webgl_particles_random.html -->
<html lang="en"><meta style="visibility: hidden !important; display: block !important; width: 0px !important; height: 0px !important; border-style: none !important;"><embed id="__IDM__" type="application/x-idm-downloader" width="1" height="1" style="visibility: hidden !important; display: block !important; width: 1px !important; height: 1px !important; border-style: none !important; position: absolute !important; top: 0px !important; left: 0px !important;"></meta><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>three.js webgl - particles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000000;
margin: 0px;
overflow: hidden;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
text-align:center;
}
a {
color:#0078ff;
}
#info {
color: #fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index: 100;
}
</style>
</head>
<body>
<div id="info">
<a href="http://threejs.org/" target="_blank">three.js</a> - webgl particles example
</div>
<script src="./three.js webgl - particles_files/three.min.js"></script>
<script src="./three.js webgl - particles_files/three.js"></script>
<script src="./three.js webgl - particles_files/Detector.js"></script>
<script src="./three.js webgl - particles_files/stats.min.js"></script>
<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color;
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
init();
animate();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 1000;
scene = new THREE.Scene();
scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
geometry = new THREE.Geometry();
for ( i = 0; i < 50; i ++ ) {
var vertex = new THREE.Vector3();
vertex.x = Math.random() * 2000 - 1000;
vertex.y = Math.random() * 2000 - 1000;
vertex.z = Math.random() * 2000 - 1000;
geometry.vertices.push( vertex );
}
parameters = [ [ [1.0, 1.0, 1.0], 55 ], [ [0.95, 1, 1], 44 ], [ [0.90, 1, 1], 33 ], [ [0.85, 1, 1], 22 ], [ [0.80, 1, 1], 11 ] ];
//parameters = [ [ 0xff0000, 5 ], [ 0xff3300, 4 ], [ 0xff6600, 3 ], [ 0xff9900, 2 ], [ 0xffaa00, 1 ] ];
//parameters = [ [ 0xffffff, 5 ], [ 0xdddddd, 4 ], [ 0xaaaaaa, 3 ], [ 0x999999, 2 ], [ 0x777777, 1 ] ];
for ( i = 0; i < parameters.length; i ++ ) {
size = parameters[i][1];
color = parameters[i][0];
//materials[i] = new THREE.ParticleBasicMaterial( { color: color, size: size } );
materials[i] = new THREE.ParticleBasicMaterial( { size: size } );
materials[i].color.setHSV( color[0], color[1], color[2] );
particles = new THREE.ParticleSystem( geometry, materials[i] );
//particles.rotation.x = Math.random() * 6;
//particles.rotation.y = Math.random() * 6;
particals.translateZ(50);
particles.rotation.z = Math.random() * 30000;
scene.add( particles );
}
renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
//
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function onDocumentMouseMove( event ) {
/* mouseX = event.clientX - windowHalfX;
mouseY = event.clientY - windowHalfY;*/
}
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
/*mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;*/
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
/*mouseX = event.touches[ 0 ].pageX - windowHalfX;
mouseY = event.touches[ 0 ].pageY - windowHalfY;*/
}
}
//
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = Date.now() * 0.00005;
camera.position.x += ( mouseX - camera.position.x ) * 0.05;
camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
camera.lookAt( scene.position );
for ( i = 0; i < scene.children.length; i ++ ) {
var object = scene.children[ i ];
if ( object instanceof THREE.ParticleSystem ) {
object.rotation.y = time * ( i < 4 ? i + 1 : - ( i + 1 ) );
}
}
for ( i = 0; i < materials.length; i ++ ) {
color = parameters[i][0];
h = ( 360 * ( color[0] + time ) % 360 ) / 360;
materials[i].color.setHSV( h, color[1], color[2] );
}
renderer.render( scene, camera );
}
</script><div><canvas width="1304" height="640" style="width: 1304px; height: 640px;"></canvas><div id="stats" style="width: 80px; opacity: 0.9; cursor: pointer; position: absolute; top: 0px;"><div id="fps" style="padding: 0px 0px 3px 3px; text-align: left; background-color: rgb(0, 0, 34);"><div id="fpsText" style="color: rgb(0, 255, 255); font-family: Helvetica, Arial, sans-serif; font-size: 9px; font-weight: bold; line-height: 15px;">49 FPS (0-54)</div><div id="fpsGraph" style="position: relative; width: 74px; height: 30px; background-color: rgb(0, 255, 255);"><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 30px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 17.4px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 17.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.7px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.399999999999999px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.7px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 15px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.399999999999999px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 13.799999999999997px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.1px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.399999999999999px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 15px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 18.299999999999997px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 16.2px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 16.2px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.399999999999999px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.7px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.399999999999999px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.7px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.7px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.399999999999999px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 15px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.7px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 14.7px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 15.600000000000001px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 17.4px; float: left; background-color: rgb(17, 17, 51);"></span><span style="width: 1px; height: 15.3px; float: left; background-color: rgb(17, 17, 51);"></span></div></div><div id="ms" style="padding: 0px 0px 3px 3px; text-align: left; background-color: rgb(0, 34, 0); display: none;"><div id="msText" style="color: rgb(0, 255, 0); font-family: Helvetica, Arial, sans-serif; font-size: 9px; font-weight: bold; line-height: 15px;">20 MS (3-13222)</div><div id="msGraph" style="position: relative; width: 74px; height: 30px; background-color: rgb(0, 255, 0);"><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 24.9px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 16.5px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 28.5px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.15px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 28.05px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.75px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 24.9px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 24.9px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.15px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 28.05px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 24.9px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 25.2px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.75px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 24.75px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 25.2px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.75px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 24.75px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 25.05px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 25.05px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 25.05px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.15px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.9px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.45px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 25.05px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.3px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27.6px; float: left; background-color: rgb(17, 51, 17);"></span><span style="width: 1px; height: 27px; float: left; background-color: rgb(17, 51, 17);"></span></div></div></div></div>
three.js webgl-粒子
身体{
背景色：#000000；
边际：0px；
溢出：隐藏；
字体系列：Monospace；
字体大小：13px；
文本对齐：居中；
字体大小：粗体；
文本对齐：居中；
}
a{
颜色：#0078ff；
}
#信息{
颜色：#fff；
位置：绝对位置；
顶部：0px；宽度：100%；
填充物：5px；
z指数：100；
}
-webgl粒子示例
如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
var容器，stats；
var摄影机、场景、渲染器、粒子、几何体、材质=[]、参数、i、h、颜色；
var mouseX=0，mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
摄像头=新的三个透视摄像头（75，window.innerWidth/window.innerHeight，13000）；
摄像机位置z=1000；
场景=新的三个。场景（）；
scene.fog=新的三个.FogExp2（0x000000，0.0007）；
几何体=新的三个。几何体（）；
对于（i=0；i<50；i++）{
var顶点=新的三个向量3（）；
vertex.x=Math.random（）*2000-1000；
vertex.y=Math.random（）*2000-1000；
vertex.z=Math.random（）*2000-1000；
几何。顶点。推（顶点）；
}
参数=[[1.0,1.0,1.0,55]，[0.95,1,1,44]，[0.90,1,1,33]，[0.85,1,1,22]，[0.80,1,1,11]；
//参数=[[0xff0000,5]，[0xff3300,4]，[0xff6600,3]，[0xff9900,2]，[0xFFA00,1]；
//参数=[[0xffffff，5]，[0xDDDD，4]，[0xAAAAA，3]，[0x999999，2]，[0x77777，1]；
对于（i=0；i
也许你拼错了“particl”
particles.position.z += 50