Ich versuche, die Kugel in einem sehr langsamen Tempo nach rechts zu drehen. hier ist mein quellcode: ich habe ein neues container mit leinwand drin erstellt, man kann den code sehen. was muss ich mit einschließen, dass sich die Kugel in einem langsamen Tempo dreht? hier bin ich auch ich habe meine Git-Repository auf GitHub: siehe das Bild in https://github.com/SpaceG/SpaceSphere. hier habe ich auch, ein anderes Beispiel gefunden, mit einer Kugel: dieser Roundball truns ein Schwimmer sehr langsam in den gleichen Punkt, das ist excut waht ich brauche: http://rectangleworld.com/demos/DustySphere/DustySphere.html Diese biegen links ich brauche in meinem Code unten]. Sie können auch mein Repo herunterladen oder es ablegen und fixxed mein Problem hier. Hierthree.js Leinwand, Kugel drehen oder schweben rechts
ist der HTML-Doc:
<!DOCTYPE html>
<html lang="en">
<head>
<title></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;
}
a {
color:#0078ff;
}
</style>
<script src="../build/three.js"></script>
<script src="js/renderers/Projector.js"></script>
<script src="js/renderers/CanvasRenderer.js"></script>
</head>
<body>
Der Javascript-Code, um die Kugel möglich:
<script>
var SCREEN_WIDTH = window.innerWidth,
SCREEN_HEIGHT = window.innerHeight,
mouseX = 0, mouseY = 0,
windowHalfX = window.innerWidth/4,
windowHalfY = window.innerHeight/4,
SEPARATION = 600,
AMOUNTX = 10,
AMOUNTY = 10,
camera, scene, renderer;
init();
animate();
function init() {
var container, turnAngle, separation = 100, amountX = 50, amountY = 50,
particles, particle;
container = document.createElement('div');
container.setAttribute('class', 'space-id');
document.body.appendChild(container);
camera = new THREE.PerspectiveCamera(275, SCREEN_WIDTH/SCREEN_HEIGHT, 5, 10000000);
camera.position.z = 100;
scene = new THREE.Scene();
renderer = new THREE.CanvasRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
container.appendChild(renderer.domElement);
// particles
var PI2 = Math.PI * 2;
var material = new THREE.SpriteCanvasMaterial({
color: 0xffffff,
program: function (context) {
context.beginPath();
context.arc(0, 0, 0.5, 0, PI2, true);
context.fill();
}
});
for (var i = 0; i < 1000; i ++) {
particle = new THREE.Sprite(material);
particle.position.x = Math.random() * 2 - 1;
particle.position.y = Math.random() * 2 - 1;
particle.position.z = Math.random() * 2 - 1;
particle.position.normalize();
particle.position.multiplyScalar(Math.random() * 10 + 450);
particle.scale.multiplyScalar(2);
scene.add(particle);
}
// lines
for (var i = 0; i < 300; i++) {
var geometry = new THREE.Geometry();
var vertex = new THREE.Vector3(Math.random() * 2 - 1, Math.random() * 2 - 1, Math.random() * 2 - 1);
vertex.normalize();
vertex.multiplyScalar(450);
geometry.vertices.push(vertex);
var vertex2 = vertex.clone();
vertex2.multiplyScalar(Math.random() * 0.3 + 1);
geometry.vertices.push(vertex2);
var line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xffffff, opacity: Math.random() }));
scene.add(line);
}
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/4;
windowHalfY = window.innerHeight/4;
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();
}
function render() {
camera.position.x += (mouseX - camera.position.x) * .05;
camera.position.y += (- mouseY + 200 - camera.position.y) * .05;
camera.lookAt(scene.position);
renderer.render(scene, camera);
}
</script>
</body>
</html>
Hier ist ein Bild über das Ziel des Projektes, dass die runden Kugel wiederum zu in langsamem Tempo gelassen, gibt mir hier jemand Tipps? lässt die gute Arbeit los. Vielen Dank.
können Sie eine Arbeits Geige schaffen? – Nimish
Ich habe auch meine JsFiddle hier erstellt [Link] (http://jsfiddle.net/SpaceG/0w149z6o/) – user3061844
aber, wäre gut, dass der Zoom in bleiben würde, nur die Animation rechts abbiegen ... in einem langsamen Tempo. das ist alles. aber ich habe es hier nicht verstanden. Frieden. ps. genau wie eine Discokugel ... – user3061844